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. You can also build a customizable related products section. 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:
<h2>{{ product.title }}</h2>
{{ product.description }}
<form action="/cart/add" method="post" enctype="multipart/form-data">
<select name="id">
{% for variant in product.variants %}
{% if variant.available == true %}
<option value="{{variant.id}}"> {{ variant.title }} for {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled"> {{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<input type="submit" name="add" id="add" value="Add to Cart" class="button">
</form>
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:
<form action="/cart/add" method="post" enctype="multipart/form-data">
<select name="id">
The action
attribute is important – it must be set to /cart/add
in order for products to be added to the cart. We also need to ensure that the <select>
element has its name
attribute set to id
.
Next comes the main output of the template:
{% for variant in product.variants %}
{% if variant.available == true %}
<option value="{{variant.id}}"> {{ variant.title }} for {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled"> {{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
A few things are at work here:
- 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 variantsid
. As well as outputting the variant title, we output the price and use themoney_with_currency
filter. - If the product has no inventory, we output a disabled
<option>
element and output the title followed bysold out!
- Finally, we close off our
if
statement andfor
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.
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 and variant images
- Use the Shopify JavaScript snippet
option_selection.js
to allow better display of variant options - Use the
| t
filter for retrieving translated strings from your theme's locale file
Read more
- How to Use Alternate Templates in Shopify Theme Development
- An Overview of Liquid: Shopify's Templating Language
- Introducing Online Store 2.0: What it Means For Developers
- How to Build a Shopify App: The Complete Guide
- How to Use Liquid to Create Custom Landing Page Templates
- Working with Product Variants When Building a Shopify Theme
- How to Manipulate Images with the img_url Filter
- Best Practices for Developing Scalable (and Sustainable) Shopify Themes
- Customize Shopify Password Pages With the password.liquid Template
- Creating an Accessible Pagination with Liquid