Shopify Tutorial: The product.liquid template

So far in our Shopify tutorial series we've looked at a lot of concepts relating to how Liquid works in Shopify themes. In this article, I'd like to take a more in-depth look at one particular template — product.liquid.

If you are new to Shopify themes, product.liquid is the template that is rendered by default whenever a customer views a product detail page. As discussed in a previous tutorial, it is also possible to have alternate product templates, however in this post we'll stick to the basic template, which resides in the templates folder within a Shopify theme.

By way of an example, I am going to use the product.liquid template from my own starter theme “Birthday Suit”. Here it is in its entirety:

As you will see, there's very little HTML in this template. This is on purpose as it's intended as a starting block for your own theme. If you download a theme from the Shopify theme store, you'll notice that the product.liquid template will be more involved but may not actually contain much more Liquid code.

Let's examine what's happening in detail. We begin by using Liquid output to display the product's title and description:

<h2>{{ product.title }}</h2> {{ product.description }}

As the description is entered via the Shopify admin, we don't need to wrap this output with further HTML. Of course, if you need to add in a wrapper element of some sort then you can.

Moving down the template, we come to the form and opening <select> element:

We create a for loop to iterate over all the current products variants

We check to see if the current product in the loop has inventory using {% if variant.available == true %}

If the product has inventory, we output the title in an <option> element and set the value of the <option> to the variants id. As well as outputting the variant title, we output the price and use the money_with_currency filter.

If the product has no inventory, we output a disabled <option> element and output the title followed by sold out!

Finally, we close off our if statement and for loop

Next we add in a <input type="submit"> that when clicked will add an available product to the cart:

<input type="submit" name="add" id="add" value="Add to Cart"> </form>

We complete the template by closing out the </form> element.

This template makes use of both the product and variant objects. They have a large range of properties that you can display in this template and are worth investigating as you develop your Shopify theme skills.

Thanks for subscribing

About the Author

Keir is based in the UK and works on the Marketing Team at Shopify. You can read his latest articles on his personal blog, listen to his podcast, follow him on Twitter, or check out his travel and everyday carry review site Leader of the Pack.