Product Display

Product Display presents multiple products in different sizes. Each product is equipped with a product image. When the mouse slides over the product image, the corresponding product link appears, facilitating users to quickly understand product information and select their favorite products.

(I) Product Display

• 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.

(II) 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.

(Ⅲ) Title

• Title: Enter the section title.

• Title size: Set the size of the title (Small, Medium, Large, Extra Large, Maximum).

• Color: Can be set to any of the body text, title, or block title colors. Flexible color settings to present diverse display effects.

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

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

• Padding: Manually drag the slider to adjust the margins of the top, bottom, left, and right, with a minimum of 0px and a maximum of 100px.

(Ⅳ) Product Display List

• Maximum number of products displayed: Drag the slider to select the number of products to display, with a minimum of 2 and a maximum of 6.

• Collection: Select the product collection to be displayed.

1. Product Display Card

(1) Quick Add