Enhancing product pages

PLEASE READ: This article is only for themes prior to version 2.0. Or for developers who wish to customize the product pages even further and have good experience with liquid. 
If you are using an updated theme version, please see this article from our theme documentation.

If you wish to have more details in the product pages, know that there is a way to achieve this with custom code following these instructions: 

Enabling extra content on product pages

In order to enable this feature you need to do some editing to the original theme files.

  1. Go to the theme editor (read this article for more info)
  2. Choose  /Sections/product.liquid and locate the related products snippet (this is the best place for extra content):

    {% if section.settings.related_products %}
      {% include 'product_related' %}
    {% endif %}
  3. Right before this block, insert the following code snippet:

    {% capture product_snippet %}{{ 'product_' | append: product.handle }}{% endcapture %}
    {% capture the_snippet_content %}{% include product_snippet %}{% endcapture %}
    {% unless the_snippet_content contains "Liquid error" %}
       {% include product_snippet %}
    {% endunless %}
  4. Save the file. Then open /Snippets folder and click the Add a new snippet button.
  5. Create a new file called product_your-product-handle.liquid
    The name of the file will be based on an actual product handle. For example, if your product's title is Baseball Cap, the name of the file containing the extra content for that specific product will be product_baseball-cap.liquid.
  6. Fill the contents of the new file with the ones from the following file: https://pastebin.com/raw/1Ex2WBXe
  7. Save the file and preview your product. You should see the extra content added!
  8. Go back and edit the extra content file with your own content. You can edit, duplicate and remove any of the content from the example file.
  9. You can now create "extra content files" for each one of your products using the given naming convention.

Same content for all products

If you want to have the same extra content for all of your products, replace the first line from point #3 above with the following:

{% capture product_snippet %}{{ 'product_extra-content' }}{% endcapture %}

Then name the file you create at point #5 product_extra-content.liquid

Same content for each collection

If you don't have custom content for each product but don't want to display the same content for all products, you can also display extra content for each product within a collection. If your products are in a single collection, you can use the collection handle for your product names.

Replace the first line from point #3 with the following:

{% capture product_snippet %}{{ 'product_' | append: product.collections[0].handle }}{% endcapture %}

Then if your collection's title is Spring 2017, the name of the file containing the extra content for all the products under your collection will be product_spring-2017.liquid.

This is only a starting point! With some web development skills you can really take this to the next level and create something really unique of your store!
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.