The Product page is where you highlight the features and benefits of your individual products.
With Online Store 2.0 and compatible versions, product pages can be enhanced by adding a section to the product page
Use the theme editor to select a layout option, adjust product form settings (sold-out options, dynamic checkout buttons, redirect customers to the cart), and configure media settings for the Product page.
Access the product page settings
- In the theme editor (Customize), open the template selector
- Select Products, then Default product
- In the left sidebar, select Product pages
Consider adapting your product descriptions into tabs with our HTML code approach: Adding tabs to your product description
Select a layout option
Empire comes with two different layout options product pages, Two columns or Three columns.
If you're working with Empire v6 or above, apply the three-column template to products individually through the Theme template portion of the Products admin.
Adjust product form settings
Scroll down to FORM to access the product form settings.
In the latest release of Empire, product form options are found in the Products portion of the Theme settings.
Sold out options
Use the Sold out options portion of your product page template settings to control how sold-out products are presented in the product form.
The options are:
Selectable keeps out-of-stock variants visible and allows customers to select them, however, they cannot be added to the cart.
Disabled will keep out-of-stock variants visible, but not selectable by the customer.
Hidden excludes out-of-stock variants altogether from the product form.
Dynamic checkout buttons
Include an additional add-to-cart button that also directs customers straight to the Checkout page, enable Show dynamic checkout button (DCB).
Redirect customers to the cart
Enable cart redirection to direct your customers to the cart page after adding an item to the cart.
Some apps require disabling AJAX, which is precisely what Enable cart direction allows. To disable AJAX, simply Enable cart direction.
Configure media settings
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 Gallery 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.