This article explains how to create additional product.scrolling templates. View our article for an overview and general information on the product.scrolling template.
Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
Creating additional product.scrolling templates
In the Flex theme, you select your default product page template within the Theme Editor (customize) under Theme Settings > Layout > Templates. Keep in mind, the content blocks configured in the theme editor, will show up for all products using that template. In order to show unique content blocks for the same template, you would need to duplicate the template.
Note: If you're looking to create a high number (10+) of custom 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 page requirements and consider the use of Shopify's Metafield implementation for this level of unique customization. An excessive number of additional custom product.scrolling templates will result in difficulties using the Customize settings editor.
Step 1: Head into Online Store > Themes > Actions > Edit Code.
Step 2: Under Templates click Add a new template.
Step 3: Make this new template of the 'product' variety, call it 'scrolling-2' and then click 'Create template'.
Important: You must start the name you enter here with the word "scrolling" in order for all features to work. For example, entering "scrolling-2" (which becomes "product.srolling-2.liquid") or "scrolling-new-product" (which becomes "product.scrolling-new-product.liquid") will work, but "new-product" (which becomes "product.new-product.liquid") will not.
Edit the template code
Step 4: Remove all the code that is in the file you just created and replace it with the code from the original product-scrolling.liquid template file.
Step 5: Near the bottom of the product.scrolling-2.liquid file, you'll see this code:
{% section 'product-image-scroll__main' %}
Step 6: You'll just need to update it to be:
{% section 'product-image-scroll__main-2' %}
Step 7: Save your template!
Edit the section code
Step 8: Under Section click Add a new section.
Step 9: Call this new section 'product-image-scroll__main-2' and click 'Create section'.
Step 10: Remove all the code that is in the file you just created and replace it with the code from the original product-image-scroll__main.liquid section file.
Step 11: Save your section!
Assigning the duplicate template to your product
Step 12: Once you've duplicated the files, you'll need to assign the new template to your product! In the Shopify Admin > Head into Products and locate your product. Under Theme Templates, select 'product.scrolling-2' and save.
This process can be repeated if you need by creating more templates and sections and following the naming conventions as the above instruction, such as:
Template: product.scrolling-3
Section: product-image-scroll__main-3
...and so on