Copy-paste a Liquid snippet for product page - Visual colour dots for the colour option - the single most-expected feature on fashion stores (96% of premium themes have it).
Colour: Midnight
1<div class="gpl-sw{% if shape == 'square' %} gpl-sw--sq{% endif %}">2 {%- assign colour_opt = product.options_with_values | where: 'name', 'Color' | first | default: product.options_with_values | where: 'name', 'Colour' | first -%}3 {%- if colour_opt -%}4 <p class="gpl-sw__label">Colour: <b data-gpl-sw-label>{{ colour_opt.selected_value }}</b></p>5 <div class="gpl-sw__row">6 {%- for val in colour_opt.values -%}7 <button type="button" class="gpl-sw__dot{% if val == colour_opt.selected_value %} is-sel{% endif %}" data-val="{{ val }}" style="--gpl-sw: {{ val | handleize | replace: '-', ' ' }}" title="{{ val }}" aria-label="{{ val }}"></button>8 {%- endfor -%}9 </div>10 {%- endif -%}11</div>
Full source is for members
One payment - every snippet, guide and bundle
