The Product page is where you highlight the features and benefits of your individual products. Customize the product page template with the theme editor's blocks, theme settings, and additional sections.
Access the product page features and settings
In the theme customizer (Customize), select Products, then Default product (two-column layout), 3-columns (three-column layout), or additional templates.
In the left sidebar, customize the Product information settings, arrange the template blocks, add a section, then adjust theme settings for products.
Customize the product information settings
Click Product information in the left sidebar to open general settings for the template.
Select an aspect ratio
Use the Aspect ratio dropdown to select Natural, Short, Square, or Tall. This setting controls how images fit within the gallery container.
Activate Enable image crop to avoid including white space in the image container.
Assign the gallery thumbnails position
Thumbnails are the small preview images that accompany the main image. To control the position of these, select an option from the Thumbnails position dropdown.
Enable image zoom
Allow customers to get a closer look at high-quality product images by activating the image zoom settings. There are two options to consider: Roll-over image zoom or Click to zoom image.
This feature works with images above 1600px in width
Roll-over image zoom
When a customer hovers their mouse cursor over the main gallery image, the Roll-over image zoom option automatically enlarges a portion of the image.
To enable, select either Enabled (separate box) or Enabled (replace main image) from the Roll-over zoom style dropdown.
Click to zoom image
For a more manual approach, consider using the Click to zoom image option. Customers are encouraged to click the image by a label in the bottom-right corner.
When a customer clicks the image, a dedicated modal window opens to provide a closer look.
To enable this, select Enabled (all devices), Enabled on desktop only, or Enabled on mobile only.
Video autoplay and looping
For product videos, activate autoplay by selecting Enable video autoplay. Repeat the video automatically at its end by selecting Enable video looping.
Customize page blocks
Use the blocks listed in the left sidebar to customize the layout and features for the product page.
There are blocks for Title, Price, Description, Vendor, Form, Share, Text, and Reviews.
In the latest version of the theme, there are also blocks for Collapsible tabs, Tabs, Custom Liquid, and Key details.
Add a Custom liquid block to inject custom code through a template block.
Use the Custom liquid field to include Liquid-formatted code.
Add a Text block, then click to open the block's settings. Add the Text using the provided field.
Add a Collapsible tab block to include product information in an engaging container. Similar to FAQ toggles or accordions, the collapsible tab keeps the Heading visible and reveals the Text when clicked.
The same content will appear for each product using a template. To provide different content for different products, consider creating additional templates or using metafields.
Add Tabs to showcase information in an interactive layout.
Three tabs by completing the Heading and Text fields.
To include the product's description, enable Show product description.
Position the tabs below the product gallery by enabling Show tabs below product gallery.
The same content will appear for each product using a template. To provide different content for different products, use the classic tabs approach, consider creating additional templates, or use metafields.
Add a Reviews block to connect with the Product Reviews app.
Key details block
Similar to the Highlights banner, the Key details block combines text with an icon to communicate a specific quality, advantage, etc. for the product(s).
Connect a Single-line text metafield as a dynamic source to have separate content for different products Learn more
Add a section
Add one of Empire's many sections to the product page template by selecting (+) Add section in the left sidebar.
- Blog posts
- Collection list
- Custom HTML
- Featured collection
- Featured product
- Highlights banner
- Image with text
- Image with text overlay
- Logo list
- Menu list
- Rich text
- Shoppable image
- Twitter feed
Adjust theme settings for product pages
The theme settings have a direct effect on product page templates. Access the Products portion of the Theme settings to customize sale badges, the product form, variant selection, cart redirection, product reviews, and swatches.