A user wants to create a “DESIGNERS” section on their Shopify store that displays clickable designer tags with product counts, similar to an example site they provided.
Initial Solutions Offered:
Core Challenge Identified:
The user stores designer names as product tags rather than collections or the vendor field. This creates two problems:
Recommended Solution:
shop.vendors and links to corresponding collections, displaying product countsCurrent Status:
The user created a “Designer” collection with main brands but still needs to implement the vendor-based solution for full functionality. A working code example was provided that displays vendors as clickable pills with product counts.
I’d like to add a section to my website with a title at the top that says ‘DESIGNERS,’ where only
the designer tags from my site are displayed and clickable. Is that possible? Here’s an example: Thanks!
url example: https://treasuresofnewyorkcity.com/
my url: www.voodoo-warehouse.com
You can create a new Liquid file under the “sections” folder of your theme.
Name the file “collection-list-number.liquid”, then paste the code below and save it.
<ul class="collection-list-number">
{% for collection in section.settings.collections %}
{% if collection != blank %}
<li>
<a href="{{ collection.url }}">
{{ collection.title }} <sup>{{ collection.products_count }}</sup>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% schema %}
{
"name": "Collections List count",
"settings": [
{
"type": "collection_list",
"id": "collections",
"label": "Collections to show"
}
],
"presets": [
{
"name": "Collection list count"
}
]
}
{% endschema %}
{%- style -%}
.collection-list-number {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.collection-list-number li {
margin-right: 12px;
}
.collection-list-number a {
text-decoration: none;
color: inherit;
text-transform: uppercase;
}
.collection-list-number sup {
font-size: 0.8em;
color: #666;
margin-left: 3px;
}
{%- endstyle -%}
After that, please add the “Collections List count” section in your theme customizer and select the collections you want to display.
Best regards,
Dan from Ryviu: Product Reviews App.
Hi @voodoowww123,
This is possible, you just need to add a condition so that when a customer logs in with the tag ‘designer’, it will display the link ‘DESIGNERS’ in the header, and only ‘designers’ can access this page. You can refer to the following code:
{% if customer.tags contains 'designer' %}
Show link
{% endif %}
Hope it is clear to you
Ideally, use designer name as product vendor property instead of your website name.
Currently, you have designer name assigned as a tag, but there is no way to automatically tell which of the product tags is a designer name.
That’s why it is kinda difficult to suggest anything easy and good.
If you have vendor fields assigned, then it would be easy to get a list of vendors, also Shopify has built-in vendor collections, so it would be easy to implement.
Hi @voodoowww123 ,
For this you need to create a new section.
To create this section, follow these steps:
collection-list-number.liquid.<div class="collection-list-counts">
{% for collection in collections %}
{% if collection.all_products_count > 0 %}
<a href="{{ collection.url }}" class="collection-item">
{{ collection.title }} <sup>{{ collection.all_products_count }}</sup>
</a>
{% endif %}
{% endfor %}
</div>
{% schema %}
{
"name": "Collection List PD Count",
"settings": [
{
"type": "header",
"content": "All Collections with Product Count"
}
],
"presets": [
{
"name": "Collection List PD Count"
}
]
}
{% endschema %}
<style>
.collection-list-counts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
font-size: 16px;
font-weight: 600;
}
.collection-list-counts .collection-item {
text-decoration: none;
color: black;
}
.collection-list-counts .collection-item sup {
font-size: 12px;
}
</style>
This is perfect but I don’t want the collections, instead I only want the tags to appear because that’s where I have all the brands of my store. In that case, how would it be?
You want to list tags instead of collections, showing the number of products for each tag. Shopify doesn’t have a direct loop over all tags globally in Liquid, but you can do it by looping through all products, collecting tags, and counting occurrences.
The only way is doing it manually? Do you know any app or similar where I can do that?
Of course you can loop over, say all tags on collection all. Couple of problems – 1) you can’t tell which tags are designer tags, unless you have a list designer tags somewhere; and 2) you can’t tell how many products bear this tag.
Okay. I created a collection called “Designer” with the main brands that i want to have . How can I proceed next?
The point is, say your Versace Black Pants have 2 tags – “Versace” and “XS”.
How code can tell which of them is designer name and which is not?
What other tag you may have?
The thing is, I created a collection with specific tags, so the size tags aren’t included in that collection. With that in mind, and considering that I can use this collection, is it possible to include only the tags that appear in it? (maybe I’m explaining myself so bad sorry)
Not quite – Automatic collection condition may include only some tags, but products in collection will still have all their tags regardless.
And collection object has a list of all tags available on products in this collection.
Okay. So what would be the easiest fix for it?
If you want to show number of products for each designer, you’d need to have collections created.
I know that you have more than 1000 products, but how many designers you have?
Create automatic collections based on designer tag.
Or can be automated with Flow.
Ideally, as I said, also assign product Vendor to be the designer – this will help as well. Easy with bulk product operations in Admin – filter products by tag, select all and assign vendor. Or can use Flow again.
Then, the code to output the list can be pretty simple.
Like in this example https://shopify.dev/docs/api/liquid/objects/shop#shop-vendors
<div class=page-width>
{% for vendor in shop.vendors %}
{% assign v_handle = vendor | handle %}
{% assign v_collection = collections[v_handle] %}
{% if v_collection.empty? %}
{{ vendor | link_to_vendor: class: 'vendor' }}
{% else %}
{% capture text %}
{{ v_collection.title }}({{v_collection.all_products_count}})
{% endcapture%}
{{ text | link_to: v_collection.url, class: 'vendor' }}
{% endif %}
{% endfor %}
<style>
.vendor {
display: inline-block;
padding: 0 0.75rem;
border: 1px solid silver;
border-radius: 2rem;
text-decoration: none;
margin: 0 0.5rem 0.5rem 0;
}
</style>
</div>
If there is a collection with the same title as vendor, it outputs the link to this collection (with total number of products there), or simply link to the vendor pseudo-collection.
This is how it looks in my test store:
