Variants not showing on my Theme Mongo

CCadavid
Visitor
2 0 0

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&colon;void(0)" style="background:{{ variant.metafields.color.swatch }}">{{ color | downcase }}</a>
                                  {% else %}
                                  <a href="javascript&colon;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 %}
Reply 1 (1)
CCadavid
Visitor
2 0 0

Well how do i know how they want us to setup the variants or metafields... because they use custom for some features like the timer or size chart but when is related to swatches there is no information other that it is supported. Thats why i put the code to see if anyone can read that and understand cuz i dont know much...

 

Their support link or how to contact them is nowhere.

 

Your answer is not helpfull at all tho, more like an advertisement for your "paid help"