Story theme: Long product page template
Story includes a long product page template. You can add rich content to the bottom of a product page when using this template. Example product page:
How to use the product long template:
The product.long template can be selected when setting up your product in the main Shopify Product Admin. This allows you to assign certain products the functionality without affecting the regular products.
Choose the product.long template in your product setup under Theme templates:
How to create content:
When using product.long as the the product template, there are some reserved styles which Story will use to convert the content into the correct rich format.
These are the three key components:
- Text content
The first step is to complete your regular product information which will appear below the Add to Cart and Buy button area. If you have global tabs created, these will appear below the regular product description. Note: H6 local tabs (Description H6) tabs will not work on this template. That content can be used as the long format information.
If you don't require any product description content in the first section, you can skip that and start with the long format sections.
To begin, create a title and style it as Heading 1 text (H1):
That will initiate a new section:
Follow the Heading 1 title with text content below. Use standard paragraphs for the content.
To set the correct image for your first section, choose an image in your product setup and move it into the second position. The first image is used as the main product image, the second image will be used for your first section. You can use drag and drop in the product admin to sort your images.
Image usage example:
The first image is used as the main product image. The second image is used for the first lower section. The third image will be used for the second lower section and so on. You'll need an image to match each lower section. If you have three lower sections, you'll need a total of four images in your product setup. If you have only one lower section, only two images are needed. Any additional images will not be displayed.
To create another section, begin with a Heading 1 title followed by the text description. The next image in your product image order will be used.
Story will automatically alternate the image/text position as you add additional sections: