Product pages - Add color swatches to products

[TyW]

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

---

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

Caution

This document has not been verified to work with sectioned themes. You can try to implement this on your theme, but keep in mind that it may not function.

---

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

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. On the left side, click the Snippets heading to reveal your Snippets content.
4. Under the Snippets heading, click the Add a new snippet link:
   
   
   
   
5. Call your new snippet 'swatch'. Click Create snippet.
   
   
   
   
6. Copy and paste the content of this file into your new swatch.liquid snippet.
7. Save your changes.

Include swatch.liquid in product.liquid

1. On the Edit HTML/CSS page, under the Templates heading on the left, locate and click product.liquid to open your product template in the online code editor.
2. Include your 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:

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.

1. On the Edit HTML/CSS page, locate and click the Assets folder to display its content.
2. Under the Assets heading, click the Add a new asset link.
3. Upload your soldout overlay.

Add CSS to your stylesheet

1. On the Edit HTML/CSS page, locate and click the Assets folder to display its content.
2. Under the Assets heading, locate a file with extension .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.
3. 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.

1. On the Edit HTML/CSS page, locate and click the Assets folder to reveal its content.
2. Under the Assets heading, click the Add a new asset link.
3. 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 your swatch.liquid file, 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, width and height. 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=179075152 in it. It points to the Navy / Large variant of the product. Click there and see the Navy / Large variant selected.

[anas1111111]

i follow up the steps about swatch it doesnt work 

[ritsybitsy]

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!

[mayasplaceny]

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 

[Lazychefsigis]

I can’t find “ selectCallback “ on a product.liquid , where should I look then? My theme is Venture. Thank you indeed for assistance.

[JoP]

Hi, I'm using Debut and I don't find selectCallback.

Some help!

Tanks

[Coryum]

Me too! I can't find it with Retina theme!

[BrianLiu]

Can't find selectCallback function in Narrative, please help.

[SugarCubeProduc]

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

[Javier_Rosario]

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 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;

}

}

}

};

[Avi_Yafe]

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?

https://ww0tyboeycu5acms-2338095156.shopifypreview.com

[Avi_Yafe]

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 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;

}

}

}

};

---

https://ww0tyboeycu5acms-2338095156.shopifypreview.com

[Kumar2573]

// 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

[kriszti]

I need this to work on the Showcase theme! Any help appreciated.  This product:

/products/swatch-test-eye-coal

https://c5hivkmn0vtib4u0-11320166.shopifypreview.com

[ChristyMc]

---

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

[Kumar2573]

we have checked your through given url. The issue in your jquery code. Have you added color swatch code file?

[kriszti]

---

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

https://2392778i1wcsinl7-11320166.shopifypreview.com

[kriszti]

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.

[kriszti]

Here is the Showcase product template

Click to expand...

