Featured product

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the variant selector block
3. Company XYZ documentation on the buy buttons block
4. Company XYZ documentation on the complementary products block
5. Company XYZ documentation on the accordion block
6. Company XYZ documentation on section padding settings
7. Company XYZ documentation on section backgrounds settings
8. Company XYZ documentation on separators settings
9. Company XYZ documentation on visibility settings
10. 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

Show a complete product detail and purchase experience on almost any page. This section combines a selected product’s gallery, product information, and flexible content blocks so you can build focused landing pages, homepage promotions, or editorial product features around a single item. For a broader overview of how sections and blocks work in the theme editor, see Shopify documentation on sections and blocks

Core settings

Start by selecting the Product. That choice powers the gallery, title, price, description, variants, inventory-aware controls, and buy actions used throughout the section.

If no product is selected, the layout can still display general content blocks, but product-specific blocks and purchase controls will not be useful.

Gallery settings

Use the gallery settings to shape how product media appears on desktop and mobile. You can choose separate aspect ratios for each device, control the desktop column balance, and place the gallery to the left or right of the product information.

Gallery style changes the feel of the section quickly. Multi-image layouts work well when shoppers need to compare details across several photos, while Slideshow creates a tighter, more controlled presentation. None is helpful when you want a text-first layout or plan to rely on separate image and video blocks instead.

The variant image behavior determines how the gallery responds when shoppers select a different variant. Default keeps the media tied to the selected variant, None leaves the gallery unchanged, and Variant only creates a more focused experience by showing only the selected variant’s imagery.

Tip

Variant-based gallery updates work best when the section also includes a Variant selector block.

Zoom and video controls refine the browsing experience. Use lightbox zoom when image detail matters, and use autoplay sparingly so motion supports the product instead of distracting from the buying path.

Slideshow settings

These settings apply when the gallery uses a slideshow layout. You can control slide visibility, animation style and speed, autoplay behavior, looping, and whether navigation or pagination is shown.

The desktop and mobile slideshow column settings affect how much of the next slide is visible. Smaller values feel more like a traditional single-slide carousel, while larger values hint that more media is available.

Fade animation creates a calmer, editorial presentation, but it also forces a single-slide layout and hides pagination styles that depend on multi-slide movement. Use the default animation style when you want a more interactive gallery feel.

Supported block types

1. App
2. Accordion
3. Buy buttons
4. Benefits
5. Button
6. Contact form
7. Complementary products
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

Block guidance

Main product purchase blocks

These blocks create the core buying flow in this section:

1. Title for the product name and optional share or print actions.
2. Price for pricing and optional policy messaging.
3. Description for the main product description, including an expandable option for longer copy.
4. Variant selector for option selection such as size or color.
5. Quantity selector for quantity controls and stock-aware messaging.
6. Buy buttons for add-to-cart and related purchase actions.

A strong default stack is Title, Price, Description, Variant selector, Quantity selector, and Buy buttons. Start there, then add supporting blocks only when they help shoppers decide faster.

Variant selector

The Variant selector block controls how shoppers choose product options. See Company XYZ documentation on the Variant selector block.

Use dropdowns when you want a compact layout. Use pills or swatches when the option is visual or when faster comparison matters.

If you enable color or image swatches, make sure the option names match your actual variant option names. Image swatches override color swatches when both are configured for the same option.

Buy buttons

The Buy buttons block adds the main purchase action. See Company XYZ documentation on the Buy buttons block.

Keep the area focused. Extra checkout buttons, pickup details, shipping messaging, payment icons, and installment messaging can be helpful, but too many extras around the add-to-cart button can weaken the main action.

Complementary products

The Complementary products block surfaces related items that pair well with the featured product. See Company XYZ documentation on the Complementary products block.

This works best for add-ons, accessories, refills, or routine cross-sells. You can present the items in a grid or slideshow and tune the card layout to fit the page.

Note

This block requires complementary product recommendations to be configured in Search & Discovery, and it will not show out-of-stock items or products already added to the cart.

Supporting content blocks

Use supporting blocks to answer objections, add credibility, or give the product more context.

1. Accordion for FAQs, materials, care details, shipping information, or policy summaries. See Company XYZ documentation on the Accordion block.
2. Benefits and Icon with text for quick value points such as guarantees, delivery perks, or product highlights.
3. Testimonial for social proof close to the purchase controls.
4. Image and Video for extra media outside the main gallery.
5. Button, Rich text, Heading, and Separator for custom page structure.

Advanced and utility blocks

Some blocks are best reserved for specific use cases:

1. App for app-powered product features.
2. Custom liquid for advanced custom output or integrations.
3. Contact form for consultative, custom-order, or pre-sale inquiry flows.
4. Social media icons for brand-community links near the product.

Standard section settings

Padding settings

Padding settings control the space above and below this section. Use tighter spacing when this product feature sits inside a dense landing page, and add more space when it needs to stand out as a major conversion area.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the full section. This is useful when you want the product feature to feel like a hero band or a clearly separated promotional area.

Be careful with highly detailed backgrounds behind busy product galleries. Strong contrast and adequate spacing matter more as the layout becomes more visual.

Separator settings

Separator settings add a top or bottom divider line to the section. Use them to separate this product feature from surrounding content without adding another full design element.

Visibility settings

Visibility settings control whether the section appears on desktop, mobile, or both. This is especially useful when you want different product-feature layouts for different screen sizes.

Width settings

Width settings control the maximum content width and the outer section width. These settings noticeably affect gallery balance, text readability, and how spacious the buying area feels.

The editor preview can make width changes look more constrained than they appear on the live page, so check the actual storefront before finalizing your layout.

Usage notes

1. Build the buying path first. Start with Title, Price, Variant selector, Quantity selector, and Buy buttons before adding extra content.
2. Match the gallery to the product. Use multi-image layouts for detail-heavy products and slideshows for tighter, more controlled presentations.
3. Keep variant behavior clear. If variants have distinct imagery, pair the Variant selector with a gallery setting that makes those visual differences obvious.
4. Use support blocks to reduce hesitation. Add accordions, benefits, testimonials, or complementary products when they help shoppers make the next decision faster.
5. Review the mobile layout carefully. This section collapses into a single-column experience on smaller screens, so check media order, content length, and button prominence before publishing.
6. Check both slide and non-slide states. When you add blocks or switch gallery styles, the section can change from a simple product layout to a more content-led or carousel-driven experience.
7. Treat recommendations as conditional. Complementary product content depends on a suitable product context and available recommendations, so leave room for the block to be absent without breaking the layout.
8. Compare desktop and mobile separately. Layout, alignment, media visibility, and slideshow controls can behave differently across breakpoints, so confirm both views before publishing.
9. Use explicit visual overrides intentionally. Blank or default-style values usually keep the theme’s fallback styling, while custom colors, gradients, or separate desktop and mobile media make the section more self-contained.