Product Swatch

Shopify Dawn Color Swatches - Shopify 2.0 themes

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

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.

Why Use Color Swatches in Shopify Dawn? Color swatches convert the traditional dropdown menu for product variants into a more visually engaging and user-friendly format. This not only improves the user experience but also provides a clearer view of the available product options.

Benefits of Adding Color Swatches:

  • Enhanced Visual Appeal: Provides a more attractive and engaging way to display variants.
  • Improved User Experience: Makes it easier for customers to view and select product options.
  • Better Product Display on Collection Pages: Shows potential customers the variety of options available right from the collection page.

You can check the demo store here. Password: made4uo

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.

To start:

1. Go to Online Store > Themes > Actions > Edit Code.

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

2. 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:

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

{%- when 'variant_picker' -%} 

 

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. 

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

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

 

That's it (",)

Copied!
Back to blog

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