how to display vendor-specific images in Shopify using Liquid.
đ Requirements:
vendor_{vendor-name}.png
-
đč 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 |
This will display the vendor image dynamically:
<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.
If you want the image to be clickable and lead to the vendor's collection page, use this:
<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.
Want a default image if the vendorâs image is missing? Use this:
<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
Tack för att du prenumererar!
Denna adress Àr redan registrerad!