The Be Yours theme supports different swatch sources for displaying product color options as swatches.
Swatches can appear in:
- Product cards
- Collection product grids
- Featured collection sections
- Product pages
- Featured product sections
This guide explains the difference between the three swatch sources:
| Swatch source | Main purpose |
|---|---|
| Variant images | Uses images assigned to product variants. |
| Custom | Uses custom color or image rules from Theme settings. |
| Native | Uses Shopify's native swatch data. |
Understanding Swatch Sources in Be Yours:
1. Where to Configure Swatch Source
Swatch source can be configured in different areas depending on where the swatches appear.
| Area | Where to configure |
|---|---|
| Product cards | Theme settings > Product tiles > Swatch source |
| Product page variant picker | Product template > Main product > Variant picker block > Swatch source |
| Featured product variant picker | Featured product section > Variant picker block > Swatch source |
| Custom swatch rules | Theme settings > Color swatches > Configuration |
For product cards, make sure swatches are enabled in both places:
- Theme settings > Product tiles > Enable swatches feature
- The related section setting, such as Enable color swatches
For product pages, swatches require the variant picker type to be set to Pills.
2. Variant Images Source
The Variant images source uses the image assigned to each variant.
Use this source when each color should show an actual product image or fabric image.
How it works:
- The merchant assigns images to product variants in Shopify admin.
- The theme uses those variant images as swatches.
- When customers interact with the swatch, the related product image can also update.
Setup:
- From Shopify admin, go to Products.
- Open the product.
- Open the variant area.
- Assign an image to each color variant.
- Go to the Theme Editor.
- Set Swatch source to Variant images.
- Click Save.
Best for:
| Use case | Reason |
|---|---|
| Fashion products | Shows the actual product color or fabric. |
| Products with patterned variants | More accurate than a flat color. |
| Products where color photos matter | Customers can preview the real variant image. |
Limitations:
- Each variant needs an assigned image.
- If a variant does not have an image, the swatch may not show the expected image.
- For product cards, the color option should match the theme's color swatch trigger, usually Color.
3. Custom Source
The Custom source uses custom swatch rules from Theme settings.
Use this source when you want to manually define swatch colors or swatch images.
Where to configure:
Theme settings > Color swatches > Configuration
Each rule must be added on its own line.
Color format:
Red:#ff0000
Blue:#0000ff
Black:#000000
Image format:
Gold:gold.png
Floral:floral.png
Denim:denim.png
How it works:
- The text before
:must match the product option value. - The text after
:can be a hex color or an uploaded image file name. - If using images, upload the image files in Shopify admin first.
Setup:
- From Shopify admin, go to Content > Files.
- Upload the swatch image files if needed.
- Go to Online Store > Themes > Customize.
- Open Theme settings > Color swatches.
- Add your custom rules in Configuration.
- Set Swatch source to Custom where needed.
- Click Save.
Best for:
| Use case | Reason |
|---|---|
| Simple color swatches | Easy to map values to hex colors. |
| Custom brand colors | Full control over exact color values. |
| Pattern or material swatches | Can use uploaded image files. |
| Stores not using Shopify native swatches | Does not require native swatch setup. |
Limitations:
- The option value must match the custom rule name.
- Each rule must be added manually.
- Image file names must be correct.
- For product cards, the color option should match the theme's color swatch trigger, usually Color.
4. Native Source
The Native source uses Shopify's native swatch data.
Use this source when swatches are already configured directly in Shopify through native product option swatches.
How it works:
- Swatch data is managed in Shopify.
- The theme reads the native swatch color or image.
- The swatch can come from Shopify's product option setup.
Setup:
- From Shopify admin, open the product or related product option setup.
- Configure the native swatch value as a color or image.
- Go to the Theme Editor.
- Set Swatch source to Native.
- Click Save.
Best for:
| Use case | Reason |
|---|---|
| Stores using Shopify native swatches | Uses Shopify-managed swatch data. |
| Centralized product option setup | Easier to manage from Shopify. |
| More future-friendly setup | Uses Shopify's native swatch structure. |
Limitations:
- Native swatches must be set up in Shopify first.
- If no native swatch data exists, the swatch may not appear as expected.
- Custom rules in Theme settings > Color swatches do not control Native swatches.
- Variant images do not control Native swatches unless they are added as native swatch images.
5. Quick Comparison
| Feature | Variant images | Custom | Native |
|---|---|---|---|
| Uses variant images | Yes | No | No |
| Uses custom hex colors | No | Yes | No |
| Uses uploaded custom swatch images | No | Yes | No |
| Uses Shopify native swatches | No | No | Yes |
| Managed in Theme settings | Partly | Yes | No |
| Managed in Shopify product setup | Yes | No | Yes |
| Good for actual product photos | Yes | No | Possible only if set as native image |
| Good for simple color mapping | No | Yes | Yes |
| Requires manual rules | No | Yes | No |
6. Product Card Swatches
For product cards, swatches are controlled from Theme settings > Product tiles.
Main settings:
| Setting | Description |
|---|---|
| Enable swatches feature | Enables swatches globally for product cards. |
| Swatch source | Selects Variant images, Custom, or Native. |
| Swatches position | Controls whether swatches appear at the top or bottom of product cards. |
| Swatches size | Controls swatch size. |
| Maximum swatches to show | Controls how many swatches appear before extra values are hidden. |
Important:
The related section must also have Enable color swatches turned on.
Common section examples:
- Collection product grid
- Featured collection
- Product recommendations
- Recently viewed products
7. Product Page Swatches
For product pages, swatches are controlled from the Variant picker block.
Path:
Product template > Main product > Variant picker
Main settings:
| Setting | Description |
|---|---|
| Type | Set to Pills to use swatches. |
| Swatch source | Selects Variant images, Custom, or Native. |
| Swatch shape | Controls whether swatches are circle, square, or hidden. |
| Allow selecting out-of-stock options | Allows customers to select unavailable swatch options. |
Important:
If Type is set to Dropdown, swatches will not display in the same way.
8. Which Source Should You Choose?
Use this simple guide:
| Situation | Choose this source |
|---|---|
| You already assign images to variants | Variant images |
| You want to manually define colors or image swatches | Custom |
| You use Shopify's native swatch setup | Native |
| You want swatches to show real product photos | Variant images |
| You want exact brand color values | Custom |
| You want Shopify-managed swatches | Native |
9. Notes and Limitations
Please note the following behavior:
- Swatches only display when swatches are enabled in the relevant settings.
- Product page swatches require the Variant picker type to be Pills.
- Product card swatches require Enable swatches feature in Theme settings.
- Product card swatches may also require Enable color swatches in the section.
- Variant images source depends on variant images assigned in Shopify.
- Custom source depends on the rules added in Theme settings > Color swatches.
- Native source depends on Shopify native swatch data.
- If a product option value has no matching swatch data, the swatch may fall back or appear incorrectly.
- Custom swatch rule names must match product option values.
- Uploaded custom swatch image file names must match the configuration.
Troubleshooting
If swatches do not display correctly, please check the following:
- Make sure swatches are enabled in Theme settings > Product tiles.
- Make sure the related section has Enable color swatches turned on.
- On product pages, make sure the Variant picker type is set to Pills.
- Check whether the correct Swatch source is selected.
- If using Variant images, make sure variant images are assigned in Shopify admin.
- If using Custom, check Theme settings > Color swatches > Configuration.
- If using custom image swatches, make sure image files are uploaded and file names are correct.
- If using Native, make sure native swatches are configured in Shopify.
- Make sure product option values match the swatch setup.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Set Up the Menu Drawer in Be Yours