Hello;
I wanna make color swatcher for my products page.
first sizes and color variant options seen as dropdown box;
But I want to see box for color options and upload pictures for models like that and swatch.
Size can stay as dropdown box but color must change like that .
And I learned that my theme has no feature for color swatch function at all and need your urgent help to add this function and codes for my theme .
You can find my theme files as as attached also.
Hi @Adamo1 ,
Please follow the steps:
Step 1: Go to Online store > Themes > Customize.
Step 2: Go to Theme settings > Product Options - Filters. Here you have 2 options:
A: Display colors according to the color code entered in Colors Mapping. That is, at Options Mapping you choose Color:color and then enter the color code in Colors Mapping. https://i.imgur.com/pmOO0vV.png
B: Display colors according to variant uploaded image in admin product. That is, at Options Mapping you choose Color:image. https://i.imgur.com/YOA19wP.png
Hope this helps!
@LitExtension Hello I look your guide but my theme does not have swatch option I think.
Could you please help me if I add you as an staff?
Hi @Adamo1 ,
You can please follow these steps:
Here is the code: https://pastebin.com/J2StidXe
Hope this helps!
Hi thank you for your assistance but cannot open pastebin link could you please share the code via wetransfer or from there
Hi @Adamo1 ,
Please paste this code:
{%- if option_type == ‘image’ %}
{%- assign color = ‘’ -%}
{%- assign shown_list = ‘’ -%}
{%- for variant in product.variants -%}
{%- assign option_handle = variant.options[option_index] -%}
{%- unless shown_list contains option_handle -%}
{%- if variant.image -%}
<input type=“radio” name=“option{{ option.position }}” {% if variant == current_variant %}checked=“checked”{% endif %} value=“{{ option_handle | escape }}” data-product-option=“{{ option_index }}” />
{%- endif -%}
{%- assign shown_list = shown_list | join: ‘,’ -%}
{%- assign shown_list = shown_list | append: ‘,’ | append: option_handle -%}
{%- assign shown_list = shown_list | split: ‘,’ -%}
{%- endunless -%}
{%- endfor -%}
{%- elsif option_type == ‘color’ %}
{%- assign color = ‘’ -%}
{%- assign shown_list = ‘’ -%}
{%- for variant in product.variants -%}
{%- assign option_handle = variant.options[option_index] -%}
{%- unless shown_list contains option_handle -%}
{%- capture color_code -%}
{%- include ‘product-option-color-detector’ -%}
{%- endcapture -%}
{%- assign color_code = color_code | strip | strip_newlines -%}
{%- if color_code != blank -%}
<input type=“radio” name=“option{{ option.position }}” {% if variant == current_variant %}checked=“checked”{% endif %} value=“{{ option_handle | escape }}” data-product-option=“{{ option_index }}” />
{%- endif -%}
{%- assign shown_list = shown_list | join: ‘,’ -%}
{%- assign shown_list = shown_list | append: ‘,’ | append: option_handle -%}
{%- assign shown_list = shown_list | split: ‘,’ -%}
{%- endunless -%}
{%- endfor -%}
Hope this helps!
