Solved
Update; January 21st, 2021 - This unsupported tutorial is no longer technically accurate and will be removed. For swatch options going forward please consider an app from the Shopify App Store
Tip: The solution presented here won't work in the following themes: Venture and Boundless.
When you have completed the steps in this tutorial, the color options of your products will appear as clickable swatches on your product pages:
Any option that is not a color (for example Size, Title) will be turned into gray buttons, like so:
Take a look at this demo shop to see the tutorial in action.
Create a new Liquid snippet called swatch.liquid
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- On the left side, click the Snippets heading to reveal your Snippets content.
- Under the Snippets heading, click the Add a new snippet link:
- Call your new snippet 'swatch'. Click Create snippet.
- Copy and paste the content of this file into your new
swatch.liquidsnippet. - Save your changes.
Include swatch.liquid in product.liquid
- On the Edit HTML/CSS page, under the Templates heading on the left, locate and click
product.liquidto open your product template in the online code editor. - Include your
swatch.liquidsnippet where you want to insert a swatch. Include it with the name of the product option you need to turn into a swatch. For example, use this code if your product has a Color option:
{% if product.available and product.variants.size > 1 %} {% render 'swatch' with 'Color' as swatch %} {% endif %}
If you want to use the button treatment on a Size option, use this:
{% if product.available and product.variants.size > 1 %}
{% render 'swatch' with 'Size' as swatch %}
{% endif %}
If you want to apply the button or swatch treatment to all your product options, use this:
{% if product.available and product.variants.size > 1 %}
{% render 'swatch' for product.options as swatch %}
{% endif %}
With this last snippet, the swatch treatment will be applied automatically to any product option that contains the word colour or color in it, while the button treatment will be applied to all other options.
Receiving a swatch treatment means that your color drop-down will be removed from the product page and be replaced with a series of colorful buttons. Receiving a button treatment means that your option drop-down will be removed from the product page and be replaced by a series of labeled gray buttons.
If you're not sure which code snippet to use, use the last one.
If you're not sure where to insert your snippet, look for a select element with name 'id' and add your snippet right below that element:
Locate your selectCallback function
The selectCallback function in a Shopify theme updates the state of the Add to cart button and the displayed selling and “compare at” prices when a variant is selected.
Still in your product.liquid file, locate this:
selectCallback
Don't see it? Under the Layouts folder, locate and click the theme.liquid file to open it in the online code editor. In a fair amount of themes, the selectCallback function is located in this file instead of product.liquid.
After you have located your selectCallback function, add the following code to the body of the function, either at the top, or bottom:
// BEGIN SWATCHES
if (variant) {
var form = jQuery('#' + selector.domIdPrefix).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}
}
// END SWATCHES
If you add it at the top of the body of the function:
If you add it at the bottom of the body of the function:
Add code at the bottom of theme.liquid
Still on the Edit HTML/CSS page, under the Layouts heading on the left, locate and click your theme.liquid file to open it in the online code editor.
At the bottom of your theme.liquid file, right above your </body> tag, add this code:
<script>
jQuery(function() {
jQuery('.swatch :radio').change(function() {
var optionIndex = jQuery(this).closest('.swatch').attr('data-option-index');
var optionValue = jQuery(this).val();
jQuery(this)
.closest('form')
.find('.single-option-selector')
.eq(optionIndex)
.val(optionValue)
.trigger('change');
});
});
</script>
Upload a soldout.png graphic to your theme assets
We are going to upload a graphic to our theme assets that will be overlaid on top of our buttons when their associated value is sold out for all variations of our product.
You can use this one image below, save it to your desktop:
Note: Make sure to name it soldout.png.
The CSS we're using will stretch or compress that graphic so that it fits nicely onto the button or swatch box.
- On the Edit HTML/CSS page, locate and click the Assets folder to display its content.
- Under the Assets heading, click the Add a new asset link.
- Upload your soldout overlay.
Add CSS to your stylesheet
- On the Edit HTML/CSS page, locate and click the Assets folder to display its content.
- Under the Assets heading, locate a file with extension
.css.liquidthat is notcheckout.css.liquid. There should be only one other file. Such file is often namedstyles.css.liquid,style.css.liquidorshop.css.liquid. - After you have located your file, click it to open it on the online code editor. Copy and paste the content of this file at the bottom of your file. It is important that you append the CSS at the bottom of your stylesheet.
If you can't find your theme's stylesheet, copy and paste the CSS provided into a style element, and add that style element at the bottom of your product.liquid file.
Upload your color images
For the color options you have, you can either let the smartness of the script provide a color for you, or you can upload an image that represents that color.
The way I have gotten my images from my products in my demo shop was to open each product image on my storefront in the “colorbox” (lightbox) and grab around ~ 55 by 40 pixels section of the product image, then save that small screen grab to my desktop, and rename the image.
Note: There's an important naming convention to respect here! The image must be named after the color option, but be handleized, and have a .png extension.
For example:
If you have a color called 'Déjà Vu Blue', then name your image deja-vu-blue.png
If your color is 'Blue/Gray', then name your image blue-gray.png.
If your color is 'Black', then name your image black.png.
- On the Edit HTML/CSS page, locate and click the Assets folder to reveal its content.
- Under the Assets heading, click the Add a new asset link.
- Upload your image.
Repeat steps 2 and 3 until you have uploaded all your images.
FAQ
- What happens when my products have options other than color and size?
If you render the swatch with all product options, every option will be turned into buttons. If you only render the swatch with 'Color', then the other options will be represented by their usual drop-down. - What will happen to my products that have only one variant?
Nothing will explode. There will be no button for that product. - What will happen if one color (or size, or...) is sold out for all variants of my product?
It will be grayed out slightly and crossed out. - With this solution, can my theme still auto-select the first available variant on page load?
Yes. - What if I want to use JPEG images for my swatches instead of PNG?
In yourswatch.liquidfile, edit line number 5 to this:
{% assign file_extension = 'jpg' %} - What happens if I forget or do not upload an image for one of my colors?
Nothing will explode. The script will take the last word of your color name and set the swatch box color to that name:
background-color: {{ value | split: ' ' | last | handle }};
If the color is 'Sky Blue', then the CSS will apply the color blue to the box. Here is a list of CSS color keywords and their hex values.
If there's no color associated with that word, then the box will be gray, but the color name will be displayed in the tooltip. - Do I need to upload an image if I am okay with the default web color associated with my color name?
No. - Can the boxes be any smaller? They are kind of big!
Yes. At the beginning of the provided CSS, you have 2 Liquid variables you can edit,widthandheight. Edit those values. That's it. - Why do my color options show up as text-in-a-box instead of a colored box?
Name the Shopify option Color, or color, or Colour, or colour, or Base color, or anything that contains colo(u)r in it. It's not case-sensitive. - Is this compatible with deep variant linking?
Yes. This URL contains?variant=179075152in it. It points to the Navy / Large variant of the product. Click there and see the Navy / Large variant selected.
Accepted Solutions
The theme I was trying to apply the Swatches to (Showcase) actually has a built in 'box' option for the variant selector, that already gives me my color name. The problem is, I cannot find the code where the box options get generated <li><a>.... I've managed to apply a background image to the native selector that gets hidden.
-
Shopify Community
Shopify Discussion
- Shopify Discussions
- Store Feedback
- Shopify Design
- Shopify Apps
- Ecommerce Marketing
- Technical Q&A
- Announcements
- Site Speed
- Retail and Point of Sale
- International Commerce
- Payments, Shipping, and Fulfillment
- Accounting and Taxes
- Wholesale and Dropshipping
- Shopify Flow App
- Shopify Scripts
- Jobs and Careers
Partners and Developers
-
Groups
- Blog
- Events
