Featured product

Overview #

The Featured Product section is designed to showcase a specific product on your online store. This section is highly flexible, allowing you to display a product's title, key information, metadata, variants, and an add-to-cart button. You can create custom layouts using various available blocks, making it a versatile tool for highlighting individual products effectively.

Key components and functionality #

Product

This setting allows you to select the specific product you want to feature in this section. It is the core element around which the rest of the section is built.

Gallery settings

The gallery settings control how product images are displayed. You can choose different image aspect ratios for both desktop and mobile views, ensuring that your product images look great on any device.

1. Image aspect ratio (desktop): Choose from options like default, landscape, portrait, square, widescreen, and ultrawide. The default setting is square.
2. Image aspect ratio (mobile): Similar options are available for mobile, with the default also set to square.

Column width

This setting determines the width of the columns in the gallery. Options include equal columns, a larger column on the left, or a larger column on the right, with the default being left.

Gallery position

You can position the gallery on the left or right side of the section, allowing for flexible layout customization.

Gallery variant image style

This setting allows you to choose how variant images are displayed in the gallery. Options include default, none, or variant only, with the default being default.

Slideshow settings

These settings are applicable if you choose to display your product images as a slideshow. You can adjust the number of columns for the slideshow on both desktop and mobile devices.

1. Desktop slideshow column count: Set between 1.1 and 5, with a default of 1.1.
2. Mobile slideshow column count: Similar settings apply for mobile, with the same default of 1.1.

Animation style

Choose between default and fade animation styles for your slideshow. The default setting is default.

Pagination style

This setting controls how pagination is displayed in the slideshow. Options include dynamic, fraction, progress bar, and scrollbar.

Show navigation

Enable or disable navigation controls for the slideshow, allowing users to manually navigate through slides.

Show pagination

Enable or disable pagination indicators, which show the number of slides and the current slide position.

Usage examples #

1. Highlight a new product launch: Use the Featured Product section to draw attention to a new product by displaying its images, variants, and an add-to-cart button prominently on your homepage.

2. Seasonal promotions: Feature a product that is part of a seasonal promotion, using the gallery and slideshow settings to showcase different angles and uses of the product.

3. Responsive design: Adjust the image aspect ratios and column widths to ensure that your product looks great on both desktop and mobile devices, providing a seamless shopping experience for your customers.

By utilizing these settings, you can effectively showcase individual products, enhance user engagement, and drive sales through a visually appealing and informative product display.