Color swatches help customers see product color options visually instead of reading color names only.
In Concept, color swatches can be used in multiple places:
- Product page variant picker
- Product cards on collection, search, featured collection, recommendations, and recently viewed sections
- Collection and search filters
- Product variations block, when linking separate products by color
- Bundle product variant pickers, when the bundle section uses button-style variant options
Concept supports two main swatch display styles:
| Disable color swatches | Custom images / color swatches | Variant images |
|---|---|---|
How to Set Up Color Swatches in Concept
STEPS:
1. Prepare Your Product Color Options
Before enabling color swatches, make sure your product has a color option.
- From your Shopify admin, go to Products.
- Open the product you want to edit.
- In the Variants area, make sure the product has a color option.
- Use a clear option name, such as:
Color
or:
Colour
- Add color values, such as:
Black
Gold Tone
Chestnut
Navy
Crimson Shadow
- Add images to variants if you want to use Variant image swatches.
- Click Save.
Recommended setup:
| Field | Example value |
|---|---|
| Option name | Color |
| Option values |
Black, Gold Tone, Chestnut, Navy, Crimson Shadow
|
| Variant images | Add an image to each color variant if you want to use Variant image mode |
Important:
Concept detects color options by checking the Color swatch trigger text. By default, the trigger is Color. The theme also supports Colour when the trigger is set to Color.
If your product option uses another name, such as Shade, Tone, or a translated color option name, update the color swatch trigger as explained in the next step.
2. Update the Color Swatch Trigger
The color swatch trigger tells the theme which option should be displayed as color swatches.
By default, the trigger is:
Color
This means any product option containing Color will be treated as a color option.
2.1 Edit the color swatch trigger
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme.
- Click ....
- Click Edit default theme content.
- Search for:
color_swatch_trigger
or:
Color swatch trigger
- Find the Color swatch trigger field.
- Enter the option names that should be displayed as color swatches.
- Click Save.
Example:
Color, Colour, Shade
Recommended setup:
| Store setup | Color swatch trigger |
|---|---|
English store using Color
|
Color |
UK English store using Colour
|
Color or Colour
|
| Store using both names | Color, Colour |
| Store using a custom option name | Color, Shade |
| Store using French option name | Color, Couleur |
Important:
- Separate multiple trigger values with commas.
- The trigger should match the product option name used in your Shopify products.
- If your store uses multiple languages, check the theme content for each language.
- The value should not include quotation marks.
Note: If you are using a theme trial in your online store, Shopify may restrict access to language settings until the theme purchase has been made.
For testing, we recommend using the default Color variant option name.
3. Choose How Swatches Should Get Their Colors
Concept can display swatches from several sources.
| Swatch source | How it works | Best for |
|---|---|---|
| Shopify native swatches | The swatch color or image is managed in Shopify and read by the theme automatically. | Stores using Shopify's native swatch setup. |
| Theme color configuration | You manually map color names to hex colors or image files in Theme settings > Color swatches. | Stores that need full control over swatch colors. |
| Uploaded image file | The theme uses an uploaded image file from Content > Files. | Fabric, texture, pattern, or multi-color swatches. |
| Variant image | The theme uses the image assigned to each variant. | Products where each color variant has its own product image. |
| Fallback color | If no custom setup is found, the theme tries to use the color name as a CSS color. | Basic color names such as Black, White, Blue, or Red. |
Recommended approach:
| Requirement | Recommended setup |
|---|---|
| Simple solid colors | Use hex codes in Theme settings > Color swatches. |
| Fabric, material, pattern, or gradient swatches | Use image swatches. |
| Product card swatches should show the actual product image | Use Variant image as the product card swatch type. |
| Product page swatches should show variant images | Use Variant image in the Variant picker block. |
| Collection filters use Shopify swatch presentation | Use Shopify native filter swatches. |
4. Configure Global Color Swatches
Use Theme settings > Color swatches when you want to manually control swatch colors or image files.
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open Theme settings.
- Open Color swatches.
- Find the Configuration field.
- Add one swatch rule per line.
- Click Save.
4.1 Use hex color values
Use this format:
Color name:#hexcode
Example:
Black:#3a3a3a
White:#ffffff
Navy:#000080
Gold Tone:#d4af37
Crimson Shadow:#8b1a3a
If the configuration contains:
Black:#3a3a3a
The Black swatch will use #3a3a3a instead of the default black color.
Recommended setup:
| Product color value | Swatch configuration |
|---|---|
Black |
Black:#3a3a3a |
White |
White:#ffffff |
Navy |
Navy:#000080 |
Gold Tone |
Gold Tone:#d4af37 |
Important:
The color name before the colon should match the product option value exactly.
Correct:
Gold Tone:#d4af37
Incorrect:
Gold:#d4af37
If the product option value is Gold Tone, the configuration should also use Gold Tone.
5. Set Up Custom Image Swatches
Image swatches are useful when a simple solid color is not enough, for example:
- Fabric patterns
- Wood textures
- Marble finishes
- Glitter colors
- Multi-color products
- Gradients
5.1 Upload swatch images
- From your Shopify admin, go to Content > Files.
- Click Upload files.
- Upload your swatch image files.
- Copy the file name or file URL if needed.
Recommended image setup:
| Setting | Recommendation |
|---|---|
| Image format |
.png, .jpg, or .webp
|
| Image shape | Square image works best |
| Image size | Around 100 x 100 px or larger |
| File size | Keep it optimized |
5.2 Use custom image file names in the configuration field
Use this format:
Color name:file-name.extension
Example:
Crimson Shadow:crimson-shadow.webp
Then the Crimson Shadow swatch will use the image file named crimson-shadow.webp from Content > Files.
5.3 Use automatic image file names
If there is no custom rule in Theme settings > Color swatches, Concept will try to find a .png file that matches the handled color name.
Example:
| Product color value | Automatic image file name |
|---|---|
Black |
black.png |
Chestnut |
chestnut.png |
Navy |
navy.png |
Gold Tone |
gold-tone.png |
Crimson Shadow |
crimson-shadow.png |
For example, if the option value is:
Crimson Shadow
The theme will try to use this file:
crimson-shadow.png
5.4 Use a Shopify CDN image URL
You can also use a Shopify CDN image URL in the configuration field.
Example:
Crimson Shadow://cdn.shopify.com/s/files/1/0000/0000/files/crimson-shadow.webp
Important:
- Add one rule per line.
- Use the exact product color value before the colon.
- When using a file name, make sure the file exists in Content > Files.
- When using a full Shopify CDN URL, copy only the image file URL.
- Use optimized images to avoid slowing down product pages and collection pages.
6. Understand the Swatch Fallback Order
When Concept displays a color swatch, it tries to resolve the swatch appearance in this order:
| Priority | Source | Example |
|---|---|---|
| 1 | Shopify native swatch data, if available | A Shopify swatch color or image assigned to the option value |
| 2 | Theme swatch configuration |
Black:#3a3a3a or Crimson Shadow:crimson-shadow.webp
|
| 3 | Uploaded .png file matching the handled color name |
crimson-shadow.png |
| 4 | CSS color fallback from the option value |
Black, Navy, Red
|
| 5 | Blank fallback | Used when no color, image, or valid CSS color can be found |
6.1 CSS color fallback
If the color value is not found in the configuration field and no matching image file exists, Concept will try to display the color using the option value as a CSS color.
For example, the option value Black can display as the default black color.
6.2 Blank fallback
If the color does not have a configuration value, an uploaded image, a Shopify native swatch, or a valid CSS color name, the swatch may appear blank.
For example, if Chestnut has no swatch configuration and no image file, the swatch can appear blank.
7. Enable Color Swatches on the Product Page
To show color swatches on the product page, enable them inside the Variant picker block.
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open a product template, such as Default product.
- Open Template > Product information.
- Select the Variant picker block.
- Set Picker type to Button.
- Enable Color swatches.
- Choose the Swatch type.
- Click Save.
Recommended setup:
| Setting | Value |
|---|---|
| Picker type | Button |
| Enable color swatches | Enabled |
| Swatch type |
Color swatch or Variant image
|
Swatch type options
| Swatch type | Behavior |
|---|---|
| Color swatch | Uses Shopify native swatches, theme configuration, uploaded image swatches, or fallback colors. |
| Variant image | Uses the image assigned to each matching variant as the swatch image. |
Important:
- Color swatches only appear when Picker type is set to Button.
- If Picker type is set to Dropdown, the options will display as dropdown values instead of swatches.
- If an option is not detected as a color option, it will display as a normal text button.
- If you use Variant image, make sure each color variant has an image assigned.
8. Set Up Variant Image Swatches
When Swatch type is set to Variant image, Concept uses the image assigned to each variant.
- From your Shopify admin, go to Products.
- Open the product.
- Scroll to the Variants area.
- Open a color variant.
- Add or update the variant image.
- Repeat this for each color variant.
- Click Save.
The theme will look at the color values you have used, for example:
- Gold Tone
- Black
- Chestnut
- Navy
- Crimson Shadow
Then it will display the image assigned to each variant as the swatch.
| Gold Tone | Black | Chestnut | Navy | Crimson Shadow |
|---|---|---|---|---|
 |
 |
 |
 |
 |
