Featured Collection

The Featured Collection section highlights selected products in your store, enabling you to draw attention to specific items and collections, increase appeal, and boost sales. It also allows users to click to pop up a product popup and add items to the shopping cart without visiting the product page, thereby simplifying the shopping experience.

(I) Basic Settings

• Width: There are three options: Page Container, Stretched, and Full Width. Choosing different widths will present different visual effects.

• Collection: Select the product collection to be displayed.

• Product count: Manually slide to select the number of products to display, with a minimum of 4 and a maximum of 25.

(II) Header Settings

• Heading: Enter the content of the heading.

• Heading size: Set the size of the heading.

• Whether to use artistic fonts: When enabled, the title and description will use artistic fonts.

• Description: Enter a more detailed description of the featured collection; leave it empty if not needed.

• Description style: There are three styles available: Uppercase, Body, and Caption.

• Text alignment: Select the text alignment: Left-aligned, Center-aligned, Right-aligned.

(III) Collection Layout

• Columns: Manually drag the slider to select the number of products displayed in a column, with a minimum of 3 and a maximum of 6.

• "View all" button: Choose whether to enable it, which will be visible if there are more products in the collection than displayed.

• "View all" style: There are three styles available: Link, Outline Button, and Solid Button.

• Color scheme: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.

(IV) Product Card

• Image ratio: Select the image ratio of the product card, with three ratios available: Adapt to Image, Portrait, and Square. Choose the corresponding display ratio to be consistent with the overall design.

• Show second image on hover: Enable this option, and when the mouse slides over the image, the second image will be displayed.

• Vendor: Enable this option, and the product card will display vendor information.

• Product rating: Enable this option to display the corresponding product rating. Note: Rating requires an application.

• Quick add: Choose not to display or use the standard display style.

(V) Mobile Layout

• Columns: There are two display styles: 1 and 2. Select 1 to display one product per column, and select 2 to display two products per column. Choose the corresponding display style according to the overall layout.

(VI) Padding

• Top: Manually drag the slider to adjust the top margin, with a minimum of 0px and a maximum of 100px.

• Bottom: Manually drag the slider to adjust the bottom margin, with a minimum of 0px and a maximum of 100px.

(VII) Template Settings

• Style: There are two display modes: Standard and Card. Choose the corresponding display form according to the page style.

• Color scheme: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.

• Currency codes: Enable this option, and the corresponding currency style will be displayed after the price tag.