Shopify themes, liquid, logos, and UX
Hello!
I could only find an old topic, so hopefully it’s something you guys can help me with. Using Shopify Dawn theme.
My client wants the Vendor showed on product detail page, to be linked to the vendor collection. I’ve created a collection for every brand and made it an automated collection with condition ‘vendor equals x’.
The vendor is showed by all products but non clickable and I don’t see an option in the theme editor. Would be great of someone has experience with this and can guide me :).
ps. I tried 4 issues already to get Design-time because I’m using a free shopify theme but for some reason non of my wishes can be done using design time. Disappointing since they are quit basic I think when you come from Wordpress for example. So I’m not requesting anymore and hopefully the community can help!
Thanks!
Solved! Go to the solution
This is an accepted solution.
You're welcome, it should work on your side...
Update: I've managed the size like this in the base.css, to have the brand's name in the same size as the menu entries:
.product__info-wrapper .product__text a{text-decoration:none; font-size: 14px; color: rgba(var(--color-foreground),.75) !important;}
Let me know!
This is an accepted solution.
ok, so try to add only the first part, save and check a product page to see what happens.
It should automatically generate the second part of the code.
<p class="product__text caption-with-letter-spacing"> <a href="/collections/{{ product.vendor | handleize }}">{{ product.vendor }}</a>
</p
Hello!
Did you finally find a solution? I have exactly the same request from a client, also on Shopify Dawn, but I can't find an answer that matches in these topics...
Thank you by advance!
Hi! Unfortunately not.. When you’ll find it I’d love to know :). You would say this should be a common wish as this is standard function in other CMS.
Hi!
I've found a solution, quite easy and efficient but it's not exactly what I'm looking for... It makes the vendor/brand's link clickable but generates new urls (collections/vendor/designerA) instead of linking back to the brand's original url/collection page... These new pages only show the brand's product without any description... You can try it here : https://community.shopify.com/c/shopify-design/how-to-make-vendor-name-clickable-in-dawn-theme/td-p/...
Still looking forward to fix it. It's native in some other Shopify Themes like Prestige (you can see it in the demo).
Hi again!
1/ copy/paste your main.product.liquid script in a text editor, back up the file and make a copy to make the new version.
2/ find this line:
{%- assign product_form_id = 'product-form-' | append: section.id -%}
3/ under this line, copy/paste this code:
<p class="product__text caption-with-letter-spacing"> <a href="/collections/{{ product.vendor | handleize }}">{{ product.vendor }}</a>
</p
{% if section.settings.display_vendor %}
<p class="vendor">
<span itemprop="brand" class="vendor">
<a href="/collections/{{ product.vendor | handleize }}">{{ product.vendor }}</a>
</span>
Now it works perfectly, I've also added the following code at the very end of the base.css file but I still need to fix up the size of the brand's name at it's a bit smaller than before when static:
.product__info-wrapper .product__text a{text-decoration:none; color: rgba(var(--color-foreground),.75) !important;}
Oooh thank you so much for sharing this with me! I’m going to try it out and let you know if I managed to get it working too :).
This is an accepted solution.
You're welcome, it should work on your side...
Update: I've managed the size like this in the base.css, to have the brand's name in the same size as the menu entries:
.product__info-wrapper .product__text a{text-decoration:none; font-size: 14px; color: rgba(var(--color-foreground),.75) !important;}
Let me know!
Hi there!
I can't add the 2nd part of the code:
{% if section.settings.display_vendor %}
<p class="vendor">
<span itemprop="brand" class="vendor">
<a href="/collections/{{ product.vendor | handleize }}">{{ product.vendor }}</a>
</span>
I'm getting an error message saying:
Can you check if there is something missing:
<p class="product__text caption-with-letter-spacing"> <a href="/collections/{{ product.vendor | handleize }}">{{ product.vendor }}</a>
</p>
{% if section.settings.display_vendor %}
<p class="vendor">
<span itemprop="brand" class="vendor">
<a href="/collections/{{ product.vendor | handleize }}">{{ product.vendor }}</a>
</span>
Thank a lot!
UPDATE:
I got it to work with only the first part.
<p class="product__text caption-with-letter-spacing"> <a href="/collections/{{ product.vendor | handleize }}">{{ product.vendor }}</a></p>
And afterwards I added the CSS you provided. I did had to remove the vendor name in the template, or it was a double name showing.
What am I missing out on when I don;t use the 2nd part of your code?
no you're not missing anything, it will be automatically generated (see my previous answer).
And yes, I forgot to say that you need to empty the vendor line in the product template.
For the text sizing I use a Chrome extension called "what font", it's easy then to adapt the size in pixels.
This is an accepted solution.
ok, so try to add only the first part, save and check a product page to see what happens.
It should automatically generate the second part of the code.
<p class="product__text caption-with-letter-spacing"> <a href="/collections/{{ product.vendor | handleize }}">{{ product.vendor }}</a>
</p
Thank you so much, you’re the best! The first part of the code does the trick and it works perfectly. Hope this will be helpfull to others aswel. Have a great evening!
You are a beast, thanks a lot ! Never find a better idea than your answer but do you think we can put the same process under the name of the product ? Thanks a lot for the help.
Hi, is your vendor name already under the product name or above?
Hi @Emmanuelle1 , thanks for your reply. Instead of having go to omnipollo collection at the end, I want it to replace the Tax Included.
It's another topic... Too tricky for me!
Your code fixed my issue but where in base.css do I add this code to fix the font size?
Thank you!
Hi,
add the code to fix the size at the very end of the base.css
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025