Flex's Image Scolling template offers an alternative for product media display. Contrasting the Default product template's Product Gallery, the Image Scrolling template showcases the images, videos, and models in a vertical column for customers to browse as they scroll down the page.
The Flex theme's Image Scrolling product page template resembles a traditional product page until the customer scrolls down the page. The product's title, price, and other page blocks are arranged beside the product images, and remain fixed as you scroll the product page. On the other side of the page, the product images are displayed in a seamless scrolling effect.
Customize the Image Scrolling Template
Open Products, then the scrolling template with the page selector.
In the left sidebar, open Product - image scroll to customize general settings for the template.
Image zoom
Activate an image zoom feature for the product media by enabling Magnify product images on hover.
Lightbox
Allow customers to open the product image in a modal window by activating Enable lightbox.
Thumbnails for mobile display
To display the product's thumbnail images for the mobile view, enable Show thumbnails.
Mobile gallery transitions
Automate your product media by adjusting the Gallery speed slider. Any value above 0 seconds will cycle through the images, videos, and models like a slideshow. To keep the media static, leave the slider at 0.
If enabled, select a Gallery transition option to have the media Slide or Fade between transitions.
Thumbnail slider
If you have numerous product thumbnail images and want to avoid visual clutter, you can check off the Enable thumbnail slider setting. The slider will activate for products over 6 images, videos, or models.
Media position
You can choose the Media position to either display your product image gallery on the Left or Right side of the page.
Product media height
Adjust the Product media height using the provided slider to cap the height of the media at a minimum of 200px and a maximum of 800px.
Looped video
Have your videos automatically repeat when finished by activating Enable video looping. This only applies to videos added through the Media portion of Products.
Width
Select Standard or Wide with the Width setting. Wide will spread out to span the full width of the window. Standard will keep the section in a container and not spread the full width.
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
In the CSS class field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well.
The Custom CSS field is where you can add in the actual CSS code.
Customize the Page Blocks
Select and customize the individual page blocks.
There are no settings to customize for Title, Description, Vendor, Quantity, SKU, and Share blocks. Click, hold, then drag the blocks to reorder their sequence and reposition them on the product page.
Price block
If your product is on sale, you can enable the Show price savings which will display how much your customer is saving: both percentage and price amount. If you enable this setting, the price savings will display below the product price.
Form block
Enable the Show dynamic checkout button setting to allow customers to easily checkout. They skip the cart and complete their payment with the checkout method displayed on the button.
Product links blocks
Use the Product links block to control the position of the product. Click the block to open its settings.
Display the collection(s) that include this product by enabling Show collections. This displays below the product form.
Enable Show tags to display the tags assigned to the product. These display below the product form as button-like links.
Activate Show type to display the Product type information for the product. Assign this to your products by editing the Organization portion of your Products admin.
Size chart block
Include a Size chart for the product page by adding the Size chart block. Click to open the block, then click Select page below Size chart.
Text block
Include more messaging to the product page by adding a Text block.
Add copy to the Text field. Then use the Bold, Italic, and Link controls to style and connect your text with other pages.
Additional Product Page Sections
There are also sections for Recommended products, Recently viewed products, and Sidebar. Click these sections to open their dedicated settings.
Add more sections to your product page by selecting (+) Add section.
Add a Section to a Product Page
Not seeing more sections? Update to the latest version of Flex to unlock them.
Recommended products
Flex's Product Page includes the option to display Recommended Products underneath the Product Gallery/Product Form and Shopify Product Reviews (if you have those enabled). Within the Recommended Products settings, you can choose the layout option of a traditional Grid or a Slider as well as choose the 'products per row' and limit the number of products shown.
Recently viewed products
There is an option to include Recently Viewed Products on the Flex product page which will showcase different products based on each customer's site experience and which products they browse. Within these settings, select either a Grid or a Slider layout, as well as adjust the Products per row and limit the amount of products shown.