The other day, we had a request for replacing Shopify’s default vendor text with a little logo on product pages – but only for specific vendors. Since I figured this may be worth sharing, here’s a quick summary/tutorial of how I went about this;
(1) Upload the designated logo to your Shopify store.
(2) Open the product page within Shopify’s theme editor, identify the vendor text block and add a new block of the type „Custom Liquid“ right below it.
(3) Insert the following Liquid snippet into the new block:
{% if product.vendor == "Winkelwagen" %}
<img src="https://cdn.shopify.com/..." alt="Logo {{ product.vendor }}">
{% endif %}In this snippet, we’re simply checking if the vendor value equals the name of the vendor we’d like to use our new logo for (instead of the default text), and if it does, we’re inserting a fairly standard img-Element with our logo’s URL.
For a reference of the variables generally available within liquid snippets, I found this Shopify Liquid Cheat Sheet to be very helpful.
(4) Go open a product (front-)page and copy the default vendor text block’s HTML.
(5) Back inside the theme editor, paste the HTML into your custom liquid block and – replacing any hardcoded vendor names with variables – add an ELSE-Statement to display it whenever the logo does not;
{% if product.vendor == "Winkelwagen" %}
<img src="https://cdn.shopify.com/..." alt="Logo {{ product.vendor }}">
{% else %}
<p class="product__text">{{ product.vendor }}</p>
{% endif %}(6) Hide the original vendor text block.
(7) Be happy! ;D