Product page template – Pixel Union

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.

serving_set_product_page_with_media_gallery_and_info.png

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.

select_products_then_default_to_adjust_the_base_template.png

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.

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.

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.

Working with page blocks

click_a_block_to_customize_its_settings_and_drag_to_rearrange.png

Custom liquid

Add a Custom liquid block to inject custom code through a template block.

Use the Custom liquid field to include Liquid-formatted code.

custom liquid field.png

Text block

Add a Text block, then click to open the block's settings. Add the Text using the provided field.

Collapsible tab

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.

Tabs

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.

Reviews block

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

use a key details block to include special messaging.png

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.

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.

Adjusting theme settings for products in Empire

Share your experience with Empire

Your feedback is crucial! Help make Empire better by sharing your thoughts.

What to provide:

Pain points: What's not working for you?

Missing features: What should we add to Empire?

General feedback: Any other ideas?

How to provide feedback:

Fill out our quick and easy form.

Details help us improve, so the more specific, the better!

Share your experience with Empire