Re: Vendor link to collection Dawn theme

Solved

How to link vendor to collection in Dawn theme?

IMYOURGIRL
Shopify Partner
51 1 11

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!

Accepted Solutions (2)
Emmanuelle1
Excursionist
24 2 3

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!

View solution in original post

Emmanuelle1
Excursionist
24 2 3

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

 

View solution in original post

Replies 17 (17)

Emmanuelle1
Excursionist
24 2 3

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!

IMYOURGIRL
Shopify Partner
51 1 11

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.

Emmanuelle1
Excursionist
24 2 3

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). 

 

Emmanuelle1
Excursionist
24 2 3

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;}

 

 

 

IMYOURGIRL
Shopify Partner
51 1 11

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 :).

Emmanuelle1
Excursionist
24 2 3

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!

IMYOURGIRL
Shopify Partner
51 1 11

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: 

  • Liquid syntax error (line 647): 'schema' tag must not be nested inside other tags

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!

IMYOURGIRL
Shopify Partner
51 1 11

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?

 

Emmanuelle1
Excursionist
24 2 3

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.

 

Emmanuelle1
Excursionist
24 2 3

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

 

IMYOURGIRL
Shopify Partner
51 1 11

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!

DenisAda
Excursionist
12 0 1

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.

Emmanuelle1
Excursionist
24 2 3

Hi, is your vendor name already under the product name or above?

DenisAda
Excursionist
12 0 1

Hi @Emmanuelle1 , thanks for your reply. Instead of having go to omnipollo collection at the end, I want it to replace the Tax Included. 

Screenshot 2023-12-06 at 11.51.24.png

Emmanuelle1
Excursionist
24 2 3

It's another topic... Too tricky for me!

WBBarber
Visitor
1 0 0

Your code fixed my issue but where in base.css do I add this code to fix the font size?

 

Thank you!

Emmanuelle1
Excursionist
24 2 3

Hi,

add the code to fix the size at the very end of the base.css