Product Swatch

Variant Image Swatch - Dawn

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 Dawn 1.0 to Dawn 5.0 and any Shopify 2..0 FREE themes.

Use the variant image as the image swatch for your product. You can either drop down or radio buttons for the variant picker. You can also add this swatches to your product card so first 4 variant images will show in  the collection page. 

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

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' -%}

 

4. If you have a name "Color" under than "Color", you have to change the colorName. Note: It is case sensitive. You can also change the size of the swatch by change the swatchSize variable.

 {% 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 %}

{%- unless product.has_only_default_variant -%}
{%- if block.settings.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 class="js product-form__input">
<legend class="form__label">{{ option.name }}{% if option.name == colorName %}<color-name></color-name>{% endif %}</legend>
{%- for value in option.values -%}
<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 product.variants -%}
{%- if productOption.options[0] == value -%}
<img src="{{- productOption.featured_image | img_url: 'small' | uniq -}}" alt="{{- productOption.featured_image.alt -}}">
{%- endif -%}
{%- endfor -%}
{% else %}
{{value}}
{% endif %}
</label>
{%- endfor -%}
</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 == colorName %}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}{% if option.name == colorName %}<color-name></color-name>{% endif %}</legend>
{%- for value in option.values -%}
<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 product.variants -%}
{%- if productOption.options[0] == value and productOption.featured_image != blank -%}

<img src="{{- productOption.featured_image | img_url: 'small' | uniq -}}" alt="{{- productOption.featured_image.alt -}}">
{% else %}
{{value}}

{%- endif -%}
{%- endfor -%}
{% else %}
{{value}}
{% endif %}
</label>
{%- endfor -%}
</fieldset>
{% else %}

<div class="product-form__input product-form__input--dropdown">
<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 }}">
{%- 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>
{% endif %}
{%- 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>
<style scoped>
.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;
}

fieldset label > img {
width: {{swatchSize}};
height: {{swatchSize}};
aspect-ratio: 1;
}

fieldset label > img:not(:first-child) {
display: none !important;
}

.product-form__input input[type=radio]:checked+.colorLabel {
background-color: transparent !important;
color: none !important;
border: var(--variant-pills-border-width) solid rgba(var(--color-foreground),var(--variant-pills-border-opacity)) !important;
}
</style>

 

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

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

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 | img_url: 'small' | uniq -}}" 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. 

card_product or product_card

 

That's it (",)

Copied!
Voltar para o blogue

Deixe um comentário