Customize your product information section

The Product information section is the flexible product-page builder in the Pops theme. It combines two fixed areas — the Product media gallery and the Product details — that you fill with product blocks, style as a card, and preview on desktop and mobile before saving the template.

Add the Product information section

The Product information section is available only on product templates. Open the product template in the theme editor and select the section to configure it.

1. In Online Store → Themes → Customize, open the product template.

2. Select the Product information section.

The section contains two fixed areas: the Product media gallery and the Product details. On screens at least 60em wide they sit side by side in two columns; below that width they stack into a single column.

Configure the media gallery

Set how product media displays — the gallery layout, thumbnail position, and zoom — in the Product media gallery block.

1. Select the Product information section and open the Product media gallery block.

2. Under Layout type, choose Carousel or Stacked.

3. Under Thumbnails layout, choose Left of media or Below media. See Choose a layout for product image thumbnails for how each behaves on desktop and mobile.

4. Turn Enable zoom on to open a high-resolution image modal when a customer zooms into a product image.

Add and arrange product details blocks

The Product details area holds the blocks that appear beside the gallery. Its default order is Product (title), Product (price), Product (variant picker), Product (quantity select), Product (buy buttons), then Product (description).

1. Select the Product information section and open the Product details block.

2. Add or remove blocks to build the layout you want.

3. Drag the blocks into the order they should appear.

Available blocks include text, icon, button, media, group, accordion, Product (title), Price, Product (variant picker), Product (quantity select), Buy buttons, Product (description), and View full details.

Configure options and price messaging

Set how customers choose a variant and how price, sale, and tax or shipping text appear.

1. Open the Product (variant picker) block. Under Picker type, choose Pills or Dropdown, and turn Enable swatches on to render options as color or image swatches when swatch data is available. See Show color and image swatches for product variants to set swatch data up.

2. Open the Product (price) block. Keep Use selected variant on so the price follows the selected variant, and Show badges on to display sale and sold-out badges.

Tax and shipping text appear only under the right conditions: tax-included copy shows when your store includes tax in prices, and shipping-calculated-at-checkout copy shows when you have a shipping policy.

Apply card styling

Wrap the section content in a card and control its color scheme and corner radius from the section settings.

1. Select the Product information section.

2. Turn Show content on card on to place the content on a card.

3. Under Border radius scheme, choose scheme 1, 2, or 3 to set the card's corner radius.

4. Under Color scheme, choose the color scheme applied to the section.

Border radius scheme appears only when Show content on card is on.

Preview on desktop and mobile before saving

Check the layout at both screen sizes, then save the template.

1. Preview the product page on desktop and confirm the two-column layout, gallery, and block order.

2. Switch to the mobile preview and confirm the gallery and details stack into a single column.

3. Select a variant to confirm the media, price, and add-to-cart state update.

4. Save the template.