Want to add color swatches to your Shopify product pages?
This guide covers the three top methods for doing so, each of which varies in their level of difficulty and customization.
After going over these methods step-by-step, we’ll show you the established best practices for adding color swatches to Shopify product pages as well.
Level of difficulty: Low
Level of customization: Low
Many Shopify themes come with a color swatch feature — in that case, you’ll be able to add this element to product pages through Shopify’s built-in theme editor.
If your theme doesn’t have a color swatch feature (for example, Shopify’s default Dawn theme doesn’t have it), you’ll need to download one that does in order to use this method.
Step 1. Go to the Shopify Theme Store. In the left sidebar, select the “Color swatches” option in the “Features” section.
Step 2. This will filter out all the themes that don’t have color swatches. As of this writing, there are no free options that have color swatches — the prices for these themes range from $140 to $400.
Step 3. Once you’ve downloaded and installed a theme with color swatch capability, the next step is to make sure you have color options for the product page you want to add a swatch to. From the main Shopify dashboard, select the “Products” option.
Step 4. Select the product you want to add color options to.
Step 5. Scroll down to the “Variants” section and select “Add options like size or color”.
Step 6. Select “Color” as the “Option name”, then add the colors you want to the “Option values” field (you can also set different prices for each color variant on this page). Whenever you’re ready, select “Done” and save your changes.
Step 7. Now that your color options are set up, select the “Online Store” option in the left sidebar.
Step 8. Select “Customize” next to a theme that has a color swatch feature.
Step 9. This will take you to Shopify’s built-in theme editor. Use the dropdown menu located at the top of the page to navigate to the “Default product” template.
Step 10. Select the “Variant picker” block (or, if it’s not already on the page, add this block to your template).
Step 11. Open the “Color selector type” dropdown menu, select “Color swatch”, and then save your changes.
So, although there are a fair number of steps involved here, the overall process is easy. But if you want to change the styling of your color swatch section, you’ll often find that the default customization options offered by themes are fairly limited.
Level of difficulty: High
Level of customization: High
For a higher level of color swatch customization, you can edit your site code using Liquid, Shopify’s open-source templating language.
In the steps below, we’ll provide you with the necessary code to get started — all you need to do is copy and paste:
Step 1. From the main Shopify dashboard, select “Online Store”.
Step 2. Open the “…” menu next to your theme and select “Edit code”.
Step 3. Open the “Config” folder in the left sidebar, and then open the “settings_schema.json” file (alternatively, you could use the search bar to find this file).
Step 4. Enter a line break below Row 9. In that space, insert the following code:
{
"name": "Color Swatches",
"settings": [
{
"type": "text",
"id": "optionName",
"label": "Swatch option name",
"default": "Color",
"info": "Make sure capitalization is same as variant for e.g Color not color "
},
{
"type": "paragraph",
"content": "If your store is in different languages, type in all the different words and separate them with commas. For example: Color, Colour, Couleur"
},
{
"type": "select",
"id": "swatchType",
"label": "Swatch type",
"options": [
{
"value": "color",
"label": "Color"
},
{
"value": "variantImage",
"label": "Variant image"
}
],
"default": "color"
},
{
"type": "textarea",
"id": "swatchColors",
"label": "Colors",
"placeholder": "Red:#ff0000\nGreen:#00ff00\nBlue:#0000ff",
"default": "Black:#000000\nWhite:#f5f5f5\nBlue:#005eff\nRed:#c9002c\nPink:#ffd5e6\nBrown:#a2896b\nOlive:#808000\nGreenRed:#008000#c9002c\nGreenRedBlue:#008000#c9002c#005eff",
"info": "One rule per line. Example: Blue:#005eff\n2 Color Swatch Example: GreenRed:#008000#c9002c\n3 Color Swatch Example: GreenRedBlue:#008000#c9002c#005eff"
},
{
"type": "paragraph",
"content": "You can also add [image files](/admin/content/files?selectedView=all&media_type=Image) instead of using colors, in lowercase with spaces replaced by hyphens. Example: Green kaki: green-kaki.png"
},
{
"type": "select",
"id": "swatchStyle",
"label": "Swatch style",
"options": [
{
"value": "round",
"label": "Round"
},
{
"value": "square",
"label": "Square"
},
{
"value": "square-round-corners",
"label": "Square round corners"
},
{
"value": "portrait",
"label": "Portrait"
}
],
"default": "round",
"info": "Portrait mode is only available for the variant image type."
},
{
"type": "range",
"id": "swatchSize",
"min": 20,
"max": 120,
"step": 2,
"unit": "px",
"label": "Swatch size",
"default": 40
}
]
}
Once the new code has been added, save your changes.
Step 5. The next step is to open the “product-variant-picker.liquid” file (this can be found in the “Snippets” folder).
Step 6. Replace the following code, which starts at Row 51:
<fieldset class="js product-form__input product-form__input--pill">
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options',
product: product,
option: option,
block: block,
picker_type: picker_type
%}
</fieldset>
With this code:
<fieldset class="js product-form__input product-form__input--pill">
{%- liquid
assign optionNames = settings.optionName | split:","
assign useColor = false
for optionColor in optionNames
if optionColor == option.name
assign useColor = true
break
endif
endfor
-%}
{%- if useColor -%}
<legend class="form__label ">{{ option.name }}:<span id="selected-{{ option.name }}"> {{ option.selected_value }}</span></legend>
{% render 'color-option', product: product, option: option, block: block %}
{%- else -%}
<legend class="form__label">{{ option.name }}</legend>
{% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %}
{%- endif -%}
</fieldset>
Save your changes.
Step 7. Open the “Snippets” folder and select “Add a new snippet”.
Step 8. Name the new snippet “color-option.liquid”, then select “Done”.
Step 9. Add the following code:
{% comment %}
Renders product variant options
Accepts:
- product: {Object} product object.
- option: {Object} current product_option object.
- block: {Object} block object.
Usage:
{% render 'product-variant-options',
product: product,
option: option,
block: block
}%
{% endcomment %}
{%- liquid
assign variants_available_arr = product.variants | map: 'available'
assign variants_option1_arr = product.variants | map: 'option1'
assign variants_option2_arr = product.variants | map: 'option2'
assign variants_option3_arr = product.variants | map: 'option3'
assign product_form_id = 'product-form-' | append: section.id
assign swatchType = settings.swatchType
assign swatchStyle = settings.swatchStyle
assign swatchSize = settings.swatchSize
assign swatchColors = settings.swatchColors | newline_to_br | split: '<br />'
-%}
<style>
.product-form__input input[type='radio'] + label.color-swatch,
.product-form__input input[type='radio'] + label.color-swatch:after,
.product-form__input input[type='radio'] + label.color-swatch:before{
border-radius: 0;
}
.product-form__input input[type='radio'] + label.color-swatch.round,
.product-form__input input[type='radio'] + label.color-swatch.round:after,
.product-form__input input[type='radio'] + label.color-swatch.round:before{
border-radius: 100%;
}
.product-form__input input[type='radio'] + label.color-swatch.round-corners,
.product-form__input input[type='radio'] + label.color-swatch.round-corners:after,
.product-form__input input[type='radio'] + label.color-swatch.round-corners:before{
border-radius: 5px;
}
.product-form__input input[type='radio'] + label.color-swatch{
border:1px rgb(214,214,214) solid;
width: {{swatchSize}}px;
height: {{swatchSize}}px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-right: 9px;
}
.product-form__input input[type='radio'] + label.color-swatch:before{
content: "";
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
border: 1px rgb(214,214,214) solid;
z-index: 0;
}
.product-form__input input[type='radio'] + label.color-swatch:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
{%- if settings.dark or swatchType == "variantImage" -%}
border: none;
{%- else -%}
border: 3px rgb(255 255 255) solid;
{%- endif -%}
}
.product-form__input input[type='radio'] + label.color-swatch:hover:before{
border: 1px rgb(125 124 124) solid;
}
.product-form__input input[type='radio']:checked + label.color-swatch:before{
{%- if settings.dark -%}
box-shadow: 0 0 0 2px rgb(var(--color-foreground));
{%- else -%}
box-shadow: 0 0 0 1px rgb(var(--color-foreground));
{%- endif -%}
border-color:rgb(var(--color-foreground));
}
.product-form__input input[type='radio'] + label.color-swatch.variant-swatch{
background-color:white;
{%- if swatchStyle == "portrait" -%}
height: calc({{swatchSize}}px/ 0.66);
{%- endif -%}
}
</style>
{%- for value in option.values -%}
{%- liquid
assign option_disabled = true
for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
endcase
endfor
-%}
{%- if block.settings.picker_type == ''button'' -%}
<input
type="radio"
id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}
checked
{% endif %}
{% if option_disabled %}
class="disabled"
{% endif %}
>
{%- if swatchType == ""variantImage"" -%}
<label
data-{{ option.name }}="{{value}}"
style="background-image:url(
{%- liquid
assign optionIndex = option.position | minus: 1
for variant in product.variants
if variant.options[optionIndex] == value
assign swatchSizePortrait = swatchSize | times: 2
echo variant.image | image_url: width: swatchSizePortrait
break
endif
endfor
-%}
);"
class="color-swatch variant-swatch {% case swatchStyle %}{% when "'round'" %}round{% when "'square-round-corners'" %}round-corners{% endcase %}"
for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
<span class="visually-hidden"">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>
{%- else -%}
{%- liquid
for colorData in swatchColors
assign colorDataArr = colorData | split:":"
assign ruleName = colorDataArr[0] | strip
if value == ruleName
assign colorCodes = colorDataArr[1] | strip |
Save your changes.
Step 10. Open the “…” dropdown menu in the top-left corner of the page and select “Customize theme”.
Step 11. Go to the “Default product” template, and then select the “Variant picker” option in the left sidebar.
Step 12. In the “Style” section, select “Pills”.
Step 13. You’ll see that the color options are now represented as swatches. But each color must be entered into the system for it to show up (in this example, the black color is showing up fine, but green is showing up as white because it hasn’t been added yet).
To add a new color for your swatches, select “Theme settings” (this option is represented as a gear icon on the left side of the page).
Step 14. Select “Color Swatches”.
Step 15. In the “Colors” section, add the colors you need along with their hexadecimal codes, separated by a colon with no spaces.
Step 16. For this example, we’ll add “Green:#008000”.
As soon as you enter the text, the color will automatically show up in the swatch (assuming the color has already been enabled in the product settings as well).
With this method, you’ll find several customization options available to you — for example, there are different options for the shape of the swatches (round, square, square with round corners, or portrait), and you can also adjust the size of the swatches.
But to go beyond these customization options, you would need to make your own edits to the code we provided above. The possibilities are endless when you’re writing your own code, but unless you have web development experience, it could take a lot of time-consuming trial-and-error to get your edits right.
Level of difficulty: Low
Level of customization: High
With Shogun’s visual editor, it’s easy to add and customize color swatches on your Shopify product pages — no coding required.
Step 1. Once you have installed Shogun, launch the software and select the “Pages & templates” option in the left sidebar.
Step 2. Select the product page you want to customize.
Step 3. The “Shopify” section of the “Elements” library contains elements that are automatically populated with data from your Shopify store.
To add color swatches, you’ll first need to place a “Product Box” element on the page.
Step 4. Choose the product you want to pull data from, then select “Confirm”.
Step 5. Place a “Variant” element inside the “Product Box” element.
Step 6. In the “Main” section of the “Product Variant” settings, toggle the “Detect Color Swatches” option on.
Step 7. You’ll now see the color swatches displayed.
Within Shogun, you can customize the labels, dimensions, alignment, spacing, and many other aspects of your color swatches.
Ultimately, the point of color swatches is to improve user experience. Color swatches are a particularly efficient way to provide visual information — when visitors can review all of your color options at a glance, it’ll be easier for them to make a purchase decision. And the easier it is for visitors to make a purchase, the more likely it is that they will actually do so.
Here are a few tips that will help ensure your color swatches are improving user experience as much as possible:
With these tips in mind and the three color swatch methods described above, you have everything you need to add this dynamic element to your Shopify product pages.
