Vendor Logo on Product Page

New Member
1 0 0

Hi!

So, I want to replace the vendor name on my products and replace it with a logo that can be linked to the vendor page/collection. Does anyone know if this is already possible and I'm just not seeing where to go or would I have to get a developer?

 

Internet Marketing & eCommerce, CAP Fleet Upfitters
0 Likes
Shopify Partner
1346 22 208

There are few ways to do that, can be also done in CSS using pseudo elements but without beeing able to see your site you can try a Liquid solution.

{% if product.vendor == 'Some Vendor' %}
  <a href="your link to vendor">
    <img src="{{ 'Some-Vendor.png' | asset_img_url: 'small' }}">
  </a>
{% elsif product.vendor == 'Another Vendor' %}
  <a href="your link to another vendor">
    <img src="{{ 'Another-Vendor.png' | asset_img_url: 'small' }}">
  </a>
{% endif %}}

This may get messy if you have lots of vendors. 

Another option would be to use the CSS pseudo elements and add the image, as a background-image over the link: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

 

https://sections.design tips, tricks & Shopify sections
1 Like
New Member
5 0 0

Hi Team,

I'm having difficulties beginning with this. I want to add a vendors logo to a product, so say if we go to a page: https://vacuumdoctor.com.au/products/cfm-s2-hazardous-dust-version-as-standard-60335-2-69

We want to add the logo to where the NilfiskCFM is at the top of the item, and I see your bit of liquid editing above, but I've no idea where we go to get into that editor, in what section. "Product" seems natural, but the only place I can see to edit is "On-Line Store" "Edit Themes" and then "Edit HTML/CSS"

We're using a "Classic" theme.

Do I upload my image into files?

Your help will be greatly appreciated.

Kind regards, Andy

0 Likes
Shopify Partner
18 0 2

product-template.liquid 

Shows        

  {% if settings.product_vendor_enable %}
  <p class="product-single__vendor">{{ product.vendor }}</p>

Add this instead of <p class="product-single__vendor">{{ product.vendor }}</p> :

{% assign coll_handle = product.vendor | handleize %} <a href="{{ collections[coll_handle].url }}"> {{ collections[coll_handle].image | collection_img_url: 'small' | img_tag }} </a>

Janus
1 Like
New Member
1 0 0

Thanks for code, its working but where i can upload image, unable to find option


@Janus__-_Brands wrote:

product-template.liquid 

Shows        

  {% if settings.product_vendor_enable %}
  <p class="product-single__vendor">{{ product.vendor }}</p>

Add this instead of <p class="product-single__vendor">{{ product.vendor }}</p> :

{% assign coll_handle = product.vendor | handleize %} <a href="{{ collections[coll_handle].url }}"> {{ collections[coll_handle].image | collection_img_url: 'small' | img_tag }} </a> 

0 Likes
New Member
5 0 0

Thanks Janus, I didn't realise I forgot to thank you! - I had to get extra help with your reply, because it didn't work for me, off the bat, however I was done within the day!

 

Thanks, Andy

0 Likes