> For the complete documentation index, see [llms.txt](https://nestable-studio.gitbook.io/test/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nestable-studio.gitbook.io/test/theme-sections/product-display.md).

# 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**