The Volume theme offers flexible product layout customization. Below, you'll find an overview of the key customization options.
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.
2. Images slideshow Gallery
Show thumbnails setting is enabled: Below gallery.
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.
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.
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).
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.
<aside> 💡
To prevent the header from overlapping with section content, adjust the Offset setting in the Product Overview section.
</aside>
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.
The Volume theme includes three pre-configured product templates with different content display settings:
Only first container
A classic layout where all section blocks are stacked vertically without separation into two containers.
First and second stretched vertically
Recommended for minimal content.
This layout also allows padding adjustments:
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.
<aside> 💡
If Overlap is enabled, ensure you add an Offset approximately equal to the header height to prevent it from covering the content.
</aside>
Place the second container below media
Keep only essential content on the first screen while moving the detailed product description below the media.
The Volume theme natively supports Shopify color swatches configured using category metafields—no custom code required. When set up this way, color swatches will display consistently across product pages, product cards, and collection filters.
To configure color swatches using category metafields, follow the steps in this Shopify Help Center guide.
You can also watch a short demo video to see the category metafields functionality in action:
https://youtu.be/scfMXijTUGM?si=LCUxnsOdvc797dQf
<aside> 💡
Additionally, Volume allows you to display a variant image as a swatch.
</aside>
If you’re unable to upgrade to product categories, you can configure swatches using one of the legacy methods below.
HEX colors
To assign custom HEX colors to swatches:
Go to Theme settings → Variant picker.
Scroll down to Custom colors for swatches.
Add your color name and HEX code using the format Name:#HEX.
For example: Wine:#722F37
<aside> ⚠️
</aside>
Image files
To use images for color swatches: