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: Sections
The Flex theme's 'Sections' product page template gives you a ton of flexibility for your product page layout. Each element of the product page is turned into a content block which can then be ordered and chosen in the Theme Editor (customize).
This means that you no longer need to have the product image/gallery and product form sit next to each other, as most product pages require. These two sections can be moved around to different areas on your product page!
The content blocks that can be added in the Sections product template include: logo list, recommended products, product reviews, rich text – and of course, product gallery and product information.
A sidebar and custom CSS can be included as well.
Read more about the available product templates included in the Flex theme.
Additionally, you can 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 & Content Blocks
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 Page Settings
The product page settings are where you can enable breadcrumb links, determine the spacing for the product page, and include custom CSS.
The settings for the sections that you add and configure in this template will be included in each individual content block.
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 / Spring Dresses / Polka Dot Ruffle Dress
So this shows the path of how we got to the 'Polka Dot Ruffle Dress.'From the 'homepage', we clicked into the 'Spring Dresses' collection, and then clicked into 'Polka Dot Ruffle Dress.' 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.'
Top/Bottom spacing
You can choose to add space (padding) above and below the product page by adjusting the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
In the advanced css 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.
Content Blocks
These 'content blocks' are the actual 'sections' of the Sections product template! You can add them by clicking 'Add content' button at the bottom of the settings in the Theme Editor.
- Product Information Content Block
- Product Gallery Content Block
- Rich Text Content Block
- Recommended Products Content Block
- Product Reviews Content Block
- Logo List Content Block
-
Product Information Content Block
The product information content block contain the product form, product description, variants, and add to cart button.
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 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.
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: 'half,' '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. Selecting 'half' will resize this section to be half of the 'wide' option.
With the 'half' width option, if you have set one section to 'half', and the section following it set to 'half', they will sit next to each other side-by-side.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Left/Right spacing
For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' 'slide in right,' and 'zoom.'
-
Product Gallery Content Block
The product gallery content block includes the images that you've uploaded in the Product's admin page.
Show arrows
When the 'show arrows' setting is enabled, when your product image is hovered previous/next arrows will appear so you can click through the product's gallery images.
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 speed
With the 'gallery speed' setting, you can adjust how quickly your product gallery changes its image. Choose from 0 - 6 seconds. Setting to 0 will disable the gallery from autoplaying, so the user will have to click the arrows to switch product images!
Gallery transition
The 'gallery transition' setting setting allows you to choose which transition style you'd like for your images within the product gallery. You can choose from slide or fade.
Thumbnails
If you'd like to display your product's thumbnail images you can choose from left, right or bottom. If you do not want to display your product thumbnail images, you can select none.
Enable thumbnail slider
The 'thumbnail slider' is useful if you have many images for a product; instead of a cluttered collection of thumbnails extending down the page, they all get tucked neatly away into a slider below the main image. The slider will kick in when you have 7 or more thumbnail images!
Width
The options under the 'width' setting include: 'half,' '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. Selecting 'half' will resize this section to be half of the 'wide' option.
With the 'half' width option, if you have set one section to 'half', and the section following it set to 'half', they will sit next to each other side-by-side.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Left/Right spacing
For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' 'slide in right,' and 'zoom.'
-
Rich Text Content Block
The 'Rich Text' content block is a great way to add basic and informative text. This could include a couple of introductory and 'about us' paragraphs to talk about your product/company or to make an important announcement.
-
Recommended Products Content Block
Flex's Section Product Template includes the option to display 'Recommended Products.' 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 amount of products shown.
-
Product Reviews Content Block
The 'Product Reviews' settings are associated with Shopify's Product Reviews app which you can install on your storefront. Settings for the reviews are located in both the Product Page Settings and in the Product Grid settings (Theme Settings > Product Grid).
-
Logo List Content Block
The 'Logo List' is essentially a row (or rows) of small images with an optional link field and is a great way to display brand/vendor logos or press mentions about your product/company!
Product Page Sidebar
A Sidebar can be added to the left side of the Classic product template by clicking into the 'Product sidebar' settings in the theme editor while on your product page. Simply check off the 'Show sidebar' setting. The sidebar content can be built by clicking 'Add content' and making selections from the list.
The sidebar content options are:
- Collection list
- Featured promotion
- Menu
- Page
- Search form
- Tag list
- Text
- Type list
- Vendor list
In addition to adding the content, you can also include custom CSS for the sidebar specifically under the advanced settings!
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.
.
Examples
Example 1 - Fresh demo shop
Mobile Layout
When viewed on a mobile device, the product page will responsively fit into your screen size. The order that the sections are configured will remain the same on mobile view as well. If you have a sidebar enabled, the content will be at the bottom of the page.
