Vendor Logo on Product Page

Highlighted
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
Highlighted
Shopify Partner
1366 24 246

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
Highlighted
Tourist
9 0 6

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
Highlighted
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
Highlighted
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
Highlighted
Tourist
9 0 6

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
Highlighted
New Member
1 0 0

I came up with two solutions:

Images are saved in Assets

1. On a vendor collection page

{% assign vendorLogo = collection.url | split: "/" %}
{{ vendorLogo.last }}
f.e.
{% assign vendorLogoFile = vendorLogo.last | append: ".jpg" %}
{{  vendorLogoFile | asset_url | img_tag: 'Logo' }}

This will take the last part of the collection url f.e. collections/vendor1  and return "vendor1" 
You could now use this to connect to your image file "vendor1.jpg" 

2. On a product page:

{% assign vendorHandle = product.vendor | handle %}
{% assign vendorLogo = collections[vendorHandle].url  | split: "/"  %}
{% vendorLogo.last %}
 

for the rest see above

 

This worked for me. You should run some if/else to not show empty images. 

0 Likes