# Products list

{% embed url="<https://youtu.be/cUKfB1jjw6A>" %}

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Products list**
3. **Save**
   {% endhint %}

## Products list Setting

#### 1. Section header settings&#x20;

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.&#x20;

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/QM6XIH7h2YCgsjraCJTY/image.png" alt=""><figcaption></figcaption></figure>

#### 2. General settings

**Layout:** You can choose between Container, Wrapped container, Full width for the banner layout.

**Design:** Select between 2 designs for product card.

Adjust the number of shown products, columns per row, and the column gap.

**Color schema:** You are allowed to change text color, background color with preset color.

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FriniWUXIDorS2rxUktGd%2Fimage.png?alt=media&#x26;token=20aff81d-35de-44ac-aa25-dedd217a7379" alt=""><figcaption></figcaption></figure>

#### 3. Section padding

Section padding allows you to specify the space between the slideshow and the preceding or following sections, or both.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/D7bIW8QwZpLV5lEfTOoG/image.png" alt=""><figcaption></figcaption></figure>

## Block settings

You have the option to customize the displayed name for each collection in the column heading. If left blank, the system will automatically generate a name using the collection's title followed by the word 'Products,' ensuring a seamless and intuitive presentation.

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FVIbm2VWiGN9TvbcodzTD%2Fimage.png?alt=media&#x26;token=8f0fbbe0-70c5-4ed7-9d1c-0bc31e8ff0dd" alt=""><figcaption></figcaption></figure>