Adding color swatches to your Shopify product detail pages improve the shopping experience by allowing customers to easily view and select from different color options. Here we will guide how you can implement color swatches in your theme step by step with custom code in your Shopify store.
Step 1: Prepare Your Theme
- Log in to your Shopify Admin.
- Go to Online Store > Themes.
- Click on Actions > Edit Code.
Step 2: How to open main-product template.
- In the Sections folder, open the “ main-product “ file.
- Replace the existing product swatches for “ product detail ” pages
Step 3: Add Schema for Color Swatches
- Update your schema to include settings for color swatches. Add the following code within the {% schema %} tag:
{
"type": "variant_picker",
"name": "t:sections.main-product.blocks.variant_picker.name",
"limit": 1,
"settings": [
{
"type": "select",
"id": "picker_type",
"options": [
{
"value": "dropdown",
"label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
},
{
"value": "button",
"label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
},
{
"value": "image",
"label": "Image"
}
],
"default": "image",
"label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
}
]
},
- Replace schema code in “ main-product ” page like in below image.
Step 4. Update the Main Product Template.
- Replace the existing on “ Main-product ” following code to include swatches:
{%- 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 }}</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 }}" CHECKING>
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{% elsif block.settings.picker_type == 'image' %}
<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 {% if option.name contains "Color" or option.name contains "COLOR" or option.name contains "color" %} looks_variant_image {% endif %}" data-handle = "{{ product.handle }}" >
<legend class="form__label">{{ option.name }}
{% if option.name contains "Color" or option.name contains "COLOR" or option.name contains "color" or option.name contains "Size"%}
<p id="option-title1"></p>
{% else %}
<p id="option-title2"></p>
{% 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 }}"CHHHH>
{% if option.name contains "Color" or option.name contains "color" or option.name contains "COLOR" %}
{% for variant in product.variants %}
{% if variant.image and variant.title contains value%}
{%- assign img = variant.image | img_url: "100px" -%}
{% endif %}
{% endfor %}
<div class="swatch-variant-image" style="background-image:url({{img}});width:50px;height:50px;display:inline-block;background-position:center;" class="color-swatch" ><span class="variant-value">: {{ value }} </span></div>
{% 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 -%}
<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>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
Step 5: Now you can Save and Test code:
- Save all code your changes.
- Go to your Shopify admin and navigate to Online Store > Customize.
- Select the Product pages template “ main-product ” and look for the new settings to enable color swatches and set the swatch image folder.
- Test the product page to ensure the color swatches are displayed correctly and that the setting toggles.
Conclusion:
Updating your schema gives you control over the display of swatches through Shopify admin, making your product pages easier to manage and customize. This approach provides more flexibility and ensures a better user experience for both store admins and customers.
India
United Kingdom
