Product information

The Product information section allows for versatile customization of the product page, enhancing its usability and aesthetics.

By adjusting layout, style, and interactive features, you can provide a more engaging and informative shopping experience. Notable features include Sticky content, and responsive settings tailored for desktop and mobile.

Section settings:

1. Show breadcrumbs:

When this setting is enabled (checked), a breadcrumb navigation trail will appear above the product thumbnails on the product page and display the navigation path (e.g., Home / Collection Name / Product Name). Breadcrumbs are especially useful for stores with multiple collections or deep navigation levels. When unchecked, this navigation trail will be hidden.

2. Select the first available variants:

If enabled, only images for in-stock variants will display by default. If the featured image belongs to an only shown available products, reducing confusion.

3. Enable sticky content on desktop:

Keeps the product information panel (title, pricing, description, add-to-cart button, etc.) fixed in place as users scroll through product images. Improves accessibility for long product pages. And sticky content deactivates once users scroll past the product media.

4. Layout:

• Desktop media position:

  • Left: Displays product media on the left of the content.

  • Right: Displays product media on the right of the content.Note: Product media always appears above product information on mobile devices for a natural scrolling experience.

• Desktop media size: Adjusts the width ratio between product media and product information on desktop.

  • Small: Minimizes the media width, placing greater emphasis on product information.

  • Medium: Balances media and information width for equal prominence.

  • Large: Maximizes the media width, making it the focal point of the section.

Note: Media width is automatically adjusted for mobile to maintain clarity.

• Desktop media layout: Controls the arrangement of product media thumbnails.

Thumbnails left

Displays a vertical strip of thumbnails to the left of the main image.

Thumbnails bottom

Stacked

2 columns

Mosaic

• Desktop media ratio: Ensures consistency in the visual display of media items.

5. Media settings

• Desktop navigation style: Customizes the navigation options for browsing product media.

  • None: Removes navigation for a cleaner, minimalist presentation.

  • Arrows: Displays directional arrows for scrolling through media.

• Enable zoom: Activates the ability to zoom in on media when clicked and allows customers to view intricate product details, improving their confidence in purchasing.

• Autoplay videos: Enables videos to play automatically when selected in the media carousel. Use autoplay for attention-grabbing promotional videos.

• Enable video looping: Ensures videos replay continuously. If unchecked, videos will play only once. Looping videos are ideal for showcasing product features in a repetitive manner.

6. Mobile layout:

Adjusts the arrangement of product media for mobile users.

• Mobile media layout:

Thumbnails bottom

Displays media thumbnails in a horizontal row below the main product media.

Stacked

Hide thumbnails

• Mobile media ratio: Standardizes the visual aspect ratio of media items on mobile devices.

• Image width: Controls the width of the main product image on mobile.

  • 90% width: Images occupy 90% of the screen width.

  • Full width: Images span the entire width of the screen.

Note: Use images and videos with a minimum width of 2500px to ensure optimal quality across devices.

The Product information section comes with default blocks that are always included, providing core details about the product:

• Title: Displays the name of the product.

• Price: Shows the product's price, including any discounts.

• Variant picker: Allows customers to select from available variants (e.g., sizes or colors).

• Buy buttons: Includes the “Add to cart” or “Buy now” buttons.

• Badges: Displays promotional labels like “Sale” or “Sold out.”

• Line item property: Enables customers to provide custom input, such as engravings or notes.

• Share: Allows sharing the product on social media or via email.

Note: These default blocks are always visible in Quick view (activated via the Quick add setting in the Theme settings). They cannot be disabled from appearing in Quick view.

In addition to default blocks, you can add optional blocks to the Product information section. These blocks offer customization and additional functionality. Each optional block includes a “Show on quick add” setting, which allows you to control whether the block appears in the Quick view feature.