Product

Overview

The Product block enables you to highlight a specific product in a visually engaging manner within various sections of your store. This block is designed for flexibility, allowing you to tailor both styling and content so that each product highlight matches your overall brand aesthetic and strategy. With this approach, you can seamlessly feature products within editorial, promotional, or multi-product layouts.

⚠️ Important: The Product block supports easy integration and a consistent presentation, ensuring every product looks great and works well no matter where it appears.

Product selection

The product selection setting is the heart of the Product block. Choose a specific product to display from your catalog. The selected product’s images, title, price, and variants will automatically populate the block, serving as the foundation for all further configuration.

Card style and content settings

Card style and content settings define how your chosen product appears within the block. These settings let you adjust the visual layout, image shape, information density, and interactive elements so your products are always showcased at their best.

Image aspect ratio (desktop)

Control the display ratio of product images on desktop screens. Cropping and shape remain consistent to match your design.

1. Use theme setting

   1. Default

2. Default

3. Landscape

4. Portrait

5. Square

6. Widescreen

7. Ultrawide

Image aspect ratio (mobile)

Adjust the image ratio for small screens, maintaining a polished look for mobile layouts. This helps images always feel balanced, regardless of device.

1. Use theme setting

   1. Default

2. Default

3. Landscape

4. Portrait

5. Square

6. Widescreen

7. Ultrawide

Card text content

Specify which product information displays alongside the image. You can emphasize the product’s title, add descriptive text, or keep the layout minimal.

1. Use theme setting

   1. Default

2. Title and excerpt

3. Excerpt only

4. Title only

5. No text

Available in sections

You can place the Product block in many different sections, maximizing how and where you showcase products:

1. Collage

2. Slideshow

3. Multicolumn

4. Sidebar

5. Blog post

6. Page content

💡 Tip: Placing the Product block in various sections lets you try creative layouts, experiment with merchandising, and engage customers in richer ways across the site.

Usage notes

⚠️ Important: Get the most from the Product block by following these best practices:

1. Use high-quality images, and set appropriate aspect ratios for both desktop and mobile layouts.

   1. Preview changes in context to ensure every card looks polished.

2. Provide clear, descriptive alt text for product and swatch images to improve accessibility.

3. Confirm strong contrast and clear text labels on buttons and links for easy use.

4. Opt for use theme setting where possible to maintain design consistency and simplify future updates.

5. Name blocks distinctly in the editor if you have multiple Product blocks, making content management easier.

Always test the Product block on multiple devices and within each section prior to publishing, to catch layout or accessibility issues early.