अपनी बिक्री बढ़ाएँ, अपने स्टोर को कॉन्सेप्ट से बदलें। अभी निःशुल्क आज़माएँ

How to setup color swatches CONCEPT theme

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.

  1. From your Shopify admin, go to Products.
  2. Open the product you want to edit.
  3. In the Variants area, make sure the product has a color option.
  4. Use a clear option name, such as:
Color

or:

Colour
  1. Add color values, such as:
Black
Gold Tone
Chestnut
Navy
Crimson Shadow
  1. Add images to variants if you want to use Variant image swatches.
  2. 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

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme.
  3. Click ....
  4. Click Edit default theme content.
  5. Search for:
color_swatch_trigger

or:

Color swatch trigger
  1. Find the Color swatch trigger field.
  2. Enter the option names that should be displayed as color swatches.
  3. 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.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open Theme settings.
  4. Open Color swatches.
  5. Find the Configuration field.
  6. Add one swatch rule per line.
  7. 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

  1. From your Shopify admin, go to Content > Files.
  2. Click Upload files.
  3. Upload your swatch image files.
  4. 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.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open a product template, such as Default product.
  4. Open Template > Product information.
  5. Select the Variant picker block.
  1. Set Picker type to Button.
  2. Enable Color swatches.
  3. Choose the Swatch type.
  4. 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.

  1. From your Shopify admin, go to Products.
  2. Open the product.
  3. Scroll to the Variants area.
  4. Open a color variant.
  5. Add or update the variant image.
  6. Repeat this for each color variant.
  7. 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
  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open Theme settings.
  4. Open Products.
  5. Find the Color swatches settings.
  6. Enable Color swatches.
  7. Set Maximum swatches to show.
  8. Choose the Swatch type.
  9. 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 +N link.
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.

  1. From your Shopify admin, go to Apps > Search & Discovery.
  2. Open Filters.
  3. Add a filter based on the product color option or another color-related source.
  4. Make sure the filter label contains the color swatch trigger, such as Color.
  5. Save the filter setup.

10.2 Enable color filter swatches on collection pages

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open a collection template, such as Default collection.
  4. Select the Product grid section.
  5. Enable Filtering.
  6. Enable Color swatches.
  7. Click Save.

Recommended setup:

Setting Value
Enable filtering Enabled
Enable color swatches Enabled

10.3 Enable color filter swatches on search pages

  1. From the theme editor, open the Search template.
  2. Select the Search results section.
  3. Enable Filtering.
  4. Enable Color swatches.
  5. 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

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open Theme settings.
  4. Open Layout.
  5. Find the Color swatches setting.
  6. Choose a swatch shape.
  7. 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

  1. Open Theme settings > Color swatches.
  2. Enable or disable Show image swatch tooltip.
  3. 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:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open a product template.
  4. Open Template > Product information.
  5. Click Add block.
  6. Select Product variations.
  7. Configure the option name, option value metafield, and product list.
  8. Enable Color swatches.
  9. Choose the Swatch type.
  10. 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:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open the template that contains the bundle section.
  4. Select the bundle section.
  5. Set the variant picker style to Button, if available.
  6. Enable Color swatches.
  7. Choose the Swatch type.
  8. 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 +N link.
  • 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 Color or Colour.
  • 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.

विश्व स्तरीय समर्थन

एक सहज खरीदारी अनुभव के लिए हमारी 5-स्टार ग्राहक सेवा का लाभ उठाएँ। कोई प्रतीक्षा समय नहीं, कोई परेशानी नहीं, बस विशेषज्ञ सहायता।

मुफ़्त आजीवन अपडेट

आपके स्टोर को जीवन भर उद्योग मानकों और रुझानों के अनुकूल, निःशुल्क और नियमित अपडेट प्राप्त होंगे।

डिज़ाइन जो कुछ भी बेचता है

ऑनलाइन स्टोर बनाना और तुरंत अपने उत्पाद बेचना शुरू करना आसान है।

गति-परीक्षण किया गया और अनुमोदित किया गया

Shopify के प्रदर्शन मानकों को पूरा करता है, जिससे आपके खरीदारों के लिए तेज़ खरीदारी अनुभव सुनिश्चित होता है।
© 2026 RoarTheme - Premium Shopify Themes, Apps and Services. 
Shopify द्वारा संचालित