Templates in Themes

Create Additional, Unique Product Pages Using the Product.details Template

This article explains how to create additional product.details templates. View this article for basic information about setting up the product.details template. 

Supported Versions

The details shared here apply to the most recent versions of Parallax, Retina, Mobilia, Responsive, and Artisan. To keep your theme up to date, check out this helpful document.

For information on how we handle product.details content blocks and how to duplicate them in the Flex theme, please read this article.

The Product.details template is not included in the latest release of Turbo. Use Online Store 2.0 features for adding sections to product pages to achieve the same results.

The product.details template is a robust product page template that will allow you to add configurable content blocks to the lower portion of your favorite featured product page, to provide your shoppers with rich content about the benefits and features of your top item. If you have more than one product for which you would like to provide this type of special robust description, the product.details template and associated settings can be duplicated to accomplish this.

Note: If you're looking to create a high number (10+) of custom product.details pages with unique features/content-blocks on each, we advise seeking a customized solution from one of our recommended Shopify Experts, with whom you can discuss your custom product page requirements and consider the use of Shopify's Metafield implementation for this level of unique customization. An excessive number of additional custom product.details templates will result in difficulties using the Customize settings editor.

If you would like to have different product page content blocks for different products, follow these instructions or watch the video tutorial.

 

Instructions for duplicating the template

Create a new template

Step 1: First, go Online Store > Themes > Actions > Edit Code > Templates > Add new template



Step 2: Make this new template of the 'product' variety, call it 'details2' and click 'Create template.'

Important: You must start the name you enter here with the word "details" in order for all features to work. For example, entering "details-2" (which becomes "product.details-2.liquid") or "details-new-product" (which becomes "product.details-new-product.liquid") will work, but "new-product" (which becomes "product.new-product.liquid") will not.

Edit the template code

Step 3: Remove all the code in this file and replace it with the code provided below.

Select your theme:

        • {% comment %}
          The contents of the product.details.liquid template can be found in /sections/product-details-template.liquid
          {% endcomment %}

          <section class="section">
          <div class="container">
          {% render 'product__structured-data' %}

          <div class="breadcrumb__wrapper one-whole column">
          <div class="breadcrumb product_breadcrumb">
          <span>
          <a href="{{ shop.url }}" title="{{ shop.name | escape }}">
          <span>{{ 'general.breadcrumbs.home' | t }}</span>
          </a>
          </span>

          <span class="icon-right-arrow"></span>

          <span>
          {% if collection %}
          <a href="{{ collection.url }}" title="{{ collection.title | escape }}">
          <span>{{ collection.title }}</span>
          </a>
          {% else %}
          <a href="{{ routes.all_products_collection_url }}" title="{{ collections.all.title }}">
          {{ collections.all.title }}
          </a>
          {% endif %}
          </span>

          <span class="icon-right-arrow"></span>

          {{ product.title }}
          </div>
          </div>
          </div>
          </section>

          {% section 'product-details2-template' %}

          <section class="section">
          {% section 'product-recommendations' %}
          </section>
        • {% comment %}
          The contents of the product.details.liquid template can be found in /sections/product-details-template.liquid
          {% endcomment %}

          <section class="section">
          <div class="container">
          {% render 'product-structured-data' %}

          <div class="breadcrumb__wrapper one-whole column">
          <div class="breadcrumb product_breadcrumb">
          <span>
          <a href="{{ shop.url }}" title="{{ shop.name | escape }}">
          <span>{{ 'general.breadcrumbs.home' | t }}</span>
          </a>
          </span>

          <span class="icon-right-arrow"></span>

          <span>
          {% if collection %}
          <a href="{{ collection.url }}" title="{{ collection.title | escape }}">
          <span>{{ collection.title }}</span>
          </a>
          {% else %}
          <a href="{{ routes.all_products_collection_url }}" title="{{ collections.all.title }}">
          {{ collections.all.title }}
          </a>
          {% endif %}
          </span>

          <span class="icon-right-arrow"></span>

          {{ product.title }}
          </div>
          </div>
          </div>
          </section>

          {% section 'product-details2-template' %}

          <section class="section">
          {% section 'product-recommendations' %}
          </section>

        • Retina

          {% comment %}
          The contents of the product.details.liquid template can be found in /sections/product-details-template.liquid
          {% endcomment %}

          <section class="section">
          <div class="container">
          {% render 'product-structured-data' %}

          <div class="breadcrumb__wrapper one-whole column">
          <div class="breadcrumb product_breadcrumb">
          <span>
          <a href="{{ shop.url }}" title="{{ shop.name | escape }}">
          <span>{{ 'general.breadcrumbs.home' | t }}</span>
          </a>
          </span>

          <span class="icon-right-arrow"></span>

          <span>
          {% if collection %}
          <a href="{{ collection.url }}" title="{{ collection.title | escape }}">
          <span>{{ collection.title }}</span>
          </a>
          {% else %}
          <a href="{{ routes.all_products_collection_url }}" title="{{ collections.all.title }}">
          {{ collections.all.title }}
          </a>
          {% endif %}
          </span>

          <span class="icon-right-arrow"></span>

          {{ product.title }}
          </div>
          </div>
          </div>
          </section>

          {% section 'product-details2-template' %}

          <section class="section">
          {% section 'product-recommendations' %}
          </section>
        • {% comment %}
          The contents of the product.details.liquid template can be found in /sections/product-details-template.liquid
          {% endcomment %}

          <section class="section">
          <div class="container">
          {% render 'product-structured-data' %}

          <div class="breadcrumb__wrapper one-whole column">
          <div class="breadcrumb product_breadcrumb">
          <span>
          <a href="{{ shop.url }}" title="{{ shop.name | escape }}">
          <span>{{ 'general.breadcrumbs.home' | t }}</span>
          </a>
          </span>

          <span class="icon-right-arrow"></span>

          <span>
          {% if collection %}
          <a href="{{ collection.url }}" title="{{ collection.title | escape }}">
          <span>{{ collection.title }}</span>
          </a>
          {% else %}
          <a href="{{ routes.all_products_collection_url }}" title="{{ collections.all.title }}">
          {{ collections.all.title }}
          </a>
          {% endif %}
          </span>

          <span class="icon-right-arrow"></span>

          {{ product.title }}
          </div>
          </div>
          </div>
          </section>

          {% section 'product-details2-template' %}

          <section class="section">
          {% section 'product-recommendations' %}
          </section>
        • {% comment %}
          The contents of the product.details.liquid template can be found in /sections/product-details-template.liquid
          {% endcomment %}

          <section class="section">
          <div class="container">
          {% render 'product-structured-data' %}

          <div class="breadcrumb__wrapper one-whole column">
          <div class="breadcrumb product_breadcrumb">
          <span>
          <a href="{{ shop.url }}" title="{{ shop.name | escape }}">
          <span>{{ 'general.breadcrumbs.home' | t }}</span>
          </a>
          </span>

          <span class="icon-right-arrow"></span>

          <span>
          {% if collection %}
          <a href="{{ collection.url }}" title="{{ collection.title | escape }}">
          <span>{{ collection.title }}</span>
          </a>
          {% else %}
          <a href="{{ routes.all_products_collection_url }}" title="{{ collections.all.title }}">
          {{ collections.all.title }}
          </a>
          {% endif %}
          </span>

          <span class="icon-right-arrow"></span>

          {{ product.title }}
          </div>
          </div>
          </div>
          </section>

          {% section 'product-details2-template' %}

          <section class="section">
          {% section 'product-recommendations' %}
          </section>
        • {% comment %}
          The contents of the product.details.liquid template can be found in /sections/product-details-template.liquid
          {% endcomment %}

          <section class="section">
          <div class="container">
          {% render 'product-structured-data' %}

          <div class="breadcrumb__wrapper one-whole column">
          <div class="breadcrumb product_breadcrumb">
          <span>
          <a href="{{ shop.url }}" title="{{ shop.name | escape }}">
          <span>{{ 'general.breadcrumbs.home' | t }}</span>
          </a>
          </span>

          <span class="icon-right-arrow"></span>

          <span>
          {% if collection %}
          <a href="{{ collection.url }}" title="{{ collection.title | escape }}">
          <span>{{ collection.title }}</span>
          </a>
          {% else %}
          <a href="{{ routes.all_products_collection_url }}" title="{{ collections.all.title }}">
          {{ collections.all.title }}
          </a>
          {% endif %}
          </span>

          <span class="icon-right-arrow"></span>

          {{ product.title }}
          </div>
          </div>
          </div>
          </section>

          {% section 'product-details2-template' %}

          <section class="section">
          {% section 'product-recommendations' %}
          </section>
        • {% comment %}
          The contents of the product.details.liquid template can be found in /sections/product-details-template.liquid
          {% endcomment %}

          <section class="section">
          <div class="container">
          {% render 'product-structured-data' %}

          <div class="breadcrumb__wrapper one-whole column">
          <div class="breadcrumb product_breadcrumb">
          <span>
          <a href="{{ shop.url }}" title="{{ shop.name | escape }}">
          <span>{{ 'general.breadcrumbs.home' | t }}</span>
          </a>
          </span>

          <span class="icon-right-arrow"></span>

          <span>
          {% if collection %}
          <a href="{{ collection.url }}" title="{{ collection.title | escape }}">
          <span>{{ collection.title }}</span>
          </a>
          {% else %}
          <a href="{{ routes.all_products_collection_url }}" title="{{ collections.all.title }}">
          {{ collections.all.title }}
          </a>
          {% endif %}
          </span>

          <span class="icon-right-arrow"></span>

          {{ product.title }}
          </div>
          </div>
          </div>
          </section>

          {% section 'product-details2-template' %}

          <section class="section">
          {% section 'product-recommendations' %}
          </section>

Step 4: Save your template!

Add a section

Step 5: Next, under the Sections folder, click 'Add a new section'





Step 6: Call this new section 'product-details2-template' then click 'Create section.'

Edit the section code

Step 7: Copy all the code from the product-details-template.liquid section file into the new product-details2-template.liquid

Step 8: Save your section! 

Step 9: In the Shopify Admin, go to Products, then select the product you want to have this different template applied to by assigning product.details2 with the Template suffix. 

Step 10: Head into the Theme Editor (customize) and navigate to the product that has been assigned the product.details2 template, you will then see options to add unique content blocks to that product.

Need more product page layouts?

This process can be repeated if you need still more different product page content for different products by creating more templates and sections and following the naming conventions as the above instruction, such as: 

  • Template: product.details3.liquid
  • Section: product-details3-template.liquid
  • ...and so on

Please be aware, however, that a high number of custom product or page templates can cause performance issues with your store or the theme editor. We typically recommend using 10 or fewer custom product templates, but this can vary based on a variety of factors. If you need more unique layouts than this, you likely would benefit from hiring a developer to create custom code. 

If you find that your store is generating error messages or the theme editor does not load properly, you may have created too many product or page templates and will need to remove one or more to restore full functionality. 

 

Video Guide

Custom Code

Please note that this change involves making direct changes to the theme code. If you encounter difficulties with this, please contact a third-party developer for more troubleshooting, customization or functionality.

Related articles