All things Shopify and commerce
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.
Thanks
Solved! Go to the solution
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:
...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.
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:
...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.
@malalta Thanks for the help. Let me try my hands on it. Will let you know. Appreciate it!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024