?️ How to Replace Vendor Name with Logo on Product Pages (and Link to Brand Collection)

[GustavOrtheden]

Wanted:

Now:

[ProtoMan44]

@GustavOrtheden ??

[oladunjoye12]

1: Upload Your Brand Logos Correctly

Go to Shopify Admin Content Files

Upload your logos

Very Important: Follow this naming format

All lowercase

Replace spaces with hyphens

Add _logo.png at the end

Example

If the brand is Black Crows → upload it as black-crows logo.png.

2: Create a New Snippet

Go to Online Store Themes Edit Code

Under Snippets, click Add a new snippet

Name it: vendor logo liquid

Paste this code inside

liquid

Copy

Edit

% assign vendor handle = product vendor | handle %

{% assign logo_url = ‘https://cdn.shopify.com/s/files/1/0910/5535/8243/files/’ | append: vendor_handle | append: logo.png’ %

% if collections[vendor handle blank %

% assign vendor url = collections[vendor handle] url %

{% else %}

% assign vendor url = ‘/collections/brands’ | append: vendor handle %

% endif %

a href="{{ vendor url class="vendor link

<img

src=logo url

alt=" product.vendor logo"

class=“vendor-logo”

width=“90”

loading=“lazy”

onerror=“this.style display=‘none’; this insert AdjacentHTML ‘afterend’ span class='vendor-name product vendor span”

3: Replace the Vendor Name in Your Product Template

Open your product template file example: main-product liquid or product info liquid

Find the default vendor line, usually something like:

liquid

Copy

Edit

span class=“product-vendor”> product vendor span

Replace it with:

liquid

Copy

Edit

% render ‘vendor-logo’ %

This way, your store will show the logo if it exists, link to the correct brand collection, and fall back to text if the logo or collection is missing.

Result You’ll Get:

If a logo exists show the brand logo linked to the brand collection

If no logo show the vendor name as text

If no collection link automatically to collections brands your vendor

Extra Tips for Best Results

Make sure your logo images are optimized small size, fast loading

Keep the logos around 90 120px wide for a clean look

Add a little custom CSS if needed to style the vendor logo class

Example:

css

Copy

Edit

.vendor-logo

max-width: 100px;

height: auto;

margin-bottom: 10px

[GustavOrtheden]

There’s a lot of ways to do it, but this is by far the best:

If you want to replace the vendor name on your product page with a logo, and have that logo link to a custom brand collection (like /collections/brands-vendor-name), here’s how you can do it with a simple snippet!

Step 1: Upload Your Logos

Go to Content > Files in your Shopify admin and upload your brand logos using this format:

your-brand-name_logo.png

Use lowercase and replace spaces with hyphens.

For example:> Black Crows → black-crows_logo.png

---

Step 2: Create a Snippet1. Go to Online Store > Themes > Edit code.

1. Under Snippets, click Add a new snippet and name it vendor-logo.liquid.

2. Paste this code:

liquid

{% assign vendor_handle = product.vendor | handle %}
{% assign logo_url = 'https://cdn.shopify.com/s/files/1/0910/5535/8243/files/' | append: vendor_handle | append: '_logo.png' %}

{% if collections[vendor_handle] != blank %}
  {% assign vendor_url = collections[vendor_handle].url %}
{% else %}
  {% assign vendor_url = '/collections/brands-' | append: vendor_handle %}
{% endif %}

<a href="{{ vendor_url }}" class="vendor-link">
  <img
    src="{{ logo_url }}"
    alt="{{ product.vendor }} logo"
    class="vendor-logo"
    width="90"
    loading="lazy"
    onerror="this.style.display='none'; this.insertAdjacentHTML('afterend', '<span class=\'vendor-name\'>{{ product.vendor }}</span>');"
  />
</a>

Step 3: Include the Snippet in Your Product Template

In your product template (e.g., main-product.liquid or product-info.liquid), find where the vendor name is shown, such as:

liquid

<span class="product-vendor">{{ product.vendor | link_to: vendor_url }}</span>

Replace it with:

liquid

{% render 'vendor-logo' %}

This inserts your custom logic and shows the logo with a fallback to the vendor name if the logo doesn’t exist.

Result:- Shows a vendor logo if it exists.

• Links to a brand collection like /collections/brands-your-vendor.

• Falls back to text if the image isn’t found.

• Falls back to vendor link when collection isn’t found.

Let me know if you want help!

Gustav @ Iggy Agency