Add Variant Color and Image Swatches To Your Collection Page - Free Tutorial

In this customization, we're going to add color or image variant swatches to your Shopify collection pages without an app.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

 

UPDATE:

We have a new and improved version of the variant swatches here.

 

1. Create Snippet and Metaobjects

Follow the instructions in this video to create the code and metaobject foundation that the collection page swatches rely on.

2. Create Snippet and Metaobjects

Render the variant-swatch-custom.liquid snippet created in the previous step in the card-product.liquid snippet.

Search for and insert for these two lines of code:

NOTE: this shows up twice, once for the card image, and once for the card details. We want to insert it under the image so this will be in the card details version (2nd instance).

<div class="card__content">

... insert code here...

    <div class="card__information">

Place the code below code within the two div to show the swatches below the product images and above the title (as shown in the video instructions).

Note: if you want to modify where the swatches show up, you can place the code elsewhere in card-product.liquid.

The code to insert is:

  <div class = "collection-form__colors">
  {%- for card_product_option in card_product.options_with_values -%}
          {% if card_product_option.name == "Color" %}  
              {% render 'variant-swatch-custom', product: card_product, option: card_product_option, section: section, initial_selected_color: initial_selected_color %}
          {% endif %}
  {%- endfor -%}
  </div>