> 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="/files/UmgBmSnuRVhrVCW8l4DV" 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="/files/h7G8ui9uiqG1GlvToKWb" 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="/files/vF8jwOlL9cXk3yEwkQD3" 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="/files/cFNwlkZQnofjCZ1hxsHd" 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="/files/7h0C7RhF5DJLeZCPLU03" 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="/files/TQ4y27XC5A28kcBHCY0c" 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="/files/UV2OO2UsrVRcDqLelinB" alt=""><figcaption></figcaption></figure>