{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%} {%- assign variant = product.selected_or_first_available_variant -%} {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%} <div class="product-area {% if section.settings.header_overlay contains 'overlay' %}header-overlap-section{% endif %}" data-section-type="product-template"> <style type="text/css"> {% for image in product.images %} .theme-img-{{ forloop.index }} img { width: {{ image.aspect_ratio | times: 80 | floor }}vh; } .product-detail__thumb-{{ forloop.index }} .rimage-outer-wrapper { width: {{ image.aspect_ratio | times: 70 | floor }}px; } {% endfor %} </style> <div class="top-wrapper"> <div class="theme-gallery {% if section.settings.header_overlay contains 'alt' %}needs-alt-logo{% endif %}"> <div class="theme-viewport swiper-container"> <div class="theme-images swiper-wrapper"> {% for image in product.images %} <div class="theme-img theme-img-{{ forloop.index }} swiper-slide {% if featured_image == image %}current-img{% endif %}" data-full-size="{{ image | img_url: 'master' }}"> <div class="rimage-wrapper lazyload--placeholder"> {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} <img class="lazyload lazypreload fade-in" data-src="{{ img_url }}" data-widths="[180, 220, 300, 360, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto" alt="{{ image.alt | escape }}"> <noscript> <img data-src="{{ image | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}"> </noscript> </div> </div> {% endfor %} </div> </div> {% if product.images.size > 1 %} <div class="swiper-scrollbar"></div> {% endif %} <div class="product-detail__thumbs"> <div class="carousel-wrapper"> <div class="carousel"> {% for image in product.images %} <div class="product-detail__thumb product-detail__thumb-{{ forloop.index }} theme-gallery-thumb"> <a href="{{ image.src | product_img_url: 'master' }}"> {% include 'responsive-image', image: image, manual_image_load: true %} </a> </div> {% endfor %} </div> </div> </div> </div> <div class="product-form-wrapper"> <div class="product-detail__upper"> <div class="product-detail__title-and-price"> <h1 class="product-title h2">{{ product.title }}</h1> </div> <div class="product-detail__detail"> <div class="rte {{ section.settings.description_alignment }} reading-width"> <div class="price-area"> {% if variant.compare_at_price > variant.price %} <span class="was-price theme-money">{{ variant.compare_at_price | money }}</span> {% endif %} <span class="price theme-money">{{ variant.price | money }}</span> </div> </div> {{ product.description }} </div> <div class="product-detail__form"> {% if product.available %} {% capture product_form_class %}feedback-{{ section.settings.cart_add }}{% endcapture %} {% form 'product', product, class: product_form_class, data-product-id: product.id, data-enable-history-state: 'true' %} <div class="cf"> <div class="product-detail__form__options {% if product.variants.size == 1 %}product-detail__form__options--no-options{% endif %} {% if section.settings.show_quantity %}product-detail__form__options--with-quantity{% endif %}"> {% if product.variants.size > 1 %} <div class="option-selectors options-{{ product.options_with_values | size }}"> {% for option in product.options_with_values %} <div class="selector-wrapper"> {% capture size_chart_html %} {%- if section.settings.show_size_chart and option.name == section.settings.size_chart_variant -%} <span class="size-chart-container"> <a href="#size-chart-content" class="size-chart-link">{{ 'products.product.size_chart' | t }}</a> <div id="size-chart-content" class="hidden"> <div class="size-chart"> <div class="size-chart__inner rte"> <h2>{{ pages[section.settings.size_chart_page].title }}</h2> {{ pages[section.settings.size_chart_page].content }} </div> </div> </div> </span> {%- endif -%} {% endcapture %} <label {% if option.name == 'default' %}class="hidden"{% endif %} for="option-{{ option.name | handle }}"> {{ option.name }} {% if section.settings.box_options %}{{ size_chart_html }}{% endif %} </label> <select id="option-{{ option.name | handle }}" {% if section.settings.box_options %}class="noreplace" data-make-box{% endif %} > {% for value in option.values %} {% assign bg_url = value | append: ".png" %} <option value="{{ value | escape }}" {% if option.selected_value == value %}selected{% endif %} style="background: url('{{ bg_url | asset_url }}') no-repeat;">{{ value }}</option> {% endfor %} </select> {% unless section.settings.box_options %}{{ size_chart_html }}{% endunless %} </div> {% endfor %} </div> <select name="id" class="original-selector" aria-label="{{ 'products.product.selector_label' | t | escape }}"> {% for variant in product.variants %} <option value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %} selected="selected"{% endif %} data-stock="{% if variant.inventory_management == 'shopify' and variant.inventory_quantity <= 0 %}out{% endif %}">{{ variant.title | escape }}</option> {% endfor %} </select> {% else %} {% unless show_single_variant_details == false or product.has_only_default_variant %} <div class="selector-wrapper single-option"> {%- for option in product.options -%} {%- if option != 'Title' -%} {%- assign opt_idx = 'option' | append: forloop.index -%} <div> <label> {{ option }} {%- if section.settings.show_size_chart and option == section.settings.size_chart_variant -%} <span class="size-chart-container"> <a href="#size-chart-content" class="size-chart-link">{{ 'products.product.size_chart' | t }}</a> <div id="size-chart-content" class="hidden"> <div class="size-chart"> <div class="size-chart__inner rte"> <h2>{{ pages[section.settings.size_chart_page].title }}</h2> {{ pages[section.settings.size_chart_page].content }} </div> </div> </div> </span> {%- endif -%} </label> {{ product.variants.first[opt_idx] }} </div> {%- endif -%} {%- endfor -%} </div> {% endunless %} <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" /> {% endif %} {% if section.settings.show_quantity %} <div class="quantity-wrapper"> <a href="#" data-quantity="down">-</a> <input aria-label="{{ 'products.product.quantity' | t }}" class="select-on-focus" id="quantity" name="quantity" value="1" /> <a href="#" data-quantity="up">+</a> </div> {% else %} <input type="hidden" id="quantity" name="quantity" value="1" /> {% endif %} </div> <div class="product-detail__form__action {% if section.settings.enable_payment_button %}with-payment-button{% endif %}"> <button class="button {% if section.settings.enable_payment_button %}alt{% endif %}" type="submit" name="add">{{ 'products.product.add_to_cart' | t }}</button> {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %} </div> </div> {% if product.variants.size == 1 %} {% if product.variants.first.inventory_management == 'shopify' and product.variants.first.inventory_quantity < 1 %} <div class="backorder"> <p><span class="selected-variant">{{ product.title }}</span> {{ 'products.product.backorder' | t }}</p> </div> {% endif %} {% else %} <div class="backorder hidden"> <p><span class="selected-variant"></span> {{ 'products.product.backorder' | t }}</p> </div> {% endif %} {% endform %} {% else %} <h5>{{ 'products.product.product_unavailable' | t }}</h5> {% endif %} </div> </div> </div> </div> <div class="product-detail"> <div class="product-list cf "> <div class="column half color1"> <h2>How to Use</h2> {{ product.metafields.product.how-to }} </div> <div class="column half color2"> <h2>Ingredients</h2> {{ product.metafields.product.ingredients }} </div> </div> <div class="product-detail__detail product-detail__brandrow align-center"> {% if section.settings.show_brand %} {% comment %} Do we have a collection that has the same name as our product vendor name? If we do, let's have the vendor link point to it. If not, we will point to the automatic vendor collection. {% endcomment %} {% assign product_vendor_handle = product.vendor | handle %} {% if collections[product_vendor_handle].handle == product_vendor_handle %} {% assign vendor_url = collections[product_vendor_handle].url %} {% else %} {% assign vendor_url = product.vendor | url_for_vendor %} {% endif %} <span class="brand">{{ product.vendor | link_to: vendor_url }}</span> {% endif %} {% if section.settings.show_type %} {% assign product_type_handle = product.type | handle %} {% if collections[product_type_handle].handle == product_type_handle %} {% assign type_url = collections[product_type_handle].url %} {% else %} {% assign type_url = product.type | url_for_type %} {% endif %} {% if product.type != blank %} {% if vendor_url != blank %}&bull;{% endif %} <span class="type">{{ product.type | link_to: type_url }}</span> {% endif %} {% endif %} </div> <div class="align-center product-detail__detail"> {% include 'social-sharing' with product %} </div> <div class="theme-product-reviews-full reading-width"> <div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div> </div> </div> {% comment %} {% if collection.previous_product or collection.next_product %} <div class="other-products wide-container section-spacing"> <div class="other-products__label">{{ 'products.product.other_products' | t }}</div> <div class="other-products__products"> {% if collection.previous_product %} <span class="other-products__product previous" data-fill-with-product="{{ collection.previous_product | split: '/' | last }}"> <script type="text/template"> <a href="{{ collection.previous_product }}" title="[encode:title]"> <div class="other-products__product__image"><img src="[img:300x]" alt="[encode:title]"></div> <div class="other-products__product__arrow"><span class="arr">{% include 'svg-larrow' %}</span></div> <div class="other-products__product__title h5">{{ 'products.product.previous' | t }}</div> </a> </script> </span> {% endif %} {% if collection.next_product %} <span class="other-products__product next" data-fill-with-product="{{ collection.next_product | split: '/' | last }}"> <script type="text/template"> <a href="{{ collection.next_product }}" title="[encode:title]"> <div class="other-products__product__title h5">{{ 'products.product.next' | t }}</div> <div class="other-products__product__arrow"><span class="arr">{% include 'svg-rarrow' %}</span></div> <div class="other-products__product__image"><img src="[img:300x]" alt="[encode:title]"></div> </a> </script> </span> {% endif %} </div> </div> {% endif %} {% endcomment %} {% if section.settings.show_related_products %} {% include 'related-products' %} {% endif %} </div> {% if section.settings.header_overlay contains 'tint' %} {%- assign background_alpha_float = 0.5 -%} {%- assign background_alpha_float_over_2 = background_alpha_float | divided_by: 2 -%} {% capture background_tint_colour %}{% if section.settings.header_overlay contains 'dark' %}000000{% else %}ffffff{% endif %}{% endcapture %} <style type="text/css"> .site-control:before { background: linear-gradient(0deg, transparent, {{ background_tint_colour | color_modify: 'alpha', background_alpha_float_over_2 }} 60%, {{ background_tint_colour | color_modify: 'alpha', background_alpha_float }}); } .header-over-gallery .site-control:before { opacity: 1; } .use-alt-logo .site-control:before { background: linear-gradient(0deg, transparent, {{ background_tint_colour | color_modify: 'alpha', background_alpha_float_over_2 }} 60%, {{ background_tint_colour | color_modify: 'alpha', background_alpha_float }}); } .header-over-gallery.use-alt-logo .site-control:after { opacity: 1; } </style> {% endif %} <style> .product-list{display:flex;} .color1 {background-color: {{ section.settings.col1 }};padding:10px 5% 30px 5%; } .color2 {background-color: {{ section.settings.col2 }}; padding:10px 5% 30px 5%; } .color1 h5, .color2 h5 {font-size:2.0em; margin-top:20px;margin-bottom:20px;} .color1 h2, .color2 h2 {font-size:2.0em; margin-top:20px;margin-bottom:20px;} .top-wrapper{display:flex; flex-wrap:nowrap} .top-wrapper .theme-gallery {width:50%;padding-left:5%;} .top-wrapper .product-form-wrapper{width:50%;padding-right:5%} .price-area{text-align:center;} .price-area span{text-align:center; display:block; font-size:24px;} .product-detail__form__action { float: left; width: 100%; } .product-detail__form__options--with-quantity .option-selectors { float: left; width: 100%; } .product-detail__form__options--with-quantity .quantity-wrapper { float: left; margin-bottom: 20px; } .price-area{margin-bottom:30px;} .product-detail__thumbs{margin-top:20px;} @media only screen and (max-width:1024px) { .product-detail__form__options--with-quantity .quantity-wrapper { float: none; margin: 20px auto; } .product-detail__form__options--with-quantity .option-selectors { float: none; width: calc(100% - 150px); } .product-detail__form__action { float: none; width: 100%; } .product-detail__form__options { float: none; width: 100%; } .color1 {background-color: {{ section.settings.col1 }};padding:10px 5% 30px 5%; } .color2 {background-color: {{ section.settings.col2 }}; padding:10px 5% 30px 5%; } .product-list{display:block;} .column.half {width:100%;} .top-wrapper{display:flex; flex-wrap:wrap} .top-wrapper .theme-gallery {width:100%;padding:20px;} .top-wrapper .product-form-wrapper{width:100%;padding:20px;} } @media only screen and (max-width:676px) { } </style> {% schema %} { "name": "Product pages", "settings": [ { "type": "select", "id": "header_overlay", "default": "overlay", "label": "Header overlay style", "options": [ { "label": "Overlay", "value": "overlay" }, { "label": "Overlay - with dark tint", "value": "overlay-with-tint-dark" }, { "label": "Overlay - with light tint", "value": "overlay-with-tint-light" }, { "label": "Overlay - with alternate logo", "value": "overlay-alt-logo" }, { "label": "No overlay", "value": "none" } ] }, { "type": "checkbox", "id": "show_brand", "default": true, "label": "Show vendor" }, { "type": "checkbox", "id": "show_type", "default": true, "label": "Show type" }, { "type": "checkbox", "id": "show_quantity", "default": true, "label": "Show quantity input" }, { "type": "checkbox", "id": "box_options", "default": true, "label": "Use box-options", "info": "Instead of dropdowns" }, { "type": "select", "id": "description_alignment", "default": "align-center", "label": "Description alignment", "options": [ { "label": "Left", "value": "" }, { "label": "Middle", "value": "align-center" } ] }, { "type": "color", "id": "col1", "default": "#f5f5f5", "label": "Desc box color" }, { "type": "color", "id": "col2", "default": "#cccccc", "label": "Ingredients box color" }, { "type": "select", "id": "cart_add", "label": "Cart type", "default": "", "options": [ { "value": "", "label": "Stay on the same page" }, { "value": "add_in_modal", "label": "Modal" }, { "value": "go_to_cart", "label": "Page" } ] }, { "type": "checkbox", "id": "enable_payment_button", "label": "Show dynamic checkout button", "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)", "default": true }, { "type": "header", "content": "Size chart" }, { "type": "checkbox", "id": "show_size_chart", "label": "Enable", "default": false }, { "type": "text", "id": "size_chart_variant", "label": "Variant name", "default": "Size" }, { "type": "page", "id": "size_chart_page", "label": "Page containing size chart" } ] } {% endschema %}

[kriszti]

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