• Explore. Learn. Thrive. Fastlane Media Network

  • ecommerceFastlane
  • PODFastlane
  • SEOfastlane
  • AdvisorFastlane
  • LifeFastlane

How To Add Color Swatches To Products In Shopify

how-to-add-color-swatches-to-products-in-shopify
How To Add Color Swatches To Products In Shopify

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.

In this article, you will learn:

Create rich product experiences with ShogunShogun’s powerful visual editor makes it easy for anyone to design their own fully customized Shopify product pages.Get started now

Method #1: How To Add Color Swatches in the Shopify Theme Editor

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.

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.

There are over 100 options in the Shopify Theme Store that offer a color swatch feature.

 

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.

From the main Shopify dashboard, select the “Products” option.

 

Step 4. Select the product you want to add color options to.

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”.

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.

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.

Select the “Online Store” option in the left sidebar.

 

Step 8. Select “Customize” next to a theme that has a color swatch feature.

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.

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).

Select the “Variant picker” block.

 

Step 11. Open the “Color selector type” dropdown menu, select “Color swatch”, and then save your changes.

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.

The customization options offered by this method are fairly limited.

Method #2: Adding Color Swatches Using Shopify Liquid Code

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”.

From the main Shopify dashboard, select “Online Store”.

 

Step 2. Open the “…” menu next to your theme and select “Edit code”.

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).

Open the “Config” folder in the left sidebar, and then open the “settings_schema.json” 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:#ff0000nGreen:#00ff00nBlue:#0000ff",
"default": "Black:#000000nWhite:#f5f5f5nBlue:#005effnRed:#c9002cnPink:#ffd5e6nBrown:#a2896bnOlive:#808000nGreenRed:#008000#c9002cnGreenRedBlue:#008000#c9002c#005eff",
"info": "One rule per line. Example: Blue:#005effn2 Color Swatch Example: GreenRed:#008000#c9002cn3 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.

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).

Open the “product-variant-picker.liquid” file.

 

Step 6. Replace the following code, which starts at Row 51:

{{ option.name }} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %}

 

With this code:

{%- 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 -%} {{ option.name }}: {{ option.selected_value }} {% render 'color-option', product: product, option: option, block: block %} {%- else -%} {{ option.name }} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- endif -%}

 

Save your changes.

Save your changes.

 

Step 7. Open the “Snippets” folder and select “Add a new snippet”.

Open the “Snippets” folder and select “Add a new snippet”.

 

Step 8. Name the new snippet “color-option.liquid”, then select “Done”.

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: '
' -%} {%- 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'' -%} {%- if swatchType == ""variantImage"" -%} {%- 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.

Save your changes.

 

Step 10. Open the “…” dropdown menu in the top-left corner of the page and select “Customize theme”.

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.

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”.

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).

Select “Theme settings”.

 

Step 14. Select “Color Swatches”.

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.

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”.

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.

Create rich product experiences with ShogunShogun’s powerful visual editor makes it easy for anyone to design their own fully customized Shopify product pages.Get started now

Method #3: Adding Color Swatches Using Shogun

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.

Select the “Pages & templates” option in the left sidebar.

 

Step 2. Select the product page you want to customize.

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.

Place a “Product Box” element on the page.

 

Step 4. Choose the product you want to pull data from, then select “Confirm”.

Choose the product you want to pull data from, then select “Confirm”.

 

Step 5. Place a “Variant” element inside the “Product Box” element.

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.

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.

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.

Best Practices for Color Swatches in Shopify

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:

  • Sizing: If your swatches are too small, visitors might not even notice them. Also, small swatches may be near impossible for mobile users to click on.
  • Spacing: Even if your buttons are large enough, mobile users may still have a hard time clicking on the right swatch if they’re too close together.
  • Testing: Don’t trust your eyes — just because your swatches look fine doesn’t necessarily mean that they work well. Test the swatches yourself to confirm that they function properly. Indeed, trying out the swatches on a variety of devices and web browsers will improve your odds of catching any potential issues before publishing.

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.

Create rich product experiences with ShogunShogun’s powerful visual editor makes it easy for anyone to design their own fully customized Shopify product pages.Get started now

This article originally appeared on Shogun and is available here for further discovery.
Prev
Business Owner’s Guide To Workplace Accident Liability

Business Owner’s Guide To Workplace Accident Liability

Next
The Best Sports Marketing Ideas Of 2024
the-best-sports-marketing-ideas-of-2024

The Best Sports Marketing Ideas Of 2024

You May Also Like