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: Classic
The Flex theme's 'Classic' product page template includes a traditional, default layout to use for your products. The product template features the product image/gallery next to the product information and product form.
In addition to setting up 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 Classic product template include: logo list, recommended products, product reviews, 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 / Blossom Classic Sneaker
So this shows the path of how we got to the 'Blossom Classic Sneaker'. From the 'homepage', we clicked into the 'Sneakers' collection, and then clicked into 'Blossom Classic Sneaker'. 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.'
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.
Thumbnail slider
If you have a lot of product thumbnail images and want to avoid visual clutter, you can check off the 'enable thumbnail slider' setting. The slider will kick in when you have 6 or more thumbnail 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
The product information settings refer to the information displayed within the product form area on the Product page! This is the area where the 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:
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.
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
Settings:
- Gallery position - left
- Show type - enabled
- Show tags - enabled
- Show social media share icons - enabled
- Description position - above product form
- Width - standard
- Content blocks
- Recommended products
Example 2
Settings:
- Show arrows - enabled
- Magnify on hover - enabled
- Gallery speed - 3 seconds
- Gallery transition - slide
- Thumbnails - bottom
- Gallery position - left
- Show dynamic checkout button - enabled
- Show social media share icons - enabled
- Description position - above product form
- Width - standard
- Content blocks
- Rich text
- Recommended products
Mobile Layout
When viewed on a mobile device, the product page will responsively fit into your screen size. The main product image will be at the top, with the rest of the page layout following.
You product page settings will remain as well. For example, if you have set the 'thumbnail position' to be 'bottom', the thumbnails will remain on the bottom. If you have set the 'description position' to be 'above the product form', the description will remain above the product form.
