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

# Collection overview

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-92d03e107bda0e78465f00123f1fe26b8ac54ae7%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

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

## Section settings <a href="#collection-packery-settings" id="collection-packery-settings"></a>

### **Section header** and **General** <a href="#id-1.-section-header-and-general" id="id-1.-section-header-and-general"></a>

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

**Color scheme:** Set text color and background color with preset scheme

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-3c854d3f627f10c36e3ed20ba79f267f0a2388a9%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

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.

Adjust the text alignment (left/center/right) along with the background color and container type.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-71350ee7122031c9bb65b0fb1cae011f4dc519ea%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### Collection settings <a href="#id-2.-collection-list-settings" id="id-2.-collection-list-settings"></a>

**Image ratio:** You can set the ratio for images with presets or set up your own ratio with **Custom ratio**

**Column gap:** You are allowed to change both of them for mobile devices.

**Vertical alignment**: You can set the alignment for the content.

**Width image**: Set the width of the image to control its size and fit within the layout.

**Position image:** Choose the position of the image, either on the left or right, to align with your layout preferences.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-03cb207aa5fb5e832107be7ae40a3ec8670c7abd%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### Section padding

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

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-b6d0d5a311c9449ec17375776678d705fa3c751c%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Block setting

Choose the image and the link that leads to the desired collection, providing a direct pathway for users to explore specific products or categories.

**Content heading:** Set the title for the collection section to clearly display its purpose and content.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-a1da56d4f3d6054c8d60f67eceea12e9c243baf1%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

**Typography:**

Customize the heading style by adjusting the font size, font weight, and enabling uppercase formatting (True/False) for a consistent design.

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fgit-blob-8b8af2a085fb6c36a58646fb0d92560c02816f7a%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>
