How to set up color swatches in Be Yours 7.1.0 or later

If you're using Be Yours version 7.1.0 or later, this information pertains to you.

In online retail environments, color swatches serve as a valuable digital tool. They facilitate customer selection by visually representing the spectrum of color options available for a particular product.

Without color swatches	Enable color swatches

Setting up color swatches

1. First, enable the color swatches

   Under Product information ¹ section > Variant picker ² block > Enable color swatches ³

   

    

2. Second, setting up the trigger

    

   We'll use 'Color' as the trigger as [1] in the below image.

   

   • Go to [Theme menu] > [Edit default theme content] and type trigger in the search bar. You'll find it under [Products] > Color swatch trigger.

     

     

   • In this example, we set the trigger to Color. Remember, you can customize this trigger to match the actual name of your product's option names.

     Trigger via theme menu	Option name in product

   • This step automatically pulls the values from your product's Color option (e.g., Black, White...) to set on the product page. (see image below)

     In pages	Values from product

3. Finally, displaying of swatch selection

    

   There are 2 styles for displaying swatches:

   • Variant images

      

     This setting makes color swatches mirror the avatar images assigned to product color options.

     

     Color values in product

     Color swatches displaying

     

     

     Then click Save to finish.

   • Custom swatches displaying as the following orders:

      

     

     1. Firstly, the system scans the [Configuration box] via [Theme settings]:

        

        Within your Configuration box, color swatches are defined by:

        • Custom HEX code
        • Matching image file names - you need to upload the image in Admin dashboard > Content > Files before using image file name.

        Please refer to the two images below for examples of Black color.

        Custom HEX code	Matching image file names
        	Image file uploaded in Admin dashboard: Enter the exactly file name in the Configuration box

     2. If no value in the Configuration box, the system searches for matching image files - names must match option values. Supporting various formats, such as: PNG, JPG, WebP.

        e.g. Black value matches black.png file

        • Upload images matching your color names in Admin dashboard > Content > Files.

          

        • System automatically finds and uses these images as swatches.

          

        Image names follow these rules:

        • Capitals become lowercase.
        • Spaces and other special characters become hyphens.

        E.g.: Navy blue swatches would need to be named navy-blue.png

     3. Hex Code Fallback

        If no value in Configuration box and no matching image is found, the system uses the color option's hex code (e.g., #000000 for Black) to create a color swatch.

        

        

     4. If none of the above three conditions are met, Blank Swatch (Last Resort):

        If neither an image nor a valid hex code is available, the swatch will appear blank (similar to white, but not a true white).

        

These are all the color swatch settings for version 7.1.0 or later. Feel free to reach out to our support team if you need any help.