Whenever you Enable color swatches, 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
- Where is this feature?
- How does it work?
- Naming your swatches files
- Where is the 'Files' option in the Shopify admin?
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, 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:
Black:#3a3a3a
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:
Crimson Shadow:crimson-shadow.webp
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 > Files.
-
-
If the color value is not found in the Configuration box, look for a
*.png
file with the same name as the color variant.For example: In this case, this feature will use a
*.png
file namedcrimson-shadow.png
for the color swatch. -
If the
*.png
file 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,
#000000
. -
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:
- Gold Tone
- Black
- Chestnut
- Navy
- Crimson Shadow
and look for either an HTML color name with the exact same name OR a chosen image
in Products > Variants > Update variant image.
Gold Tone | Black | Chestnut | Navy | Crimson Shadow |
---|---|---|---|---|
3. Naming your swatch files
-
For example,
Black
,Chestnut
orNavy
swatches would need to be namedblack.png
,chestnut.png
ornavy.png
(capitals become lowercase.) -
Gold Tone
andCrimson Shadow
swatches would need to be namegolde-tone.png
andcrimson-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 theFiles
option and open it. ClickUpload files to begin uploading your.png
swatch files.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, don't hesitate to reach out to Roartheme's support team for expert guidance.
Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp
Share:
How to set up sibling products?
Adding and removing dynamic checkout buttons