Shopify Dawn Image / Color Swatches - Shopify 2.0 themes

Product Swatch

Compatibility: Compatible with any version of Dawn and any Shopify 2.0 FREE themes.

In the visually-driven world of online retail, presentation is everything. For Shopify store owners using the Dawn theme, color swatches offer a dynamic way to showcase product variations. This blog will guide you through adding Dawn color swatches to your store, enhancing both product and collection pages with a more interactive and visually appealing display.

You can check the demo store here. Password: made4uo

What is Variant Image Color Swatches?

Variant image color swatches are visual representations of the different color options available for a product. Instead of a dropdown menu or text labels, customers see small colored squares (or circles) that correspond to each variant's color. Clicking on a swatch changes the displayed product image to the image associated with that color variant.

Why Use Variant Image Color Swatches?

  • Improved User Experience: Color swatches provide a more visually appealing and intuitive way to select product variants, especially colors. They are much easier to understand at a glance than text-based options.
  • Increased Conversions: A better user experience can lead to increased conversions. Customers can quickly see the available colors and make their selection without any confusion.
  • Reduced Cognitive Load: Visual cues are processed more quickly than text, reducing the cognitive load on the customer and making the selection process more efficient.
  • Enhanced Product Presentation: Color swatches make your product pages look more professional and visually engaging.
  • Better Mobile Experience: Color swatches are particularly useful on mobile devices, where screen space is limited.

Additional Considerations:

  • Color Representation: Ensure the color swatches accurately represent the actual product colors. Hex codes are generally preferred for defining colors.
  • Image Association: Correctly link each color swatch to the corresponding variant image. This is crucial for the functionality to work.
  • Swatch Size and Shape: Choose an appropriate size and shape for the color swatches. They should be large enough to be easily visible but not so large that they overwhelm the design.
  • Mobile Responsiveness: Ensure the color swatches look good and function correctly on mobile devices.
  • Accessibility: Use ARIA attributes to make the color swatches accessible to screen readers. Provide alternative text for the swatches.
  • Fallback: If a variant doesn't have an associated image, consider having a placeholder or default image display.

What you are buying:

  • A swatch with options instructions to change the style. Please make sure to read {% comment %} in code
  • Able to use with select or radios variant picker
  • Able to add swatch to the collection cards
  • Make sure to assign the color option as first option for this to work

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

[]

Steps on how to add Variant Image Color Swatches?

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

If you have product-variant-picker.liquid file under the Snippet folder, follow the instructions below:

Step #2. Snippet Folder

Go to the Snippet folder instead and open the "product-variant-picker.liquid" file. Replace the code with the code below. 

NOTE: Please see the option names in the code, if your option name for color is not "Color", "Style", or "Colour", please add the name with a comma in between in the code. It is case sensitive. You can also change the size of the swatch by change the swatchSize variable.

{% assign option_name = 'Color,Style,Colour' %}
{% assign swatch_size = '3vw' %}
{% comment %} Change the color swatch size below.{% endcomment %}
{% assign swatch_shape = 'round-edge' %}
{% comment %} Change the swatch shape. Use either 'round', 'square', 'rectangle' or 'round-edge'. {% endcomment %}
<style>
  fieldset {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
  }
  .swatchComponent {
    display: flex;
    margin: 5% 0;
    box-sizing: border-box;
    position: relative;
    border: none;
  }
  .swatchContainer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .inputColor {
    display: none;
  }
  .product-form__input input[type="radio"] + .labelColor {
    width: {{swatch_size}};
    min-width: 30px;
    margin: 1%;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0;
  }
  .labelColor:hover {
    transform: scale(1.1);
  }
  .labelColor img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .inputColor:checked + .labelColor + .infoColor {
    display: flex;
  }
  .inputColor:checked + .labelColor {
    outline: 2px solid;
    border: 2px solid white;
  }
</style>
 
{%- 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
-%}
 
