Product Page

Configure Volume product page layout: choose media display (grid, stack, gallery, slideshow), set media width, and pick from four pre-built product templates.

Layout Configuration

The Volume theme offers flexible product layout customization. Below, you'll find an overview of the key customization options.

Media

In addition to positioning product media on the left or right, the theme provides two styles:

1. Grids

Stack, Grid, Alternative grid 1, Alternative grid 2

Show thumbnails setting is enabled: On top.

1. Images slideshow

Gallery

Show thumbnails setting is enabled: Below gallery.

Media size

The Size setting allows you to define the preferred width of the media. The minimum width is 4/12, while the maximum width is 9/12.

Fit Media Inside Container

By enabling the Fit media inside container checkbox and adjusting Container inner spacing, you can fit images within their original aspect ratio, creating additional whitespace around them.

This is useful when product media have different aspect ratios. Additionally, you can modify the Media gallery color scheme under the Section layout heading to change the background color of the media display.

Thumbnails

Under the Thumbnails heading, you will find extensive customization options, including placement, size, and shape. You can also enable sticky thumbnails on desktop (Incompatible with 'Gallery' media style).

Overlap

If your product images have a uniform background color and there are no other sections before the Product Overview section in the Template group, you can enable Overlap in the section's settings. This makes the header transparent.

To prevent the header from overlapping with section content, adjust the Offset setting in the Product Overview section.

Layout

By modifying the Container paddings setting, you can increase or decrease the side paddings of the content.

Under the Content heading in the Product Overview section settings, you will find the Layout selector. When adding a Second container, all blocks below it are grouped and arranged according to the selected Layout option.

---

Product templates

The Volume theme includes three pre-configured product templates with different content display settings:

1. Only first container

A classic layout where all section blocks are stacked vertically without separation into two containers.

1. First and second stretched vertically

Recommended for minimal content.

This layout also allows padding adjustments:

• First container padding: Adds padding at the top.
• Second container padding: Adds padding at the bottom.

1. Containers in two columns

Each container has alignment and padding options.

When using this layout, media width on smaller screens may be reduced from the Size setting under the Media section because a minimum content width is set for columns.

If Overlap is enabled, ensure you add an Offset approximately equal to the header height to prevent it from covering the content.

1. Place the second container below media

Keep only essential content on the first screen while moving the detailed product description below the media.