Im having some issues for the Theme Mongo to display the color Variants, im not sure if im doing something wrong on the back end or the code handles the variants in a different way....
i already look their documentation and the dont say anything about how to set up swatches on their theme, i have tried diferent methods on youtube or shopify manuals im getting hopeless, right now im using an App to showcase the variant colors on the product page but the theme comes with it, not only on product page but filter, colection, and home page.
this is the code for the swatches.
{% comment %}
Renders product variant-picker
Accepts:
- product: {Object} product object.
- block: {Object} passing the block information.
- product_form_id: {String} Id of the product form to which the variant picker is associated.
- update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
Usage:
{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% 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 }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
aria-label="Variants"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}checked{% endif %}
>
{% if option.name == "Color" %}
{% assign variantIndex = forloop.index0 %}
{% assign colorSwatch = product.variants[variantIndex].metafields.color.swatch %}
{% if colorSwatch != blank %}
<label style="background-color: {{ colorSwatch }}" class="color-label" for="{{ section.id }}-{{ option.position }}-{{ variantIndex }}" class="product-color-options">
</label>
{% else %}
<label style="background-color: {{ value }}" class="color-label" for="{{ section.id }}-{{ option.position }}-{{ variantIndex }}" class="product-color-options">
</label>
{% endif %}
{% else %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="product-color-setup">{{ value }}</label>
{% endif %}
{%- endfor -%}
</fieldset>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}
<variant-selects
id="variant-selects-{{ section.id }}"
class="no-js-hidden"
data-section="{{ section.id }}"
data-url="{{ product.url }}"
{% if update_url == false %}
data-update-url="false"
{% endif %}
{{ 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 }}"
>
{% render 'product-variant-options', product: product, option: option, block: block %}
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{%- endunless -%}%- unless product.has_only_default_variant -%}
{% if show_color_variant %}
<ul class="colorlist">
{% assign counter = 0 %}
{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{%- if counter < 2 -%}
{% if variant.available %}
<li id="{{ variant.id }}" class="instock">
{% if variant.metafields.color.swatch != blank %}
<a href="{{ product.url | within: collection }}?variant={{ variant.id }}" style="background:{{ variant.metafields.color.swatch }}">{{ color | downcase }}</a>
{% else %}
<a href="{{ product.url | within: collection }}?variant={{ variant.id }}" style="background:{{ color | downcase }}">{{ color | downcase }}</a>
{% endif %}
</li>
{%- assign counter = counter | plus:1 -%}
{% else %}
<li id="{{ variant.id }}" class="soldout_variant">
{% if variant.metafields.color.swatch != blank %}
<a href="javascript:void(0)" style="background:{{ variant.metafields.color.swatch }}">{{ color | downcase }}</a>
{% else %}
<a href="javascript:void(0)" style="background:{{ color | downcase }}">{{ color | downcase }}</a>
{% endif %}
</li>
{%- assign counter = counter | plus:1 -%}
{% endif %}
{%- else -%}
{%- assign remaining_color_variants = product.variants | size | minus: counter -%}
{% capture remaining_color_variant_text %}
{% comment %}{{ remaining_color_variants }}{% endcomment %}+
{% endcapture %}
<li class="view-more-btn-wrapper">
<a class="small" href="{{ product.url | within: collection }}">{{ remaining_color_variant_text }}</a>
</li>
{%- break -%} {# This breaks out of the loop after adding the "+" button once #}
{%- endif -%}
{% capture tempList %}
{{ colorlist | append: color | append: " " }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% endunless %}
