Color swatches [Bazaar]

What are color swatches?

Replace an option with swatches

Customizing swatches (Swatches code) 

Swatch helper

 

 

 

What are color swatches?

Color Swatches can be activated on multiple pages/sections (product pages, collection/search filters, collection items) to display the color or pattern of an option visually. 

The swatches pick the color from a product Option. So, for example, if you have an option called "Color," you can define swatches to target this option and generate swatches for it. 

 

Only jpg and png files are allowed. 

How to add an option to a product in Shopify Admi   

 

Replace an option with swatches

Let's assume that your product/s have an option called Color

To turn that option into a swatch:

1. In the Theme editor, navigate to the Theme settings → Swatches. 
    

2. Type the Option names (e.x. Color, Colors) you want to replace with swatches in the Swatches settings. Make sure to separate the option names with a comma ',.'

   •  

     

Customize swatches (Swatches code)

1. Go to Theme settings → Swatches. 
2. In the Swatches setting, click on the Swatches code text area.
   •  
   •  

3. In Swatches code, enter each option value and the color-code/filename you want to assign to that option value with the following format.

   • To add an image for a swatch, first add the image to your theme files  , in Admin → Settings → files  
     
     Uploading and managing files 

   •  
   •  
   • Option-value : Color-code
   •  
   • And for adding an image file as a swatch.
   •  
   • Option-value : Filename . extension
   •  
   • For example:
     
     • Blue: rgba(77,89,242)
       Red: #ff0a0a
       Stripes: stripes-file.jpg
     •  
     • 

     • Remember to:

       • Separate values and the color/filename with a colon ':,'
       • Each option name must be in a new line.

    

4. Repeat this step for every customized swatch; each option name must be in a new line. 

 

Swatch helper

Swatch helper is a tool to help customize the swatches.

• It appears only in the Theme editor  . it does not appear on the live site.
• It is there only to generate the code for the "Swatch code" option.

Uncheck the Swatch helper option after using it. 

How to use swatch helper 

1. In Theme Theme editor  , go to Theme settings → Swatches and check the Swatch helper option.
   • 
2. Click on the New swatch icon on the swatch helper panel to add a new swatch. 
   • 
3. Type the Option value that you want to edit its swatch, and pick the color by clicking on the Color picker. 
   • 
4. To add an image for the swatch, click on the New from image icon at the top of the swatch helper, type the Option value and select the file extension.
   • 
5. Click on the Copy code button at the top of the swatch helper. 
   • 
6. Paste the code in the Swatches code in Theme settings → Swatches
   • 
7. Uncheck the Swatch helper in Theme settings → Swatches