Product

Overview #

The Product block is designed to display a product card within a theme. This block showcases a product's title, featured image, excerpt, and a link for more information. It is versatile and can be used in various sections such as Collage, Slideshow, and Multicolumn.

Key components and functionality #

Product block

This block is intended to display a product card with essential product details. It can be customized with various settings to fit different design needs.

• Product: Displays the product's title, featured image, and a link to learn more.

Card settings

Card settings allow you to customize the appearance and behavior of the product card, ensuring it aligns with your design preferences.

• Card style: Choose from options like theme setting, banner, no image, no padding, and padding. The default is theme setting.
• Image aspect ratio: Options include theme setting, default, landscape, portrait, square, widescreen, and ultrawide. The default is theme setting.
• Button style: Customize the call-to-action button with options like theme setting, hide, icon only, text only, and text with icon. The default is text with icon.
• Text display: Options include theme setting, title and excerpt, excerpt only, title only, and no text. The default is theme setting.
• Text alignment: Adjust horizontal alignment with options like theme setting, left, center, and right. The default is theme setting.
• Vertical alignment: Options include theme setting, top, middle, and bottom. The default is theme setting.
• Variant display: Choose how to display product variants with options like theme setting, hide, show color swatches, show color and image swatches, show image swatches, and show pills. The default is theme setting.

Editor settings

Editor settings allow you to customize the block's title and visibility, ensuring it fits seamlessly into your design.

• Title: Set a custom title for the block. The default is Product.
• Visibility: Control when the block is displayed with options like do not hide, hide on desktop, and hide on mobile. The default is do not hide.

Available in sections #

• Collage
• Slideshow
• Multicolumn

Usage notes #

• Responsive design: Ensure that the block settings are optimized for different screen sizes to maintain a consistent user experience across devices.
• Performance: Use optimized images and limit the number of products displayed to enhance loading times.
• Accessibility: Ensure that text and background colors meet accessibility guidelines for readability.

Usage examples #

1. Collage section: Use the Product block to create a visually appealing collage of products, highlighting key features and benefits.
2. Slideshow section: Incorporate the Product block into a slideshow to showcase a series of products with dynamic transitions.
3. Multicolumn section: Arrange multiple Product blocks in a multicolumn layout to display a variety of products side by side.