How to Display Vendor logo in Shopify

how to display vendor-specific images in Shopify using Liquid.

📌 Requirements:

  • The image file must be uploaded to Shopify Files (Settings > Files).
  • The file name should follow this format:

    vendor_{vendor-name}.png
  • Shopify automatically converts vendor names using the handle filter, meaning:
    • Spaces become -
    • Special characters are removed
    • Everything is lowercase

đŸ”č Examples:

Vendor Name Shopify Handle Correct File Name
Pahlén pahlen vendor_pahlen.png
Gullberg & Jansson gullberg-jansson vendor_gullberg-jansson.png
Welldana welldana vendor_welldana.png

đŸ’» Basic Code (Without Link or Styling)

This will display the vendor image dynamically:

liquid:
<img src="{{ 'vendor_' | append: product.vendor | handle | append: '.png' | file_url }}" alt="{{ product.vendor }}" width="135" height="auto">

đŸ”č The image loads based on the product.vendor value in Shopify.


🔗 Clickable Image (Links to Vendor Collection)

If you want the image to be clickable and lead to the vendor's collection page, use this:

liquid:
<a href="/collections/{{ product.vendor | handle }}"> <img src="{{ 'vendor_' | append: product.vendor | handle | append: '.png' | file_url }}" alt="{{ product.vendor }}" width="135" height="auto" style="margin-bottom: -20px;"> </a>

✔ Automatically links to the vendor’s collection page!
✔ Negative margin (-20px) to adjust spacing.


⚡ Bonus: Add a Fallback Image

Want a default image if the vendor’s image is missing? Use this:

liquid:
<img src="{{ 'vendor_' | append: product.vendor | handle | append: '.png' | file_url }}" onerror="this.onerror=null;this.src='{{ 'default-vendor.png' | file_url }}';" alt="{{ product.vendor }}" width="135" height="auto">

✔ If the vendor image is missing, Shopify will load default-vendor.png.

#Shopify #LiquidCode #VendorImages #ShopifyDevelopment #Ecommerce