Product information

Overview #

The Product Information section is designed to be a flexible primary product section that includes a product's title, key information, metadata, variants, and an add-to-cart button. It allows for the creation of custom layouts using various available blocks, making it a versatile component for showcasing products effectively.

Key components and functionality #

Gallery settings

Gallery settings allow you to customize how product images are displayed on both desktop and mobile devices. This includes selecting the aspect ratio and style of the gallery to enhance the visual presentation of your products.

• Image aspect ratio (desktop and mobile): Choose from options like default, landscape, portrait, square, widescreen, and ultrawide. The default setting is square.
• Gallery style (desktop and mobile): Options include one-column-first, one-column, two-column, slider, and none. The default for mobile is slider.

Slideshow settings

Slideshow settings control the display of product images in a slideshow format, allowing for customization of the number of columns and animation styles to create a dynamic viewing experience.

• Column count (desktop and mobile): Set the number of columns for the slideshow, with a range from 1 to 5. The default is 1.1.
• Animation style: Choose between default and fade. The default is default.
• Autoplay settings: Control the autoplay speed and enable or disable autoplay. The default speed is 4 seconds, and autoplay is disabled by default.

Supported block types

The section supports various block types, including accordion, add-to-cart button, benefits, button, custom liquid, description, form, heading basic, icon with text, image basic, price, quantity selector, rich text basic, separator, social media icons, title, testimonial, variant selector, and video.

Usage notes #

• Responsive design: Ensure that the aspect ratio and style settings are adjusted for both desktop and mobile to maintain a consistent and visually appealing layout across devices.
• Performance: Use the autoplay and loop settings judiciously to avoid overwhelming users with too much motion, which can impact page load times and user experience.
• Accessibility: Ensure that text and background colors meet accessibility guidelines to provide a user-friendly experience for all customers.

Usage examples #

1. Custom product layout: Use the section to create a unique product page layout by combining different blocks like the accordion for FAQs, a testimonial block for customer reviews, and a video block for product demonstrations.

2. Responsive design: Adjust the gallery and slideshow settings to ensure images and content are displayed optimally on both desktop and mobile devices, enhancing the user experience.

3. Interactive product display: Enable autoplay and loop settings in the slideshow to create a dynamic and engaging product presentation that captures customer attention.