Empire templates: Product page – Pixel Union

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.

serving_set_product_page_with_media_gallery_and_info.png

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.

Two columns layout for product page (Empire Graphic Demo)

Three columns layout for product page (Empire Industrial Demo)

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
Disabled
Hidden

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).

Working with dynamic checkout buttons

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.

separate_box_for_roll-over_zoom_option_magifying_image.png

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.