{%- unless product.has_only_default_variant -%}
  {%- if block.settings.picker_type == 'button' -%}
    <variant-radios
      id="variant-radios-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <fieldset class="js product-form__input">
          {% if option_name contains option.name %}
            <legend class="form__label">
              {{ option.name -}}
              <color-name></color-name>
            </legend>
            {%- for value in option.values -%}
              {%- for productOption in product.variants -%}
                {%- if productOption.options[0] == value -%}
                  {% assign productVariantImage = productOption.featured_image %}
                {%- endif -%}
              {%- endfor -%}
 
              {%- 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
              -%}
              <input
                type="radio"
                id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                name="{{ option.name }}"
                value="{{ value | escape }}"
                form="{{ product_form_id }}"
                {% if option.selected_value == value %}
                  checked
                {% endif %}
                {% if option_disabled %}
                  class="disabled"
                {% endif %}
              >
              <label
                for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                data-color="{{value | downcase | replace: ' ', '-' }}"
                style="
                  {% case swatch_shape %}
                  {% when 'round' %} border-radius: 50%; aspect-ratio: 1;
                  {% when 'square' %} aspect-ratio: 1;
                  {% when 'rectangle' %} height: calc({{swatch_size}} / 2);
                  {% when 'round-edge' %} border-radius: 15%; aspect-ratio: 1;
                  {% endcase %}
                "
                class="labelColor"
              >
                <img
                  src="{{- productVariantImage | image_url: width: 100 | uniq -}}"
                  width="50"
                  height="50"
                  alt="{{- productVariantImage.alt -}}"
                >
                <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
              </label>
            {% endfor %}
 
          {% else %}
            <legend class="form__label">{{ option.name }}</legend>
            {% render 'product-variant-options', product: product, option: option, block: block %}
          {% endif %}
        </fieldset>
      {%- endfor -%}
      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-radios>
  {%- else -%}
    <variant-selects
      id="variant-selects-{{ section.id }}"
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {% if update_url == false %}
        data-update-url="false"
      {% endif %}
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <div class="product-form__input product-form__input--dropdown">
          {% if option_name contains option.name %}
            <legend class="form__label">
              {{ option.name -}}
              <color-name></color-name>
            </legend>
            {%- for value in option.values -%}
              {%- for productOption in product.variants -%}
                {%- if productOption.options[0] == value -%}
                  {% assign productVariantImage = productOption.featured_image %}
                {%- endif -%}
              {%- endfor -%}
 
              {%- 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
              -%}
              <input
                type="radio"
                id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                name="{{ option.name }}"
                value="{{ value | escape }}"
                form="{{ product_form_id }}"
                {% if option.selected_value == value %}
                  checked
                {% endif %}
                {% if option_disabled %}
                  class="disabled"
                {% endif %}
              >
              <label
                for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                data-color="{{value | downcase | replace: ' ', '-' }}"
                style="
                  {% case swatch_shape %}
                  {% when 'round' %} border-radius: 50%; aspect-ratio: 1;
                  {% when 'square' %} aspect-ratio: 1;
                  {% when 'rectangle' %} height: calc({{swatch_size}} / 2);
                  {% when 'round-edge' %} border-radius: 15%; aspect-ratio: 1;
                  {% endcase %}
                "
                class="labelColor"
              >
                <img
                  src="{{- productVariantImage | image_url: width: 100 | uniq -}}"
                  width="50"
                  height="50"
                  alt="{{- productVariantImage.alt -}}"
                >
                <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
              </label>
            {% endfor %}
 
          {% else %}
            <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
              {{ option.name }}
            </label>
            <div class="select">
              <select
                id="Option-{{ section.id }}-{{ forloop.index0 }}"
                class="select__select"
                name="options[{{ option.name | escape }}]"
                form="{{ product_form_id }}"
              >
                {% render 'product-variant-options', product: product, option: option, block: block %}
              </select>
              {% render 'icon-caret' %}
            </div>
          {% endif %}
        </div>
      {%- endfor -%}
      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-selects>
  {%- endif -%}
{%- endunless -%}
 
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
    <label class="form__label" for="Variants-{{ section.id }}">
      {{- 'products.product.product_variants' | t -}}
    </label>
    <div class="select">
      <select
        name="id"
        id="Variants-{{ section.id }}"
        class="select__select"
        form="{{ product_form_id }}"
      >
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
            {% if variant.available == false %}
              disabled
            {% endif %}
            value="{{ variant.id }}"
          >
            {%- liquid
              echo variant.title
              echo variant.price | money | strip_html | prepend: ' - '
              if variant.available == false
                echo 'products.product.sold_out' | t | prepend: ' - '
              endif
              if variant.quantity_rule.increment > 1
                echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
              endif
              if variant.quantity_rule.min > 1
                echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
              endif
              if variant.quantity_rule.max != null
                echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
              endif
              # TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
              # theme-check-disable
              assign cart_quantity = cart | item_count_for_variant: variant.id
              # theme-check-enable
              if cart_quantity > 0
                echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
              endif
            -%}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>
<script>
class VariantColor extends HTMLElement {
    constructor() {
        super();
        this.inputColors = this.querySelectorAll('.inputColor');
        this.inputColors.forEach(color => color.addEventListener('click', this.colorSelected.bind(this)));
    }
 
