Whenever you Enable color swatches, Be Concept theme give you two options for displaying Color swatches: Custom image and Variant image.
Please review the table below to comprehend this article more easily.
|Disable color swatches||Custom images||Variant images|
On this page
1. Where is this feature?
In order to adjust the Color schemes option for your page, you set up as follows:
On your Product page via the Theme editor, select the Variant picker block under the Product information section.
In Color swatch > Swatch type, there would be two options: Variant images and Custom images.
2. How does it work?
To get started, enabled the color swatch settings and then choose between Color swatch or Variant image to display.
2.1 Color swatch
Configure your color swatch by setting up the Configuration box. Please refer to the following rules for information on how this feature will work:
Once you have enabled this feature, Be Concept will look for color values in your Theme settings> Color swatch > Configuration box that match the names of your product color variants.
If the color value is found, the color swatch will be displayed using that value.
Example 1 - using HEX code: The Configuration box contains the following value:
Then the color swatch for Black will be displayed using the color #3a3a3a instead of the default black color #000000.
Example 2 - using an uploaded file: The Configuration box contains the following value:
Then the color swatch for Crimson shadow will be displayed using the image named
crimson-shadow.webp, which is uploaded in Shopify Admin dashboard/ Content/ File.
If the color value is not found in the Configuration box, look for a
*.pngfile with the same name as the color variant.
For example: In this case, this feature will use a
crimson-shadow.pngfor the color swatch.
*.pngfile is not found, display the color swatch by using the CSS color name for the color variant.
For example: If the value for the color variant "Black" is not found, the color swatch will display the default black color,
If the color does not have a value in the configuration box, a PNG file, or a HEX code, the color swatch will be blank.
For example: The Chestnut color have no value, png file or HEX code, so the color swatch will be blank.
2.2 Variant image
Once you have enabled the color swatch settings, Concept will look for any variant category with the name "Color" or "Colour".
To change the word to something other than "Color/Colour" (such as: Couleur in French) you can do so in your languages area Theme menu > Edit default theme content.
Types color_swatch_trigger in the search bar to find the [Color swatch trigger] settings.
The theme will then look at the variant names you've used, in this case:
and look for either an
HTML color name with the exact same name OR a
chosen image in Products > Variants > Update variant image.
3. Naming your swatch files
- For example,
Navyswatches would need to be named
navy.png(capitals become lowercase.)
Crimson Shadowswatches would need to be name
crimson-shadow.png(capitals become lowercase, spaces and other special characters become hyphens.)
4. Where is the 'Files" option in the Shopify admin?
- First, open up the Shopify admin.
- Go to
Content, then select the
Filesoption and open it. Click
Upload filesto begin uploading your