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.
In This Article
Flex Product Page Template: Image Scrolling
The Flex theme's 'Image Scrolling' product page template may appear like a traditional product page at first – until you start scrolling! As you move down the product page, the page, description and form beside the product images remain fixed, while the product images are displayed in a seamless scrolling effect.
In addition to configuring the product gallery and product information, you can add your own custom CSS and additional content blocks through the Theme Editor (customize).
The content blocks that can be added in the Image Scrolling product template include: divider, blog posts, featured collection, video, image with text overlay, instagram, logo list, map, page, product reviews, recommended products, and rich text.
Read more about the available product templates included in the Flex theme.
Additionally, you can also configure settings for the 'Product Form' area which includes the add to cart/payment buttons, variant option styles, and inventory.
View our article on the Product Page Form for more detail on the settings and examples.
Product Page Settings
The settings determine the information and layout of what's displayed on your product pages! You can locate these settings by heading into Customize > choose 'Product Pages' in the drop-down page selector. Your theme editor on the left will then update with the product page settings.
Product Gallery Settings
The product gallery settings refer to the images that you've uploaded in the Product's admin page.
Show breadcrumb links
Breadcrumb links are a list of links that show a customer what page they are on, and all the pages that are "above" that page in a store's content. In this example, the breadcrumb links read as:
Home / Sneakers / PRODUCT-HERE
So this shows the path of how we got to the 'PRODUCT-HERE'. From the 'homepage', we clicked into the 'Sneakers' collection, and then clicked into 'PRODUCT-HERE'. The 'breadcrumb links' will display at the top left of the product page.
Enabling the breadcrumb links will also display previous/next links on the top right of the page when you've you clicked on the product from within a collection.
There are additional options for the breadcrumb links in the theme's 'Elements' settings. Under Customize > Theme Settings > Elements > Breadcrumbs, you can choose the 'capitalization,' 'separator' and 'size.'
Magnify on hover
You can enable the 'magnify on hover' setting if you'd like to zoom in on your product images when hovering over them.
Enable lightbox
If you check off the 'enable lightbox' setting, when you click the product image, a pop up will open up allowing you to click through the product gallery images.
Gallery position
You can choose the 'gallery position' to either display your product image gallery on the left side of the section, or the right.
Dynamic checkout button
Show dynamic checkout button
You can 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.
View Shopify's full documentation about dynamic checkout buttons.
Product Information Settings
The product information settings refer to the information displayed within the product form area on the Product page! This is the area where you product price, description, variants, and add to cart live in as well.
Show vendor
You can enable the 'show vendor' setting which will display the name of the vendor/brand if you've added one in through the product admin page under Organization > Vendor. If you enable this setting, the vendor/brand name will then appear above the product title.
Show SKU
You can enable the 'show SKU' setting which will display the product's SKU number if you've added one in through the product admin page under Inventory. If you enable this setting, the SKU will then appear above the product title, and beneath the Vendor if you have that enabled.
Display star rating
When you enable the 'display star rating' setting, the average star rating plus the number of reviews left by customers will display above the product title. You will need to have the Product Reviews enabled in order for the star rating to show up (Theme Settings > Product Grid > Reviews > Enable Reviews).
Show price savings
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.
Show collections
You can enable the 'show collections' setting which will display a list of collections that your product is a part of. You can add your product to Collections through the product admin page under Organization > Collections. If you enable this setting, the Collections will then appear beneath the product description and product form area.
Show type
You can enable the 'show type' setting which will display the product type if you've added one in through the product admin page under Organization > Product Type. If you enable this setting, the Product Type will then appear beneath the product description and product form area, and underneath the Collections if you have 'show collections' enabled.
Show tags
You can enable the 'show tags' setting which will display any tags you've added through the product admin page under Organization > Tags. The tags will then display listed as categories beneath the product description and product form area, and underneath Collections and Type if you have those enabled.
Show social media share icons
You can enable the 'show social media icons' setting which will display the Twitter, Facebook, Pinterest, and Email icons for customers to share the product page on social media/email. If you enable this setting, the social share icons will display beneath the product description and product form area, and underneath any other 'product info' settings you've enabled.
You can choose your 'icon style' by going into Theme Settings > Typography > Icons. Here, you can choose between 'solid' and 'outline.'
Description position
The 'description position' lets you move the placement of your description either above or below the add to cart button (product form).
Width
The options under the 'width' setting include: 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting '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.
.
Product Page Content Blocks
Content blocks can get added to the Classic product template by clicking 'Add content' button at the bottom of the settings in the Theme Editor.
The content blocks available are:
- Divider
- Blog Posts
- Featured Collection
- Video
- Image with Text Overlay
- Logo List
- Map
- Page
- Product Reviews
- Recommended Products
- Rich text
The settings for the content blocks can be configured in each content block. The blocks will appear underneath your product gallery/product form, but they can be re-ordered by drag & dropping them in the theme editor.
Keep in mind, the content blocks configured in the theme editor, will show up for all products using this template. In order to show unique content blocks for the same template, you would need to duplicate the template or choose a different template for specific products.
Examples
Example 1 - Moda demo shop
Example 2 - Wink demo shop
Mobile Layout
When viewed on a mobile device, the image scrolling product page will adjust to a more classic layout with the main product image at the top, with the additional product images as thumbnails.
