Using Shopify Product Tags To Display Logos

I've been building a Shopify ecommerce website for a garden centre. The owners wanted to display certain logos alongside their products.

There are any number of solutions for a problem like this. However, in this instance I wanted to make the process for adding the correct logos was as easy as possible, whilst ensuring that should a change of logo or image be required in the future it could be applied to every relevant product with ease.

The solution I implemented makes use of Shopify's 'tags' functionality. Here's a snippet of code - I'll explain what it does in more detail below:

{% if product.tags contains 'TAG' %}
  <img src="{{ 'image.jpg' | asset_url }}" alt="Alt Text" />
{% endif %}

How Does This Work?

Shopify uses a templating framework called Liquid. It makes building dynamic templates for ecommerce websites in the Shopify framework quite straight forward - implementing dynamic content directly into otherwise static HTML pages.

In this instance I'm using an 'if' statement - a conditional statement found in all programming languages. Here the if statement (on line 1) checks to see if the product has the tag of 'TAG'. 'TAG' can be replaced with any tag - so you can imagine how flexible this solution is.

Provided the if statement returns 'true' (i.e. the product does include the tag 'TAG') then line 2 is included within the HTML markup of the page. In this example I've shown an image which is stored in your Shopify theme's Assets folder can be included in the page. But again, this could be anything - text, an external image, a link to another web page etc.

Line 3 of the sample code above ends the if statement. It's vital that this is included - otherwise the rest of the page would be only be displayed if the statement returns 'true', which would cause problems.

Benefits For My Client (And Yours!)

Building dynamic page templates like this can make effectively managing an online shop a far easier process than many people expect. There's no need to add logos manually - my client simply has to 'tag' their products correctly and the logos appear in the right place, every time.

What's more, if the logos change I can simply switch a single graphic file within the theme and the entire website is updated. There's no need to go through each product individually which could be very laborious.