How to make vendor name clickable in dawn theme?

Solved

How to make vendor name clickable in dawn theme?

picky666
Tourist
10 0 8

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. 

 

 

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12321 2551 3715

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 34 (34)

dmwwebartisan
Shopify Partner
12321 2551 3715

@picky666 

Please share your collection page URL .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12321 2551 3715

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
picky666
Tourist
10 0 8

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
Shopify Partner
12321 2551 3715

This is an 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
picky666
Tourist
10 0 8

@dmwwebartisan 

thanks! it works now.

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

dmwwebartisan
Shopify Partner
12321 2551 3715

@picky666 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
picky666
Tourist
10 0 8

@dmwwebartisan 

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

 

dmwwebartisan
Shopify Partner
12321 2551 3715

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
picky666
Tourist
10 0 8

@dmwwebartisan 

 

Thanks a lot!

dmwwebartisan
Shopify Partner
12321 2551 3715

@picky666 

If helpful then please Like Solution.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Alia_Makarem
Shopify Partner
63 0 18

@dmwwebartisan 

Thank you for the solution, worked great.
Is there a way though to remove the popup when we hover over, as shown below?
WhatsApp Image 2023-02-21 at 13.51.47.jpeg

 

Thanks,
Alia

angiehk123
Tourist
8 0 0

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

LiLi-5
Excursionist
22 0 10

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
Shopify Partner
6 0 3

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
Excursionist
16 0 12

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
Tourist
7 0 3

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

FurtherRecords
Excursionist
31 1 14

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

Alia_Makarem
Shopify Partner
63 0 18

@SAlawadhi 

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

Scotch_Eggs
New Member
10 0 0

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
Shopify Partner
12321 2551 3715

Hey @Scotch_Eggs 

Please share your url.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Scotch_Eggs
New Member
10 0 0

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
Tourist
3 0 0

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
New Member
10 0 0

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
Tourist
8 0 2

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
Shopify Partner
57 1 18

Hi @VeronikaF !

 

Could you find a solution to your question?vendor.png

 

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.

ISBNExpress: Books Importer - import books by ISBN into your bookstore.
Boxi: Bundle Box Builder - create custom box builders.
VeronikaF
Tourist
8 0 2

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
Shopify Partner
57 1 18

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>

 

ISBNExpress: Books Importer - import books by ISBN into your bookstore.
Boxi: Bundle Box Builder - create custom box builders.
VeronikaF
Tourist
8 0 2

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

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

 

 

VeronikaFF
Tourist
3 0 1

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
Shopify Partner
57 1 18

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>

 

ISBNExpress: Books Importer - import books by ISBN into your bookstore.
Boxi: Bundle Box Builder - create custom box builders.
VeronikaFF
Tourist
3 0 1

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
Shopify Partner
57 1 18

Hi Veronika,

 

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


Cristina.

ISBNExpress: Books Importer - import books by ISBN into your bookstore.
Boxi: Bundle Box Builder - create custom box builders.
VeronikaFF
Tourist
3 0 1

Hello Cristina,

 

thank you for your quick reply.

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