Shopify Tutorial: The product.liquid template

So far in ourShopify tutorial serieswe'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.liquidis 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 havealternate product templates. You can also build a customizablerelated productssection. However in this post we'll stick to the basic template, which resides in thetemplatesfolder within a Shopify theme.

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

{{ product.title }}

{{ product.description }}

{% for variant in product.variants %}
{% if variant.available == true %}
{{ variant.title }} for {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - sold out!
{% endif %}
{% endfor %}

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 theproduct.liquidtemplate 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:

{{ product.title }}

{{ 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 theformand openingelement:

Theactionattribute is important – it must be set to/cart/addin order for products to be added to the cart. We also need to ensure that theelement has itsnameattribute set toid.

Next comes the main output of the template:

{% for variant in product.variants %}
{% if variant.available == true %}
{{ variant.title }} for {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - sold out!
{% endif %}
{% endfor %}

A few things are at work here:

• We create afor loopto 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 anelement and set the value of theto the variantsid. As well as outputting the variant title, we output the price and use themoney_with_currencyfilter.
• If the product has no inventory, we output a disabledelement and output the title followed bysold out!
• Finally, we close off ourifstatement andforloop

Next we add in a

that when clicked will add an available product to the cart:

We complete the template by closing out theelement.

This template makes use of both theproductandvariantobjects. 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.

You might also like:10 Top Questions About Developing Shopify Themes Answered

Extending the template

Of course this example is relatively simplistic and is intended as a starting point for your own development. There's a lot more you could include in this template including:

• Adding in Liquid code to display product andvariant images
• Use the Shopify JavaScript snippetoption_selection.jsto allow better display of variant options
• Use the| tfilter for retrieving translated strings from your theme'slocale file

Learning Liquid: Getting Started with Shopify Theming

Get this free guide and learn practical tips, tricks, and techniques to start modifying, developing, and building Shopify themes.

Email

Get free copy

By entering your email - we’ll also send you marketing emails related to Shopify. You can unsubscribe anytime. Note: the guide won't be delivered to role-based emails, like info@, developer@, etc.

Our virtual cogs are turning.
Please note that it can take up
to 15 minutes for our email
to reach your inbox.