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.