    colorSelected(event) {
        const select = document.querySelector(`.colorSelect`);
        const item = event.currentTarget.value;
        select.value = item;
    }
}
 
customElements.define('variant-color', VariantColor);
</script>

 

If you DO NOT have product-variant-picker.liquid file under the Snippet folder, follow the instructions below:

Step #2. main-product.liquid file

Open the main-product.liquid file under the Section folder and find the code below. 

{%- when 'variant_picker' -%} 

 

Step #3.

We need to replace the code between the code in Step 2 and the code below, with the code in Step 4.

{%- when 'buy_buttons' -%}

 

NOTE: If you have a name "Color" other than "Color", "Style", or "Colour", you have to change the option_name. It is case sensitive. You can also change the size of the swatch by change the swatchSize variable.

{% assign option_name = 'Color,Style,Colour' %}
 
{% assign swatch_size = '3vw' %}
{% comment %} Change the color swatch size below.{% endcomment %}
{% assign swatch_shape = 'round-edge' %}
{% comment %} Change the swatch shape. Use either 'round', 'square', 'rectangle' or 'round-edge'. {% endcomment %}
 
{%- unless product.has_only_default_variant -%}
  {% assign picker_type = block.settings.picker_type %}
  {%- if picker_type == 'button' -%}
    <variant-radios
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        <fieldset
          {% if option_name contains option.name %}
            class="swatchComponent" style=" padding: 0;"
          {% else %}
            class="js product-form__input" style="border:none"
          {% endif %}
        >
          {% if option_name contains option.name %}
            <legend class="form__label">
              {{ option.name -}}
              <color-name></color-name>
            </legend>
            <div class="swatchContainer">
              {% assign productVariantImage = '' %}
              {%- for value in option.values -%}
                {%- for productOption in product.variants -%}
                  {%- if productOption.options[0] == value -%}
                    {% assign productVariantImage = productOption.featured_image %}
                  {%- endif -%}
                {%- endfor -%}
 
                <input
                  class="inputColor"
                  name="{{ option.name }}"
                  value="{{ value | escape }}"
                  form="product-form-{{ section.id }}"
                  type="radio"
                  id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                  {% if option.selected_value == value %}
                    checked
                  {% endif %}
                >
                <label
                  class="labelColor"
                  for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                  data-color="{{value | downcase | replace: ' ', '-' }}"
                  style="
                    {% case swatch_shape %}
                    {% when 'round' %} border-radius: 50%; aspect-ratio: 1;
                    {% when 'square' %} aspect-ratio: 1;
                    {% when 'rectangle' %} height: calc({{swatch_size}} / 2);
                    {% when 'round-edge' %} border-radius: 15%; aspect-ratio: 1;
                    {% endcase %}
                  "
                >
                  <img
                    src="{{- productOption.featured_image | image_url: width: 100 | uniq -}}"
                    width="50"
                    height="50"
                    alt="{{- productOption.featured_image.alt -}}"
                  >
                </label>
              {% endfor %}
            </div>
          {% else %}
            <legend class="form__label">
              {{ option.name -}}
              <color-name></color-name>
            </legend>
            {%- for value in option.values -%}
              <input
                type="radio"
                id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                name="{{ option.name }}"
                value="{{ value | escape }}"
                form="product-form-{{ section.id }}"
                {% if option.selected_value == value %}
                  checked
                {% endif %}
              >
              <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                {{ value }}
              </label>
            {%- endfor -%}
          {% endif %}
        </fieldset>
      {% endfor -%}
      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-radios>
  {%- else -%}
    <variant-selects
      class="no-js-hidden"
      data-section="{{ section.id }}"
      data-url="{{ product.url }}"
      {{ block.shopify_attributes }}
    >
      {%- for option in product.options_with_values -%}
        {% if option_name contains option.name %}
          <variant-color>
            <fieldset class="swatchComponent" style=" padding: 0;">
              <legend class="form__label">
                {{ option.name -}}
                <color-name></color-name>
              </legend>
              <div class="swatchContainer">
                {% assign productVariantImage = '' %}
                {%- for value in option.values -%}
                  {%- for productOption in product.variants -%}
                    {%- if productOption.options[0] == value -%}
                      {% assign productVariantImage = productOption.featured_image %}
                    {%- endif -%}
                  {%- endfor -%}
                  <input
                    class="inputColor"
                    name="{{ option.name }}"
                    value="{{ value | escape }}"
                    form="product-form-{{ section.id }}"
                    type="radio"
                    id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                    {% if option.selected_value == value %}
                      checked
                    {% endif %}
                  >
                  <label
                    class="labelColor"
                    for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                    style="
                      {% case swatch_shape %}
                      {% when 'round' %} border-radius: 50%; aspect-ratio: 1;
                      {% when 'square' %} aspect-ratio: 1;
                      {% when 'rectangle' %} height: calc({{swatch_size}} / 2);
                      {% when 'round-edge' %} border-radius: 15%; aspect-ratio: 1;
                      {% endcase %}
                    "
                  >
                    <img
                      src="{{- productVariantImage | image_url: width: 100 | uniq -}}"
                      width="50"
                      height="50"
                      alt="{{- productVariantImage.alt -}}"
                    >
                  </label>
                {% endfor %}
              </div>
            </fieldset>
          </variant-color>
        {% endif %}
 
        <div
          class="product-form__input product-form__input--dropdown"
          {% if option_name contains option.name %}
            style="display: none"
          {% endif %}
        >
          <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <div class="select">
            <select
              id="Option-{{ section.id }}-{{ forloop.index0 }}"
              class="select__select {% if option_name contains option.name %} colorSelect{% endif %}"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              {%- for value in option.values -%}
                <option
                  value="{{ value | escape }}"
                  {% if option.selected_value == value %}
                    selected="selected"
                  {% endif %}
                >
                  {{ value }}
                </option>
              {%- endfor -%}
            </select>
            {% render 'icon-caret' %}
          </div>
        </div>
      {%- endfor -%}
      <script type="application/json">
        {{ product.variants | json }}
      </script>
    </variant-selects>
  {%- endif -%}
{%- endunless -%}
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
    <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
    <div class="select">
      <select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
            {% if variant.available == false %}
              disabled
            {% endif %}
            value="{{ variant.id }}"
          >
            {{ variant.title }}
            {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
            - {{ variant.price | money | strip_html }}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>
<script>
class VariantColor extends HTMLElement {
    constructor() {
        super();
        this.inputColors = this.querySelectorAll('.inputColor');
        this.inputColors.forEach(color => color.addEventListener('click', this.colorSelected.bind(this)));
    }
 
    colorSelected(event) {
        const select = document.querySelector(`.colorSelect`);
        const item = event.currentTarget.value;
        select.value = item;
    }
}
 
customElements.define('variant-color', VariantColor);
</script>
<style>
  fieldset {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
  }
  .swatchComponent {
    display: flex;
    margin: 5% 0;
    box-sizing: border-box;
    position: relative;
    border: none;
  }
  .swatchContainer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .inputColor {
    display: none;
  }
  .labelColor {
    width: {{swatch_size}};
    min-width: 30px;
    margin: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    transition: all .3s ease;
  }
  .labelColor:hover{
    transform: scale(1.1);
  }
  .labelColor img {
    object-fit: cover;
    width: 100%;
  }
  .inputColor:checked + .labelColor + .infoColor {
    display: flex;
  }
  .inputColor:checked + .labelColor {
    outline: 2px solid;
    border: 2px solid white;
  }
</style>
 

 

Resume the instructions here depending on which theme version you have. 

Step #1. Resume

Showing pictures of the variant color will not be enough, we have to provide the name of the color variant they are choosing. Therefore, we need the script below. Go to global.js under the Asset folder and add the code below. 

class ColorName extends HTMLElement {
    constructor() {
        super();
        this.color = this.parentNode.innerText;
        this.optionSelects = this.parentNode.parentNode;
        this.optionSelects.addEventListener('change', this.colorRender.bind(this))
        this.colorRender();
    }
 
    colorRender() {
        this.selectedColor = document.querySelector(`input[name="${this.color}"]:checked`).value;
        this.innerText = `: ${this.selectedColor.charAt(0).toUpperCase() + this.selectedColor.slice(1)}`;
    }
}
 
customElements.define('color-name', ColorName);

 

If you want to show the swatch to a product card then proceed with the following steps.

Step #1. Open the card-product.liquid

Under the Snippet folder, Then find the "card-information". There are two of them, make sure it is the first one. Paste the code below before the "card-information. Click enter to start a new line. See the image below for placement. 

Dawn color swatches code placement
{% comment %} ============================================================================================================= {% endcomment %}
{% assign colorName = 'Color' %}
{% comment %} Provide the name of the Color. Make sure you enclose it with quotation marks {% endcomment %}
{% assign swatchSize = '4rem' %}
{% comment %} You can use rem, px, %, etc. Make sure you enclose it with quotation marks {% endcomment %}
{% comment %} ============================================================================================================= {% endcomment %}
{%- for option in card_product.options_with_values -%}
  {% if option.name == colorName %}
    <fieldset class="js product-form__input">
      <legend>{{ option.name }}</legend>
      {%- for value in option.values limit: 5 -%}
        <input
          type="radio"
          id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
          name="{{ option.name }}"
          value="{{ value | escape }}"
          form="{{ product_form_id }}"
          {% if option.selected_value == value %}
            checked
          {% endif %}
        >
        <label
          for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
          class="{% if option.name == colorName %}colorLabel{% endif %}"
        >
          {% if option.name == colorName %}
            {%- for productOption in card_product.variants -%}
              {%- if productOption.options[0] == value and productOption.featured_image != blank -%}
                <img
                  src="{{- productOption.featured_image | image_url: width: 100 | uniq -}}"
                  width="50"
                  height="50"
                  alt="{{- productOption.featured_image.alt -}}"
                >
              {%- endif -%}
            {%- endfor -%}
          {% endif %}
        </label>
      {%- endfor -%}
 
      {% if option.values.size > 5 -%}
        <strong class="plusMore"> + More </strong>
      {%- endif %}
    </fieldset>
  {% endif %}
{% endfor %}
<script type="application/json">
  {{ card_product.variants | json }}
</script>
<style scoped>
  fieldset {
    border: none;
    padding: 0;
  }
  .colorLabel {
    padding: 0 !important;
    height: calc({{swatchSize}} + var(--variant-pills-border-width));
    aspect-ratio: 1;
    border: var(--variant-pills-border-width) solid transparent !important;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    margin: 0.7rem 0.5rem 0.2rem 0;
    transition: border var(--duration-short) ease;
    cursor: pointer;
    position: relative;
  }
  .colorLabel:before {
    content: "";
    position: absolute;
    top: calc(var(--variant-pills-border-width) * -1);
    right: calc(var(--variant-pills-border-width) * -1);
    bottom: calc(var(--variant-pills-border-width) * -1);
    left: calc(var(--variant-pills-border-width) * -1);
    z-index: -1;
    border-radius: var(--variant-pills-radius);
    box-shadow: var(--variant-pills-shadow-horizontal-offset)
      var(--variant-pills-shadow-vertical-offset)
      var(--variant-pills-shadow-blur-radius)
      rgba(var(--color-shadow), var(--variant-pills-shadow-opacity));
  }
  .product-form__input input[type="radio"] {
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    position: absolute;
    height: 1px;
    width: 1px;
  }
  fieldset label > img {
    width: {{swatchSize}};
    height: {{swatchSize}};
    aspect-ratio: 1;
  }
  fieldset label > img:not(:first-child) {
    display: none !important;
    }
  .plusMore {
    display: inline-block;
    top: -13px;
    position: relative;
  }
</style>


Note: Dawn theme has a lot of edits, some old version of Dawn they call the product using "product_card", the latest version, which I use in this tutorial, uses "card_product."

Depending on your Dawn version, you have to change the some of the code in Step 6. To see if you have product_card or card_product, you can check it on the card_product.liquid. See image below. 

If you do not have card_product, you can change the code by simply have to click Ctrl + F, and find "card_product", and change it to product_card. 

Dawn color swatches to card_product or product_card

Last Step. Save the changes

Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

Conclusion

Implementing variant image color swatches in your Shopify store, particularly within the Dawn theme, offers a significant improvement to the user experience, especially for products where color is a key purchasing factor.  By replacing text-based variant selection with visually appealing color representations, you streamline the browsing process, reduce cognitive load, and ultimately encourage conversions.  While the implementation may require some coding knowledge and attention to detail, the benefits of a more intuitive and engaging product presentation make it a worthwhile investment.  Remember to consider the additional points discussed to ensure your color swatches are accurate, accessible, and responsive, contributing to a more professional and user-friendly online store.

That's it (",)

2 comments

Hi @Jun Hwang,

Thank you for the purchase. We cannot replicate the issue. We also check the view in apple device. Please contact us using the “Chat with us” for faster reply.

Made4Uo •

Hi,

I just bought the variant image code and it works perfect.
The only problem I’m having right now is that mobile and small screen is ok but when the screen expands or view from desktop, the image height decreases and I’m seeing an white spaces top and bottom of the image variant.
Can you please let me know what could possibly trigger this error
Thank you,

Jun Hwang •

Leave a comment