How to make vendor name clickable in dawn theme?

[picky666]

Please help 

I want to make vendor names on product page clickable, so that when we click on the name it will go to the vendor's collection page. 

[dmwwebartisan]

@picky666 

Please share your collection page URL .

Thanks!

[picky666]

@dmwwebartisan 

https://iosoiskinlab.com/collections/the-skin-kitchen

thanks

[dmwwebartisan]

@picky666 

Thanks for url

can you please update 

current vendor code  in  your Sections/product-main.liquid file.

{{ product.vendor }}

Change it to:

{{ product.vendor | link_to_vendor }}

[picky666]

thanks, but i cannot find "product-main.liquid"  but find "main-product.liquid" 

There is only a similar line

{{ product.vendor | json }}

I tired to change it to

{{ product.vendor | link_to_vendor }}

 but it does not work

anyone using Dawn theme know why?

[dmwwebartisan · Accepted solution]

@picky666 

find following code to your SEctions/"main-product.liquid" file

  {%- assign product_form_id = 'product-form-' | append: section.id -%}

After add this line 

<p class="product__text caption-with-letter-spacing"> {{ product.vendor | link_to_vendor }}</p>

after check your product page 

Thanks!

[picky666]

@dmwwebartisan 

thanks! it works now.

BTW, any way to change the hyperlink text color and remove the underline?

[dmwwebartisan]

@picky666 

add i provided code. i will check and send css code for you.

Thanks!

[picky666]

@dmwwebartisan 

Thanks again, I just published the theme with your provided code. Please check.

[dmwwebartisan]

@picky666 

Please add the following code at the bottom of your assets/base.css file. 

.product__info-wrapper .product__text a{text-decoration:none;  color: rgba(var(--color-foreground),.75) !important;}

Thanks!

[picky666]

@dmwwebartisan 

Thanks a lot!

[dmwwebartisan]

@picky666 

If helpful then please Like Solution.

[Alia_Makarem]

@dmwwebartisan 

Thank you for the solution, worked great.
Is there a way though to remove the popup when we hover over, as shown below?

Thanks,
Alia

[angiehk123]

worked like a charm, thank you thank you!!!!!!!

[LiLi-5]

Thank you so much, I used this and it worked like magic! 

Can you please send again instruction on how to change this hyperlink color?

Many thanks!

[brightwebs]

This is great @dmwwebartisan , thank you for the tip! I originally had the vendor name as a dynamic text block, so I removed that text and replaced it with the clickable link as advised.

[SAlawadhi]

Hello, 

thanks for the solution. We are trying to achieve the same thing. when i use your solution, it works, but it now shows the vendor name twice (on top of each other), one clickable and the other as before. 

also, i would like to make the vendor name font a little larger and a certain color 

store: 

bforbaby.sa

[renniewood]

I'm experiencing the same problem with double vendor names. Has anyone found the solution?

[FurtherRecords]

Go to customize theme. Products. Default Product. Template. Product Information. Text. Click the eyeball next to Text.

[Alia_Makarem]

@SAlawadhi 

From theme editor - product page - product information, hide the "Text" field for the vendor, just above the "Title"

[Scotch_Eggs]

Thanks for sharing this fix! I've got the Vendor link to work, but I need help with styling the link, it currently displays an underlined blue link, but I'd like to make it white and not underlined. Please see attached. 

[dmwwebartisan]

Hey @Scotch_Eggs 

Please share your url.

[Scotch_Eggs]

Hello, thanks for checking. I've unlocked the password so you can see the site temporarily. Vendor link is positioned above product title in blue. https://inverted-audio.store/products/ripatti-twwth-ripatti04

[PLTBSD]

Thank you for this solution. I added both codes to the two different sections. Could you please assist in how to change the colour of the vendor name. I see it was asked a few times, but I don't see a solution. Much appreciated, thank you. 

[Scotch_Eggs]

I hired someone to change the colour of the link for me, it is now working, which you can check and inspect here: https://inverted-audio.store/products/inverted-audio-cap

Go to > section-main-product.css

Paste this in at the end

.brandlink {
color: white;
text-decoration: none;
}

[VeronikaF]

Hello,

I have a Dawn theme.

{{ product.vendor | link_to_vendor }}

Doesnt work for me

and in the:

main-product.liquid

I dont have the this code:

{%- assign product_form_id = 'product-form-' | append: section.id -%}

Anybody has a solution, pls?

Thank you.

Veronika

[Cristina_92]

Hi @VeronikaF !

Could you find a solution to your question?

I used this code to make vendor clickable  ( I have also Dawn theme).

Go to Online Store -> Customize -> Choose any product -> click Add block -> choose Custom liquid. Add this code:

{% if product.vendor.size > 0 %}
<b>Vendor:</b>
      {% for vendor in product.vendor %}
      {% assign vendor_coll = '/collections/all/' | append: vendor %}
        {{ vendor | link_to_vendor}}{% unless forloop.last %},{% endunless %}
   {% endfor %}
{% endif %}

I hope it'll work for you.

[VeronikaF]

Haha, Great. It works great. Dont you also know how to change a color of that clickable link? It is blue and I would like to have the link Black or grey,

Thank you so much again!!

Veronika

[Cristina_92]

Hi @VeronikaF !

Paste this liquid code instead of the previous one:

{% if product.vendor.size > 0 %}
<b>Vendor:</b>
      {% for vendor in product.vendor %}
      {% assign vendor_coll = '/collections/all/' | append: vendor %}
        {{ vendor | link_to_vendor :class :'vendor-link'}}{% unless forloop.last %},{% endunless %}
   {% endfor %}
 {% endif %}
<style>.vendor-link { color: grey;}</style>

[VeronikaF]

You are absolutely awesome. It looks amazing. Thank you so much.

https://vesimidesign.com/products/worker-bee-writing-desk-by-mackenzie-childs

[VeronikaFF]

Hello Cristina,

you helped me a lot last time.

I am using a new websites, unfortunately, tried everything and even this product "custom liquid" code doesnt work now.

Dont you have an idea what could work?

the websites: https://waterfall-bathroom.com/

[Cristina_92]

Hello @VeronikaFF ,

Let's try to make it work.

Please insert this liquid code:

{% if product.vendor != '' %}
<b>Vendor:</b>
  {{ product.vendor | link_to_vendor :class :'vendor-link'}}
{% endif %}
<style>.vendor-link { color: gray;
}</style>

[VeronikaFF]

I am so sorry Cristina,

I just found it works...

I am stupid, just have to delete the original "text" of vendor and move the liquid code up...:D

omg, sorry.

Thanks so much again.

Veronika

[Cristina_92]

Hi Veronika,

Sorry for the late reply, but I’m happy that you could find the solution;)

Cristina.

[VeronikaFF]

Hello Cristina,

thank you for your quick reply.

I tries it, but does not work....nothing changed