I have been trying to edit a collection page for my shopify store. But the products appeared just one by one.
So if I have a collection for - All face care products then all products in this collection appear.
But I wanted the header of the subcollections/subcategories header & description to also appear in a same collection page. So suppose I have below subcategories to all face care:
cleansers & toners
serums & treatments
then the collections page of All face care should look like below:
Power Tools have a Filter Menu app. In their app, they’ve provided the best code I’ve seen to optimize the SEO of tagged collections (what you refer to as subcategories.) The title and meta description are other elements you should consider.
They do this through metafields and assign primary collections. The following code is theirs and won’t work out of the box for you. I can highly recommend their app for improving your navigation:
This will create a snippet that you can use in your H1 and title tags, that can allow a more natural reading of the collection title and filters. It does require some modification of the liquid code to install - you will at a minimum need to add {% include 'pt-collection-title' %} to your collection.liquid and theme.liquid
Create a new asset with the name pt-collection-title.liquid in the folder Snippets.
Paste the following in:
{%- capture collection_title -%}
{%- comment -%} Use this or similar for the title element:
{%- if template == '404' -%}
{%- elsif template contains 'collection' and current_tags -%}
{%- else -%}
{%- endif -%}
{%- endcomment -%}
{%- assign default_product_title = 'All' -%}
{%- assign filter_handles_ordered = '' -%}
{%- for menu_header in shop.metafields.pt_filter_menu reversed -%}
{%- capture filter_handles_ordered -%}{{filter_handles_ordered }}|{{ menu_header.first }}|{%- endcapture -%}
{%- endfor -%}
{%- comment -%} By default the order is the reverse order of your filter menu filters, as this how most titles read the best - most specific to least specific. You can remove the above for-loop and define your own order using the 'filter_handles_ordered' variable. Print it out below to see the current values. It is delimited by double pipes || with leading and trailing single pipes {%- endcomment -%}
{%- comment -%}{{ filter_handles_ordered }}{%- endcomment -%}
{%- assign primary_sort_collection = collection -%}
{%- if collection.metafields.sort_primary.collection_handle -%}
{%- assign primary_sort_collection = collections[collection.metafields.sort_primary.collection_handle] -%}
{%- endif -%}
{%- assign filter_header = nil -%}
{%- assign seen_tags = nil -%}
{%- assign non_filter_collection = true -%}
{%- assign ordered_header_list = filter_handles_ordered | split: '||' -%}
{%- for ordered_header in ordered_header_list -%}
{%- assign ordered_header_handle = ordered_header | remove: '|' -%}
{%- for menu_header in shop.metafields.pt_filter_menu -%}
{%- assign current_selected = '|' -%}
{%- assign menu_items = menu_header.last | split: ',' -%}
{%- for menu_item in menu_items -%}
{%- assign filter_collection = collections[menu_item] -%}
{%- if current_tags contains menu_item or collection.handle == menu_item -%}
{%- assign seen_tags = seen_tags | append: '##' | append: menu_item -%}
{%- if collection.handle == menu_item -%}
{%- assign non_filter_collection = false -%}
{%- endif -%}
{%- if filter_handles_ordered contains menu_header.first -%}
{%- if ordered_header_handle == menu_header.first -%}
{% capture filter_header %}{{ filter_header }} {{ filter_collection.title }}{% endcapture %}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endfor -%}
{%- endfor -%}
{%- for tag in current_tags -%}
{%- assign tag_comma = '##' | append: tag -%}
{%- unless seen_tags contains tag_comma -%}
{%- assign filter_collection = collections[tag] -%}
{%- if filter_collection -%}
{% capture filter_header %}{{ filter_header }} {{ filter_collection.title }}{% endcapture %}
{%- else -%}
{% capture filter_header %}{{ filter_header }} {{ tag | replace: '-', ' ' | capitalize }}{% endcapture %}
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{% capture header_formatted %}{{ filter_header }}{% if non_filter_collection and primary_sort_collection.handle != 'all' %} {{ collection.title }}{% endif %}{% endcapture %}
{%- if header_formatted == '' -%}{{ default_product_title }}{%- else -%}{{ header_formatted }}{%- endif -%}
{%- endcapture -%}{{ collection_title | strip_newlines | strip }}
