How can I replace product vendor names with logos on my product page?

[bennyhenders]

Hi

Pls can u provide a solution to replacing product vendor name with product vendor logo (attached example below)

my store:

URL: appliancesclub.com 

Theme: Warehouse 

wanted result:

current:

 

 

Cheers

[Bhaskar_Sonowal]

You can use metafields to display custom content on your product page.

1. First create a product metafield with type "file".   Example : "product.metafields.custom.vendor_logo"

2. In the admin add the vendor logo image in the metafield section for the product you want to add.

3. Display the logo in the storefront by using custom liquid.
      -- Customize theme.
      -- Open the product.

      -- Add Custom liquid. Inside custom liquid add the following code:

{% if product.metafields.custom.vendor_logo != blank %}

{% product.metafields.custom.vendor_logo.value  | image_url: width: '100px' %}

Change the width and position of the image according to your need.
   

[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 Snippet

1. Go to Online Store > Themes > Edit code.

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

3. 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