# Collection overview

<figure><img src="https://2952946279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJbMIFqRrJiqVKdsbTyW4%2Fuploads%2Fvvpu2U1iDibQ2FvlbiM5%2Fimage.png?alt=media&#x26;token=d4c1a7db-a36c-46b8-8d92-f0366d3bb92e" 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%2F8UvNmpJLlJSV5P05r3RY%2Fimage.png?alt=media&#x26;token=4fdc45dd-521f-4a50-98d3-0cacea4b2132" 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%2FANkcaFnM3yHfg1vDnAi6%2Fimage.png?alt=media&#x26;token=7af505af-c189-41ee-89d0-467654cea6eb" 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%2FjlhlkhPkhf8VA84aTLGM%2Fimage.png?alt=media&#x26;token=375db7c7-7fb8-474d-90c1-69a95b144c13" 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%2FCBPrKabZJDhkqFKPl0UX%2Fimage.png?alt=media&#x26;token=ed32c967-2140-40e4-8103-22a2078960a3" 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%2FIzk6MBocdbYl6GTLLApt%2Fimage.png?alt=media&#x26;token=0bab710c-27dd-4849-865c-bf314d7a4197" 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%2FliBnhc3CEefEKpSvsvau%2Fimage.png?alt=media&#x26;token=f604accb-2aaf-4103-856e-7fa196bd8662" alt=""><figcaption></figcaption></figure>