Important:
- Variant image swatches depend on variant images.
- If a variant does not have an image, the theme may fall back to color/image swatch rules where possible.
- For the best result, assign a clear image to the first variant of each color.
9. Enable Color Swatches on Product Cards
Concept can display color swatches below product cards in product grid areas.
This applies to areas such as:
- Collection pages
- Search result pages
- Featured collection sections
- Product recommendations
- Recently viewed products
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open Theme settings.
- Open Products.
- Find the Color swatches settings.
- Enable Color swatches.
- Set Maximum swatches to show.
- Choose the Swatch type.
- Click Save.
Recommended setup:
| Setting | Value |
|---|---|
| Enable color swatches | Enabled |
| Maximum swatches to show | 4 |
| Swatch type |
Color swatch or Variant image
|
9.1 Maximum swatches to show
This setting controls how many swatches appear directly on the product card.
For example, if a product has 7 colors and Maximum swatches to show is set to 4, the product card will show 4 swatches and a +3 link.
9.2 Product card swatch type
| Swatch type | Behavior |
|---|---|
| Color swatch | Uses Shopify native swatches, theme configuration, uploaded image swatches, or fallback colors. |
| Variant image | Uses the image assigned to each variant as the swatch image. |
Important:
- Product card swatches link customers to the matching product variant URL.
- The product must have a color option that matches the Color swatch trigger.
- If Variant image is selected, each variant should have an image assigned.
- If the product has more colors than the maximum number, Concept shows a
+Nlink.
10. Enable Color Swatches in Collection and Search Filters
Concept can display color filter values as swatches in collection and search result filters.
10.1 Prepare color filters in Shopify
Before enabling filter swatches in the theme, make sure your store has a color filter available.
- From your Shopify admin, go to Apps > Search & Discovery.
- Open Filters.
- Add a filter based on the product color option or another color-related source.
- Make sure the filter label contains the color swatch trigger, such as
Color. - Save the filter setup.
10.2 Enable color filter swatches on collection pages
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open a collection template, such as Default collection.
- Select the Product grid section.
- Enable Filtering.
- Enable Color swatches.
- Click Save.
Recommended setup:
| Setting | Value |
|---|---|
| Enable filtering | Enabled |
| Enable color swatches | Enabled |
10.3 Enable color filter swatches on search pages
- From the theme editor, open the Search template.
- Select the Search results section.
- Enable Filtering.
- Enable Color swatches.
- Click Save.
10.4 Filter swatch presentations
Concept supports these filter presentations:
| Filter presentation | Behavior |
|---|---|
| Swatch | Uses Shopify's native filter swatch data. |
| Image | Uses Shopify's filter image presentation. |
| Regular list | Can be converted into swatches when the filter label matches the color swatch trigger. |
Important:
- Filter swatches require filtering to be enabled.
- The filter label should match the color swatch trigger, such as
Color. - If Shopify's filter presentation is set to Swatch, Concept can display the Shopify swatch data directly.
- If the filter is a regular list filter, Concept can still display swatches when the filter label matches the color swatch trigger.
11. Adjust the Swatch Shape and Tooltip
Concept includes global settings for swatch shape and image swatch tooltip.
11.1 Change the swatch shape
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open Theme settings.
- Open Layout.
- Find the Color swatches setting.
- Choose a swatch shape.
- Click Save.
Available options:
| Option | Result |
|---|---|
| Square | Displays square swatches. |
| Slightly round | Displays swatches with slightly rounded corners. |
| Round | Displays circular swatches. |
11.2 Enable image swatch tooltip
- Open Theme settings > Color swatches.
- Enable or disable Show image swatch tooltip.
- Click Save.
This setting controls whether image swatches display a tooltip with the color name when customers hover over the swatch.
12. Optional: Use Color Swatches in the Product Variations Block
The Product variations block can be used when you want to link separate products together by color instead of using variants inside one product.
For example, you may have separate Shopify products for:
- Linen Shirt - Black
- Linen Shirt - White
- Linen Shirt - Beige
In this case, the Product variations block can display those separate products as color swatches on the product page.
Basic setup:
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open a product template.
- Open Template > Product information.
- Click Add block.
- Select Product variations.
- Configure the option name, option value metafield, and product list.
- Enable Color swatches.
- Choose the Swatch type.
- Click Save.
Recommended setup:
| Setting | Purpose |
|---|---|
| Option name | The label shown above the swatches, such as Color. |
| Option value metafield | The metafield that stores each product's color value. |
| Products | The list of separate products to link together. |
| Enable color swatches | Displays the linked products as swatches. |
| Swatch type | Uses color swatches or product images. |
Important:
This setup links separate Shopify products together. It does not merge products into one Shopify product and does not replace the normal variant picker.
13. Optional: Use Color Swatches in Bundle Product Sections
Concept's bundle product sections can also display swatches when the section uses a button-style variant picker.
This can apply to:
- Product bundle section
- Floating product bundle section
- Bundle product variant selectors inside bundle cards
Basic setup:
- From your Shopify admin, go to Online Store > Themes.
- Find the Concept theme and click Customize.
- Open the template that contains the bundle section.
- Select the bundle section.
- Set the variant picker style to Button, if available.
- Enable Color swatches.
- Choose the Swatch type.
- Click Save.
Important:
- Bundle swatches use the same color detection logic as product page swatches.
- The product must have a color option matching the Color swatch trigger.
- If you choose Variant image, make sure the variants inside the bundled product have images assigned.
14. Preview the Color Swatches
After completing the setup, preview the storefront and check each area where swatches should appear.
Check the following:
| Area | What to check |
|---|---|
| Product page | Color option appears as swatches in the variant picker. |
| Product card | Swatches appear below the product title/price area. |
| Collection filters | Color filter values appear as swatches. |
| Search filters | Color filter values appear as swatches. |
| Product variations block | Linked products appear as swatches if the block is used. |
| Bundle product sections | Bundle variant options appear as swatches if enabled. |
Expected behavior:
- Clicking a product page swatch changes the selected variant.
- Clicking a product card swatch opens the matching variant URL.
- Selecting a filter swatch filters the collection or search results.
- If a swatch uses an image file, the image appears inside the swatch.
- If a swatch uses a hex code, the swatch displays the matching color.
- If a swatch cannot be found, the theme falls back to the color name where possible.
15. Notes and Limitations
Please note the following behavior:
- Color swatches are visual representations of existing product options. They do not create product variants automatically.
- Product page color swatches require the Variant picker block to use Button as the picker type.
- Product card swatches are controlled globally in Theme settings > Products.
- Swatch shape is controlled globally in Theme settings > Layout.
- Manual swatch mapping is controlled globally in Theme settings > Color swatches.
- Color filter swatches must be enabled separately on collection and search templates.
- The color option name or filter label must match the color swatch trigger.
- Multiple color swatch triggers can be separated by commas.
- If your store has multiple languages, check the trigger value for each language.
- Variant image mode requires images assigned to variants.
- Image swatches require files to be uploaded to Shopify and mapped correctly.
- Product card swatches can be limited by the Maximum swatches to show setting.
- If the product has more colors than the maximum number, Concept shows a
+Nlink. - Shopify native swatches can be used when Shopify swatch data is available on option values or filters.
Developer reference:
| File | Purpose |
|---|---|
config/settings_schema.json |
Defines global swatch settings, product card swatch settings, and swatch shape settings. |
locales/en.default.json |
Contains the default products.general.color_swatch_trigger value. |
sections/main-product.liquid |
Adds swatch settings to the product page variant picker and Product variations block. |
sections/main-product-modal.liquid |
Adds the same swatch settings to product modal/quick view contexts. |
sections/featured-product.liquid |
Adds swatch settings to the Featured product section. |
sections/product-bundle.liquid |
Adds swatch settings to Product bundle section variant pickers. |
sections/floating-product-bundle.liquid |
Adds swatch settings to Floating product bundle section variant pickers. |
sections/main-collection.liquid |
Adds swatch settings for collection filters and product cards. |
sections/main-search.liquid |
Adds swatch settings for search filters and product cards. |
snippets/product-variant-picker.liquid |
Chooses the correct variant picker rendering based on picker type and swatch settings. |
snippets/product-variant-picker-swatch.liquid |
Renders product page color swatches using color/image rules. |
snippets/product-variant-picker-variant.liquid |
Renders product page variant image swatches. |
snippets/product-card.liquid |
Renders product card swatches and the +N link. |
snippets/facets.liquid |
Renders filter color swatches in collection and search filters. |
snippets/facets-active.liquid |
Renders active color filter swatches. |
snippets/swatch.liquid |
Shared swatch rendering snippet used by product cards and filters. |
Troubleshooting
If color swatches do not display correctly, please check the following:
- Make sure the product has a color option, such as
ColororColour. - Make sure the color option name matches the Color swatch trigger.
- Make sure multiple trigger values are separated by commas.
- Make sure Picker type is set to Button in the product page Variant picker block.
- Make sure Enable color swatches is turned on in the Variant picker block.
- Make sure the correct Swatch type is selected.
- Make sure Color swatches is enabled in Theme settings > Products if you want swatches on product cards.
- Make sure Maximum swatches to show is not set too low if some product card swatches are hidden.
- If you use Variant image, make sure each color variant has an image assigned.
- If you use hex colors, make sure each rule uses the correct format, such as
Black:#000000. - If you use image swatches, make sure the image file exists in Content > Files.
- If you use automatic image file names, make sure the file name matches the handled option value, such as
crimson-shadow.png. - If you use a custom image file, make sure the configuration points to the correct file name or Shopify CDN URL.
- If filter swatches do not show, make sure filtering is enabled on the collection or search template.
- If filter swatches do not show, make sure the filter label matches the color swatch trigger.
- If native Shopify swatches do not appear, check the Shopify swatch setup for the option or filter.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Concept theme.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Scrollspy Navigation Section
How to Set Up Product Bundle / Popular Upgrades in product page Concept theme