Shopfiy Custom Swatch Color Options

rovec
New Member
1 0 0

Hi I am trying to add custom color options (and custom color images) in my Swatch selection. What approach should I take without the use of third part apps. I want each circle to display a custom texture with a customized (unique name).

 

rovec_0-1614630301234.png


 
Updating Media

 

here is the code in my swatch.liquid file:

 

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{% assign swatchIndex = index %}
{% assign colPage = collPage %}
{% assign swatchTotal = total %}
{%- assign varGenProd = product -%}
{%- assign mainVariant = varGenProd.selected_or_first_available_variant -%}
{%- capture swatch_group_name -%}{{ 'products.general.color_swatch' | t | downcase }}{%- endcapture -%}
{% assign file_extension = 'png' %}
{%- assign sharedSelectClasses = 'product-single__variants mobile-prod-padding' | append:' ' -%}
{%- assign singleOpSelectClasses = sharedSelectClasses | append:'single-variant-available' -%}
{%- assign multiOpSelectClasses =  sharedSelectClasses | append:'multiop-select' -%}

{% if swatch == blank %}

{% else %} 

{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
  {% if option == swatch %} 
    {% assign found_option = true %}
    {% assign option_index = forloop.index0 %}
    {% assign downcased_option = swatch | downcase %}
    {% if downcased_option contains swatch_group_name %}
      {% assign is_color = true %}
    {% endif %}
  {% endif %}
{% endfor %} 

{% unless found_option %}

{% else %}

{%if colPage %}
{% assign colorCount = 0 %}
<div class="swatch swatch--collection clearfix" data-product-option="{{ swatch }}">
  {% assign values = '' %}
  {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: '||' %}
      {% assign values = values | append: '||' | append: value %} 
      {% assign values = values | split: '||' %}
      <div class="swatch-element swatch-element--color">
        <div id="swatch-{{ option_index }}-{{ value | handle }}-{{section.id}}" class="colSwatch">
          {% if is_color %}
            {% assign colorCount = colorCount | plus:1 %}
            <label for="swatch-{{ option_index }}-{{ value | handle }}-{{section.id}}" class="swatch-element__color swatch-element__color--small" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})">
            </label>
          {% endif %}
        </div>
      </div>
    {% endunless %}
    {%if colorCount >= 21%}
    {% break %}
    {%endif%}
  {% endfor %}
</div>
  {%break%}
{%endif%}



{% if swatchTotal == 1 %}
<div class="swatch swatch--product clearfix"  name="id" id="productSelect" class="{{ singleOpSelectClasses }}" data-prod-base-price="{{ varGenProd.price }}" data-option-index="{{ option_index }}" data-product-option="{{ swatch }}">
  <h6 class="swatch-header">{{ swatch }}</h6>
  {% assign values = '' %}
  {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: '||' %}
      {% assign values = values | append: '||' | append: value %} 
      {% assign values = values | split: '||' %}
      <div class="swatch-element {% if is_color %}swatch-element--color {% else %} swatch-element--text {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}" >
        {% if is_color %}
        <div class="tooltip">{{ value }}</div>
        {% endif %}
        <input id="swatch-{{ option_index }}-{{ value | handle }}-{{section.id}}{%if block.id%}--{{block.id}}{%endif%}"
          type="radio" 
          name="id" 
          {% if mainVariant == variant%} checked{% endif %}
          data-sku="{{ variant.sku }}"
          value="{{ variant.id }}"
          data-base-price="{{variant.price }}"
          {% unless variant.compare_at_price == blank %}data-compare-price="{{ variant.compare_at_price }}"{%endunless%}
          {% unless variant.available %}data-unavailable="true"{% endunless %}
          data-img-id="{{ variant.featured_media.id }}"
          data-title="{{variant.title | escape}}"
          data-unit-price='{{variant.unit_price}}'
          data-unit-price-measurement='{"reference_value":"{{variant.unit_price_measurement.reference_value}}","reference_unit":"{{variant.unit_price_measurement.reference_unit}}"}'/>
        {% if is_color %}
        <label for="swatch-{{ option_index }}-{{ value | handle }}-{{section.id}}{%if block.id%}--{{block.id}}{%endif%}" class="swatch-element__color {% unless variant.available %} disabled-swatch {%endunless%}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ variant.image | img_url: 'small' }})">
        </label>
        {% else %}
        <label class="swatch-element__text" for="swatch-{{ option_index }}-{{ value | handle }}-{{section.id}}{%if block.id%}--{{block.id}}{%endif%}" class="swatch-element__color {% unless variant.available %} disabled-swatch {%endunless%}">
          {{ value }}
        </label>
        {% endif %}
      </div>
    {% endunless %}
    <!--
    {% if variant.available %}
      <script>
            $(function(){
        jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
      });
      </script>
    {% endif %}
    //-->
  {% endfor %}
</div>


{%else%}
{%comment%}
For multiple options to tie into JS
{%endcomment%}
<div class="swatch swatch--product clearfix multiop-select" id="productSelect-op{{ swatchIndex }}" data-prod-base-price="{{ varGenProd.price }}" data-option-index="{{ option_index }}" data-opnum="{{ swatchIndex }}" data-product-option="{{ swatch }}">
  <h6 class="swatch-header">{{ swatch }}</h6>
  {% assign values = '' %}
  {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: '||' %}
      {% assign values = values | append: '||' | append: value %} 
      {% assign values = values | split: '||' %}
      <div data-value="{{ value | escape }}"  data-img-id="{{ variant.featured_media.id }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} available {% if mainVariant.options[option_index] == variant.options[option_index] %}selected{% endif %}">
        {% if is_color %}
        <div class="tooltip">{{ value }}</div>
        {% endif %}
        <input 
          id="swatch-{{ option_index }}-{{ value | handle }}-{{section.id}}{%if block.id%}--{{block.id}}{%endif%}" 
          value="{{ value | escape }}" 
          type="radio" 
          name="option-{{ option_index }}" 
          {% if mainVariant.options[option_index] == variant.options[option_index] %} checked{% endif %}
          data-img-id="{{ variant.featured_media.id }}"
          data-title="{{variant.title | escape}}" 
          data-unit-price='{{variant.unit_price}}'
          data-unit-price-measurement='{"reference_value":"{{variant.unit_price_measurement.reference_value}}","reference_unit":"{{variant.unit_price_measurement.reference_unit}}"}'/>
        {% if is_color %}
        <label class="swatch-element__color" for="swatch-{{ option_index }}-{{ value | handle }}-{{section.id}}{%if block.id%}--{{block.id}}{%endif%}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})">
        </label>
        {% else %}
        <label class="swatch-element__text" for="swatch-{{ option_index }}-{{ value | handle }}-{{section.id}}{%if block.id%}--{{block.id}}{%endif%}">
          {{ value }}
        </label>
        {% endif %}
      </div>
    {% endunless %}
  {% endfor %}
</div>

{%endif%}

{% endunless %}

{% endif %}

 

 

$3,319.00
$4,149.00
Color
Trento Taupe
Orientation
Left-Hand-Facing
Right-Hand-Facing
Quantity
Only 2 units are available!

 

0 Likes
KetanKumar
Shopify Partner
15951 1758 5877

@rovec 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes