> For the complete documentation index, see [llms.txt](https://blueskytechcos-organization.gitbook.io/umino-shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blueskytechcos-organization.gitbook.io/umino-shopify/theme-sections/products-grid.md).

# Products grid

Displays products from a selected collection in an engaging and attractive section.

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

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/tQqDzlZyNOj4wSkav2dd/products-grid.jpg" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

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

## Products grid Setting

#### 1. Section header and general

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.

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

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

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

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

#### 2. Product setting

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

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

#### 3. Banner settings

Choose to add a small image or video that will be on the left or right side of the product

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/FOFRe5K1rcOnRMzExZGm/banner-setting.jpg" alt=""><figcaption></figcaption></figure>

**Add focal point:** This feature helps you select the most important part of an image for your store. It ensures that the focal points of the image always remain visible, even if a section crops the image to fit the layout.

<div><figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FjYcM20dceNDbVusyWVpo%2FScreenshot%202023-12-19%20120220.png?alt=media&amp;token=471137ca-13eb-468e-b20a-8563a3699223" alt=""><figcaption></figcaption></figure> <figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2F72U7oFwfcp8dT2NaJxcs%2FScreenshot%202023-12-19%20140615.png?alt=media&amp;token=656cbb71-4fe3-4838-9160-6e24be350e41" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Please follow this [link](https://help.shopify.com/en/manual/online-store/images/theme-images) for more information.
{% endhint %}

#### 4. View all and Button settings

Show button Load more and button View all.

Button settings: Add a call-to-action button to direct customers to collection pages or add a load more products button.

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

#### 5. 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/Fjd092dX6vv6CiljShyH/image.png" alt=""><figcaption></figcaption></figure>