Product information

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on metafields and dynamic sources
3. Company XYZ documentation on the title block
4. Company XYZ documentation on the price block
5. Company XYZ documentation on the variant selector block
6. Company XYZ documentation on the quantity selector block
7. Company XYZ documentation on the buy buttons block
8. Company XYZ documentation on the description block
9. Company XYZ documentation on the accordion block
10. Company XYZ documentation on the complementary products block
11. Company XYZ documentation on section padding settings
12. Company XYZ documentation on section backgrounds settings
13. Company XYZ documentation on separators settings
14. Company XYZ documentation on layout widths settings

Helpful videos

Shopify video: 9 tips to optimize your product pages for more sales

Shopify video: 9 tips to optimize your product pages for more sales

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

This section is the main product-detail area on product templates. It combines the product gallery with a customizable stack of content blocks, so you can control how shoppers view media, compare options, read details, and move to purchase. For a broader overview of theme layout building, see Shopify documentation on sections and blocks

Core settings

This section is designed to be rearranged block by block. In most setups, the strongest starting structure is title, price, variant selector, quantity selector, buy buttons, then supporting content such as description, accordions, and trust-building blocks.

If your catalog includes very different product types, this section gives you enough flexibility to keep one consistent page structure while adjusting the content emphasis for each product.

Gallery settings

Gallery settings control how product media appears across desktop and mobile. You can change aspect ratios, the balance between the gallery and content columns, the gallery position on larger screens, and the gallery style used on each device.

Desktop gives you more layout control, including which side the gallery appears on and which column gets more space. On mobile, the section always stacks into a single column, so the main decision is which gallery style feels easiest to browse on a smaller screen.

Use more visual gallery styles for products that depend on photography, finishes, or close detail. Use simpler layouts when the page needs to prioritize specifications, variant choices, or longer product copy.

The gallery can also react to variant changes. This is especially useful for color-based or finish-based products where the selected option should immediately change the visible media.

Variant-based gallery behavior requires a Variant selector block in this section. Without it, the gallery will not update from option changes.

Zoom and video controls help refine the media experience. Lightbox zoom is a good fit when customers need to inspect texture or detail, while autoplay video works best for short clips rather than long demonstrations.

Tip

If you enable autoplay video, keep it muted for a smoother browsing experience.

Slideshow settings

These settings apply when the gallery uses a slideshow layout. You can control visible slide width, animation style and speed, autoplay, looping, navigation, and pagination.

A slideshow with partial next-slide previews can make large media sets feel more interactive. If you switch to fade animation, the gallery behaves more like a single-slide presentation, so some multi-slide interface options become less useful.

Autoplay is best for short visual sequences. For products where shoppers need to compare still images carefully, manual navigation is usually the safer choice.

Supported block types

1. App
2. Accordion
3. Buy buttons
4. Benefits
5. Button
6. Complementary products
7. Contact form
8. Custom liquid
9. Description
10. Heading
11. Icon with text
12. Image
13. Price
14. Quantity selector
15. Rich text
16. Separator
17. Social media icons
18. Title
19. Testimonial
20. Variant selector
21. Video

Key block guidance

Title

The Title block displays the product name and can also show share or print actions. It usually works best at the top of the content stack. Learn more about the Title block.

Price

The Price block shows current pricing and optional policy messaging. Place it close to the title and purchase controls so shoppers can compare price and options without scrolling back and forth. Learn more about the Price block.

Variant selector

The Variant selector block lets shoppers choose product options and can also display color or image swatches. It also enables the section’s variant-based gallery behavior. Learn more about the Variant selector block.

Dropdowns are usually easier for long option lists, while pills or swatches are better for short, visual option sets. If you use swatches, make sure the option names match your product option naming exactly.

Note

Image swatches override color swatches when both are configured for the same option.

Quantity selector

The Quantity selector block adds quantity controls and optional availability messaging. It is most useful when placed directly above or below the buy buttons. Learn more about the Quantity selector block.

If you enable low-stock messaging, set the threshold low enough to feel credible and product-specific.

Buy buttons

The Buy buttons block is the main purchase action area. It can also show extra checkout buttons, free-shipping details, local pickup information, payment icons, gift-card recipient options, installment messaging, and a sticky bar on scroll. Learn more about the Buy buttons block.

Use supporting purchase details selectively. Too many add-ons around the main button can make the purchase area feel crowded, especially on mobile.

If you override the button colors here, check both default and hover states to make sure the primary action stays obvious and readable.

Description

The Description block shows the main product description and can be made expandable. Learn more about the Description block.

Expandable descriptions are a good fit for long product copy. For shorter descriptions, showing the full text immediately usually feels simpler.

Accordion

The Accordion block is useful for FAQs, materials, care instructions, sizing guidance, and shipping details. It can use directly entered content or pull from other content sources. Learn more about the Accordion block.

Separate topics into different rows instead of combining everything into one long panel. That keeps secondary details easier to scan. For content that comes from product data, see Shopify documentation on metafields and dynamic sources

Complementary products

The Complementary products block adds related items that pair with the current product. It works well for accessories, refills, or routine add-ons. Learn more about the Complementary products block.

Choose a compact layout if this block appears within a dense product page. If you use a slideshow layout, keep navigation visible so the recommendations do not feel hidden.

Supporting content blocks

Use the remaining blocks to tailor the page to the product story and shopping flow.

1. Use Benefits, Icon with text, or Testimonial to reinforce trust and value.
2. Use Image or Video to add secondary visual content within the information column.
3. Use Rich text, Heading, and Separator to structure longer content more clearly.
4. Use Button for secondary actions such as size guides or care pages.
5. Use Social media icons, Contact form, Custom liquid, or App blocks only when they support a clear product-page goal.

Standard section settings

Padding settings

Padding settings control the spacing above and below this section. On product pages, tighter spacing usually keeps the gallery and purchase controls closer to the top, while larger spacing creates a more editorial feel.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the full product section. This can help create a stronger branded look, but subtle treatments usually work best in a section that already contains a lot of functional content.

Caution

Strong backgrounds or overlays can reduce readability for pricing, option selectors, and buy buttons. Recheck contrast after styling the section.

Separator settings

Separator settings add an optional line at the top or bottom of the section. They are most useful when the product area needs a clearer visual break from nearby content.

Width settings

Width settings control both the content width and the outer section width. Wider layouts suit image-led products, while narrower layouts can improve readability for text-heavy product pages.

The editor can make width changes harder to judge accurately, so review important layout changes on the live page before finalizing them.

Usage notes

1. Keep purchase actions together. Place title, price, variant selector, quantity selector, and buy buttons close together so shoppers can act without hunting through the page.
2. Match media to the product. Use richer gallery layouts for visual products and simpler galleries when options, specs, or copy need more attention.
3. Use accordions for secondary details. Move FAQs, materials, shipping notes, and care information into separate accordion rows to keep the main content area focused.
4. Check the mobile flow. Since the section becomes a single column on smaller screens, review media order, block stacking, and purchase-button visibility carefully.
5. Review both viewport sizes. Desktop and mobile controls can change layout, alignment, and media behavior in different ways, so check both views before publishing.
6. Watch block-driven changes. Adding or rearranging blocks can materially change the balance of the product page, so recheck the section when you change the content stack.
7. Confirm recommendations with real product data. Complementary product content only appears when the product context and returned items are available, so empty states should not be treated as a setup failure.
8. Preview styled layouts outside the editor. Width, background, and spacing changes can feel different on the live page than they do in the editor.