CODEWITHSUNDEEP
shopify
tyteen4a03
tyteen4a03

Reputation: 1932

Shopify sort products on front page

I found this code that allows users to sort the products list on the collections page. I tried the code on the front page but when I click the dropdown, it redirects me to a new page but the page still used the same order as before.

Is there something I'm missing? How can I bring sorting to the front page?

Upvotes: 1

Views: 1299

Answers (1)

Meg
Meg

Reputation: 1472

From what I've seen so far, you can only perform sorting if you're on a collections page. If you are willing to forgo the standard browser dropdown functionality, this should work for you (note that you'll need to use js/css to make it a dropdown):

<div class="form-horizontal sort-large">
  <p>Sort By</p>
  <a href="" id="SortBtn">{{ 'collections.sorting.title' | t }}</a>
  <ul id="SortList">
    <li><a href="{% if template == 'index' %}collections/all/{% endif %}?sort_by=manual">{{ 'collections.sorting.featured' | t }}</a></li>
    <li><a href="{% if template == 'index' %}collections/all/{% endif %}?sort_by=best-selling">{{ 'collections.sorting.best_selling' | t }}</a></li>
    <li><a href="{% if template == 'index' %}collections/all/{% endif %}?sort_by=title-ascending">{{ 'collections.sorting.az' | t }}</a></li>
    <li><a href="{% if template == 'index' %}collections/all/{% endif %}?sort_by=title-descending">{{ 'collections.sorting.za' | t }}</a></li>
    <li><a href="{% if template == 'index' %}collections/all/{% endif %}?sort_by=price-ascending">{{ 'collections.sorting.price_ascending' | t }}</a></li>
    <li><a href="{% if template == 'index' %}collections/all/{% endif %}?sort_by=price-descending">{{ 'collections.sorting.price_descending' | t }}</a></li>
    <li><a href="{% if template == 'index' %}collections/all/{% endif %}?sort_by=created-descending">{{ 'collections.sorting.date_descending' | t }}</a></li>
    <li><a href="{% if template == 'index' %}collections/all/{% endif %}?sort_by=created-ascending">{{ 'collections.sorting.date_ascending' | t }}</a></li>
  </ul>
</div>

Basically all it does is to link to the sorted collections page (whether you're on the Frontpage or the Collections page). If you need to link to a specific collection and then sort within that collection, you'll likely need a different approach.

Upvotes: 1

Related Questions