Sort products on tag pages (collection page+product tag)

Solved
Kashif91
Tourist
23 0 1

Hi @malalta , we are trying to fix the Product Sorting on our store front end for our tag pages. We have setup our collection pages in such a way, on choosing any collection, by default 'men' product tag gets applied as a filter. Here's the link to a collection page for better understanding. 

The challenge we are facing is with our default product Sort. Currently on selecting any values in Sort, it sorts the products on the collection page rather than sorting it on the tag page and returns result with products sorted on collection page similar to link.

Please help us fix this issue with relevant solution as we are looking to sort the products on our tag pages for our collections.

Kashif91_0-1614270209697.png

 

Thanks

 

0 Likes
malalta
Shopify Partner
23 5 7

This is an accepted solution.

When you're on a collection page, including a collection filtered by a tag, you can sort the items on it via a "sort_by" query parameter in the URL. For example:

 

/collections/[COLLECTION_NAME]?sort_by=[SORT_METHOD]
/collections/[COLLECTION_NAME]/[TAG_FILTER]?sort_by=[SORT_METHOD]

 

 The SORT_METHOD can be one of:

  • manual
  • price-ascending
  • price-descending
  • title-ascending
  • title-descending
  • created-ascending
  • created-descending
  • best-selling

...so then, if I'm understanding what you're after you could sort your "paint-splatter" collection, filtered by your "men" tag, and sorted by price low to high ("price-ascending") with the following URL:

https://thefunkydelicstore.com/collections/paint-splatter/men?sort_by=price-ascending

On your current store theme the sort dropdown is a <ul> where each <li> tag contains a link with the appropriate sort_by query parameter included - however it uses your collection URL (first version at the top of this post) not a URL with the tag included (second version).

To change this, you'll need to find the liquid template that has the sort widget in it. Try starting in "templates/collection.liquid" and follow it to the appropriate "sections/" or "snippets/" files.

As a guess based on your HTML, it'll probably look something like this:

 

<ul id="sort-by" class="styled-select coll-filter" style="display: none;">
{% for option in collection.sort_options %}
  <li class="{{ option.value }}">
    <a href="/collections/{{ collection.handle }}?sort_by={{ option.value }}">
        {{ option.name }}
    </a>
  </li>
{% endfor %}
</ul>

 

 You'll want to include some liquid code that updates the URL to contain the tag(s) your current page is filtered by:

 

<!-- Get the tags the current page is filtered by and save to a string.
     Note: a collection can be filtered by multiple tags if you seperate them
       with a "+" in the URL. Eg. "/collections/my-collection/tag1+tag2/"
     In the liquid below I'm using "{%-" and "-%}" to remove unwanted whitespace.
-->
{%- capture tags_for_url -%}
  {%- for tag in current_tags -%}
    {{- tag -}}{%- unless forloop.last %}+{% endunless -%}
  {%- endfor -%}
{%- endcapture -%}

<ul id="sort-by" class="styled-select coll-filter" style="display: none;">
{% for option in collection.sort_options %}
  <li class="{{ option.value }}">
    <!-- Update URL to include tags filtering the current page -->
    <a href="/collections/{{ collection.handle }}/{{ tags_for_url }}?sort_by={{ option.value }}">
        {{ option.name }}
    </a>
  </li>
{% endfor %}
</ul>

 

This is untested and could (probably!) include some typos, but it should be enough to get you started.

Cheers,
Andrew.

0 Likes
Kashif91
Tourist
23 0 1

@malalta Thanks for the help. Let me try my hands on it. Will let you know. Appreciate it!

0 Likes
Kashif91
Tourist
23 0 1

Hi @malalta, it worked well. Thanks for your help