Shopify Debut add dropdown filter of collections

motiv
Shopify Partner
17 0 7

Hi,

I am using the debut theme and I wanted to add a filter dropdown that shows all the collections and filters according to it.

Is this possible?

 

Also, a little bit more complex, but using the new metafields, is it possible to filter products with that?

Thanks!

Replies 4 (4)

LitExtension
Shopify Partner
4860 1001 1128

You can refer https://shopify.dev/api/liquid/objects/filter
Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
motiv
Shopify Partner
17 0 7

Hmm unfortunately not. A little bit above my knowledge level.

I'm just looking to add additional filter options on my page.

Regarding listing the collections, I figured I would need to pull all the collections, list them with their relevant URL. Won't exactly be a filter, rather more of a menu, but it could work.

 

Then the metafields part is a little more complex. No idea on that aspect.

motiv
Shopify Partner
17 0 7

This is what I was thinking. I'm able to populate the dropdown fine, but I don't know how to initiate the URLs.

 

{% if section.settings.menu != blank %}
                  <div class="filters-toolbar__item-child">
                    <label class="filters-toolbar__label select-label" for="FilterCollections">Collections</label>
                    <div class="filters-toolbar__input-wrapper select-group">
                      <select class="filters-toolbar__input hidden" name="FilterCollections" id="FilterCollections" aria-describedby="a11y-refresh-page-message a11y-selection-message">
                        {% for link in linklists[section.settings.menu].links %}
                          {%- assign new_url = link.url -%}
                          <option value="new_url">{{ link.title | escape}}</option>
                        {% endfor %}
                      </select>
                      {% include 'icon-chevron-down' %}
                    </div>
                  </div>
              {% endif %}
motiv
Shopify Partner
17 0 7

UPDATE:

I got it to work like this but I guess I need to modify also theme.js. Will update again.

 

              {% if section.settings.menu != blank %}
                  <div class="filters-toolbar__item-child">
                    <label class="filters-toolbar__label select-label" for="FilterCollections">Collections</label>
                    <div class="filters-toolbar__input-wrapper select-group">
                      <select class="filters-toolbar__input hidden" name="FilterCollections" id="FilterCollections" aria-describedby="a11y-refresh-page-message a11y-selection-message">
                        {% for link in linklists[section.settings.menu].links %}
                          <option value="{{ link.url }}">{{ link.title | escape}}</option>
                        {% endfor %}
                      </select>
                      {% include 'icon-chevron-down' %}
                    </div>
                  </div>
              {% endif %}