> 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-series-list.md).

# Product Series List

Product Series List vertically arranges multiple product series, with individual images, titles, and descriptive texts for each series. It more intuitively showcases the characteristics of a product series, making it easy for users to find related products through the product series.

### (I) Product Series List

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

### (III) Collection

* **Collection**: Select the product series to be displayed.
* **Background**: Upload desktop display images for the product series; high-resolution images are recommended. If not uploaded, the product series cover image will be displayed by default.
* **Mobile background**: Upload mobile display images for the product series; high-resolution images are recommended. If not uploaded, the product series cover image will be displayed by default.

#### 1. Title

* **Text content**: Enter the display title of the product series.
* **Title size**: Set the size of the title (Small, Medium, Large, Extra Large, Maximum).

#### 2. Description

* **Text content**: Enter supplementary description text for the product series.
* **Size**: Adjust the display size of the text, with a size ranging from 0.8 to 3.

#### 3. Button

* **Button text**: Enter the content of the button.
* **Open in new tab**: Enable this option to open a new page when the button is clicked.
* **Style**: Choose the corresponding button style. There are four styles available: Primary Button, Secondary Button, Arrow Button, and Link. For Primary Button, Secondary Button, and Arrow Button, there are three sizes: Large, Medium, and Small. You can adjust the button's display style and size according to different scenarios.

#### 4. Layout

* **Horizontal alignment**: There are three options: Left-aligned, Center-aligned, Right-aligned.
* **Vertical alignment**: There are three options: Top, Center, Bottom.