0

I want to display colors and sizes separately on frontend to filter the collection in shopify. But when I do, it shows color and size in same variable with slash in it.

Here is the image

enter image description here

Here is the code that i try

      <div class="size-filter clearfix mt-4">
         <h4>SIZE</h4>
         <hr>
         {% assign available_sizes = '' %}
         {% for product in collections.frontpage.products limit: limit %}
         {% for variant in product.variants %}
         {% if variant.title != 'Default Title' %}
         {% unless available_sizes contains variant.title %}
         {% if  variant.available %}
         {% capture available_sizes %}{{ available_sizes }}, {{ variant.title }}{% endcapture %}
         <div class="form-check">
            <input class="form-check-input coll-filter" type="checkbox" value="{{variant.title}}" id=""
            {% if current_tags contains tag %} checked  {%endif%}>
            <label class="form-check-label" for="">
            {{variant.title}}
            </label>
         </div>
         {% endif %}
         {% endunless %}
         {% endif %}
         {% endfor %}
         {% endfor %}
      </div>

Please help me to fix this error, i stuck here from last 3 days.

Error Solved but got this output:

enter image description here

1 Answer 1

0

You can do use the options_with_values object:

{% for product_option in product.options_with_values %}
  <h5>{{ product_option.name }}</h5>
  {% for value in product_option.values %}
    <input id="{{product_option|handle}}-{{value|handle}}" type="checkbox" value="{{ value }}" />
    <label for="{{product_option|handle}}-{{value|handle}}"></label>
  {% endfor %}
{% endfor %}

But you will need to write some Javascript in order to tie it to the main select which holds the variants ids.

6
  • This code is not display anything, i want to show this in collection page
    – user11988937
    Commented Feb 14, 2020 at 7:12
  • 1
    @RobinSingh whell you need to be in the product loop then {% for product in collection.products %} the code will work here {% endfor %}
    – drip
    Commented Feb 14, 2020 at 7:17
  • One more question, it display size multiple times, how can i prevent that
    – user11988937
    Commented Feb 14, 2020 at 7:20
  • @RobinSingh if you are referring to <h5>{{ product_option.name }}</h5> it should be displaying only a single time per option. Meaning that it should show Size -> all options under it and then Color -> all the options under it. I don't know what do you mean that it shows size multiply times.
    – drip
    Commented Feb 14, 2020 at 7:25
  • please check the image above
    – user11988937
    Commented Feb 14, 2020 at 7:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.