TL;DR: To build custom product templates in Shopify, create a new Liquid file in your theme’s sections or templates folder, connect it to a product via the theme editor, and use Liquid objects like product.title, product.price, and product.variants to render dynamic content. This guide walks you through creating, editing, and assigning a custom product template step by step.
Step 1: Duplicate Your Theme First
Before touching any code, go to Online Store → Themes and click Actions → Duplicate on your live theme. This gives you a safe sandbox to experiment in. Working directly on a live theme risks breaking your storefront if a Liquid syntax error slips in.
If you want to dig deeper, check out our guide on Circular Supply Chains Boost Manufacturing Profits.
Step 2: Create a New Product Template
In your duplicated theme, click Actions → Edit code. Open the templates folder and find product.json (or product.liquid in older themes). Click Add a new template, choose product as the type, name it something descriptive like custom, and select JSON as the format. Shopify will generate product.custom.json — this is your new template.
Step 3: Build the Section Structure
JSON templates are collections of sections. Open your new template and add a section reference, for example "main": { "type": "custom-product" }. Then create a matching file in the sections folder named custom-product.liquid. Inside it, wrap your markup in {% schema %} tags so merchants can customize settings in the theme editor. Define settings like a heading, description block, or color picker within the schema.
Step 4: Write the Liquid Markup
Use Liquid objects to pull product data dynamically. For example, output {{ product.title }} for the name, {{ product.price | money }} for formatted pricing, and loop through {% for variant in product.variants %} to build a variant selector. Render the add-to-cart form with {% form 'product', product %} so purchases work correctly. Always test with a product that has multiple variants and images.
Step 5: Assign the Template to a Product
Go to Products, open a product, scroll to the Theme template dropdown in the right sidebar, and select your new custom template. Save, then preview your storefront. You can assign this template to any number of products, or set it as the default for a product type.
Tips for Success
Keep logic in snippets ({% render 'variant-picker' %}) to stay organized. Use {{ product | json }} temporarily to inspect available data. Validate your Liquid with Shopify’s theme check tool, and always preview on mobile — product templates often break on small screens.
FAQ
Q: Do I need to know Ruby or backend code to build product templates?
A: No. Liquid is a templating language that only handles presentation logic, so HTML, CSS, and Liquid knowledge is sufficient.
Q: Will my custom template survive a theme update?
A: Only if you duplicate the theme and manage updates manually. Theme updates overwrite customized files, so back up your template files before updating.
Q: Can I use a custom product template with Shopify’s Online Store 2.0 themes?
A: Yes. OS 2.0 themes support JSON templates and sections everywhere,
Leave a Reply