Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more about how to activate this in your store.
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.
swatch.liquid
snippet.
product.liquid
to open your product template in the online code editor.swatch.liquid
snippet 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:
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:
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>
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.
.css.liquid
that is not checkout.css.liquid
. There should be only one other file. Such file is often named styles.css.liquid
, style.css.liquid
or shop.css.liquid
.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.
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
.
Repeat steps 2 and 3 until you have uploaded all your images.
swatch.liquid
file, edit line number 5 to this:{% assign file_extension = 'jpg' %}
background-color: {{ value | split: ' ' | last | handle }};
width
and height
. Edit those values. That's it.?variant=179075152
in it. It points to the Navy / Large variant of the product. Click there and see the Navy / Large variant selected.TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Solved! Go to the solution
This is an accepted solution.
We've identified that unsupported tutorial is no longer accurate, and creating issues.
As a result this tutorial will be removed next week, followed by this topic being locked.
For swatch options going forward please consider an app from the Shopify App Store .
TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
i follow up the steps about swatch it doesnt work
Hi Ty,
I was going through your tutorial for adding color swatches to product pages. (https://community.shopify.com/c/Shopify-Design/Product-pages-Add-color-swatches-to-products/m-p/6164...). I am currently using the Debut theme, and I can't seem to find the selectCallback function in your instructions. I checked the Templates and Sections files as well as theme.liquid in the Layout and it doesn't seem to be anywhere. Can you help?
Thanks!
So I did the first step of adding the a new snippet no problem. But the second part of pasting this code
{% if product.available and product.variants.size > 1 %} {% render 'swatch' for product.options as swatch %} {% endif %}
I'm not sure where to paste that. I am working with the Supply theme any help would be appreciated. TIA
Hi, I'm using Debut and I don't find selectCallback.
Some help!
Tanks
Me too! I can't find it with Retina theme!
Can't find selectCallback function in Narrative, please help.
Hi there,
Thank you for this.
I've just tried to install it on the Supply theme, which also doesn't have the callback code anywhere.
Also swatch.liquid makes a LOT of inline script calls, which set everything as in stock, even when it isn't, so the soldout image never gets used.
Kye
I am using the new debut theme. And I couldnt find the selectCallback function so I just added it to my custom.js file and it works. If you have your own js file for added scripts just add this:
Thank you for your instruction, I successfully implemented it on my debut theme the only thing is that the dropdown is still there with the size button any idea why?
Hi,
Should I creat the custom.js file?
DO you know why the dropdown still show?
@Javier_Rosario wrote:I am using the new debut theme. And I couldnt find the selectCallback function so I just added it to my custom.js file and it works. If you have your own js file for added scripts just add this:
var selectCallback = function(variant, selector){// BEGIN SWATCHESif (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;}}}};
// BEGIN SWATCHES
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');
});
});
// END SWATCHES
I need this to work on the Showcase theme! Any help appreciated. This product:
/products/swatch-test-eye-coal
https://c5hivkmn0vtib4u0-11320166.shopifypreview.com
@Kumar2573 wrote:// BEGIN SWATCHES
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');
});
});
// END SWATCHES
This solution doesn't allow for deep variant linking, Javier's does.
we have checked your through given url. The issue in your jquery code. Have you added color swatch code file?
@Kumar2573 wrote:we have checked your through given url. The issue in your jquery code. Have you added color swatch code file?
Me? Yes! I added swatch.liquid. There is just no event firing when I click on swatch color png on the product page.
I added Javiar's call back code to the bottom of my theme.js file.
Here is an updated Preview link, you just have to navigate to product /products/swatch-test-eye-coal manually, sorry, there is no link for it.
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.
Here is the Showcase product template
The function 'convertOptionsToBoxes' is called theme.js but NOWHERE DO I see where the unordered list is generated that shows the color names.
Here is the preview link: https://6g71s4ujleyexvvt-11320166.shopifypreview.com
the product is //products/swatch-test-eye-coal
User | RANK |
---|---|
133 | |
91 | |
77 | |
71 | |
40 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022