Product information

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Product information section empowers merchants to present product details, media, and purchase options in a highly flexible layout. This section functions as the core of any product page, blending captivating visuals, detailed descriptions, and actionable purchase controls. With wide-ranging customization, you can tailor the product experience to be inviting and effective on every device.

⚠️ Important: The Product information section serves as a bridge between product discovery and purchase, merging visual storytelling and key purchase actions for an engaging, conversion-driven customer experience.

Key components and functionality

Gallery settings

Gallery settings enable you to precisely control how product media is presented to both desktop and mobile users. These settings are essential for delivering crisp, on-brand images and videos that capture attention, inform, and boost buying confidence.

Set the image aspect ratio (desktop) to determine the shape of gallery media on larger screens. Choices include default, landscape, portrait, square (default), widescreen, and ultrawide. Adapting aspect ratio ensures your visuals always look sharp and professional.

Configure the image aspect ratio (mobile) to fine-tune image display for small screens. Supported values mirror the desktop options, with square as the default, promoting consistency and clarity for mobile visitors.

The column width setting lets you balance the share of space between gallery and product information. Options include equal columns, large column on left (default), and large column on right. This control helps you anchor attention wherever you want it most.

With gallery position, you can choose whether the gallery appears to the left or right of the product info, making it easy to align your layout with reading and design conventions.

Select a gallery style (desktop) to display images in one column first, one column, two columns, slideshow, or none, each supporting different merchandising tactics.

For gallery style (mobile), select from the same layouts; the default is slideshow, giving mobile shoppers a swipeable, engaging browsing experience.

Gallery media can be further refined by gallery variant image style, controlling if you show all images, only variant images, or remove variant images completely. Options are default (default), none, or variant only.

Adjust gallery zoom style to fine-tune interaction with images — select use theme setting (default), none, or open in lightbox to let customers examine product details up close.

The show video player controls option, enabled by default, provides play, pause, and other standard video controls for all embedded product videos, increasing accessibility and usability.

Slideshow settings

Slideshow settings let you craft lively, interactive galleries that keep customers exploring your product visuals. By adjusting these controls, you can create a smooth, immersive experience.

Set the slideshow column count (desktop) to define how many slides are visible at once, ranging from 1 to 5 (step 0.1). The default value is 1.1, so multiple images partially overlap, making navigation visually intuitive.

Modify slideshow column count (mobile) for small screens, providing the same range and a default of 1.1 for seamless mobile browsing.

Animation style switches transitions between default (default) and fade, giving you flexibility in how media changes draw attention.

Control the speed of slideshow transitions using animation speed, ranging from 0.1 to 5 seconds (step 0.1). The default is 0.8 seconds, suited for quick, unobtrusive movement.

Autoplay delay controls timing between auto slide advances, with a range of 0-10 seconds (step 1); the default is 4 seconds.

Enable or disable autoplay slideshow and loop slides to set whether slides advance automatically or cycle back to the start. Both are disabled by default, offering a more user-driven experience unless you opt otherwise.

For navigation cues, pagination style offers the choice of dynamic, fraction, progress bar, or scrollbar, so shoppers always know where they are in a gallery sequence.

Slide navigation controls can be switched on or off using show navigation (enabled by default), providing arrows for easy manual browsing.

Turn on show pagination to display progress dots, numbers, or bars, giving further visual context for gallery navigation.

Supported block types

The Product information section can include a diverse array of blocks. Each block lets you articulate features, build credibility, and drive conversions in varied, highly visual ways.

1. Accordion — Create expandable sections for rich, organized product information.

2. Add to cart button — Insert purchase actions and payment-related controls.

3. Benefits — Display value propositions and key selling points.

4. Button — Add custom calls-to-action for greater interactivity.

5. Add Complementary products block description here

6. Custom liquid — Embed advanced or custom content with code.

7. Description — Include detailed or expandable product text.

8. Form — Present contact, inquiry, or custom forms.

9. Heading basic — Emphasize sections with visual headings.

10. Icon with text — Feature unique selling points with iconography.

11. Image basic — Showcase images to supplement your main gallery.

12. Price — Show product pricing and supporting details.

13. Quantity selector — Manage available stock and let customers select item volume.

14. Rich text basic — Add formatted content, links, or extra information.

15. Separator — Insert space or divider lines to break up content.

16. Social media icons — Link to your brand’s social channels.

17. Title — Supplement page structure and enable print/share functions.

18. Testimonial — Highlight reviews and customer endorsements.

19. Variant selector — Control how shoppers choose product options.

20. Video — Present promotional, explainer, or demo videos.

21. @app blocks — Integrate third-party app content when needed.

You can freely add, remove, or reorder these blocks to create the most effective layout for your product and audience.

💡 Tip: Experimenting with block placement and types allows you to highlight key product features, answer questions, and build trust at every step of the customer journey.

Usage notes

⚠️ Important: Always preview changes in the Product information section on both desktop and mobile. Testing layouts, gallery arrangements, and block positions ensures a seamless, intuitive experience for all visitors.

Responsive design is essential. Adapt media ratios, blocks, and columns for every device. Use clean typography, concise messaging, and visually striking call-to-action elements.

Prioritize performance by uploading optimized images and videos. Avoid excessive autoplay and looping, which can increase load times or distract shoppers.

Accessibility must be built in from the start. Enable player controls on videos, provide descriptive alt text for every image, and group related content thoughtfully so all shoppers can easily navigate.

Test vital customer interactions like add-to-cart, variant selection, and forms. Preview everything in real-world conditions to verify that visuals and workflows function as intended across every platform.

By making full use of robust gallery, slideshow, and block settings, the Product information section helps you shape dynamic, visually stunning, and conversion-optimized product pages. Iterate frequently to maintain sharp, effective product presentations that evolve with your brand and customers.