> 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/collection-packery.md).

# Collection packery

A guide to set up a collection packery

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

The collection list displays a quick list of desired collections to catch visitors' attention.

{% hint style="success" %}
Steps

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

## Collection packery settings

### **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://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FQISFYNz7CtO4gRxFtedf%2FScreenshot%202024-01-03%20143117.png?alt=media&amp;token=20563cd2-6bc5-40a2-a8f9-d770025969d9" alt=""><figcaption></figcaption></figure>

You can choose your container type for the collection list as:

* Default
* Fluid container
* Full width

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

{% hint style="info" %}
Follow this [link](https://blueskytechcos-organization.gitbook.io/umino-shopify/theme-settings/color) to learn more about setting up Color schema.
{% endhint %}

### 2. Collection list settings

* **Design:** 2 designs of displaying collection title

{% tabs %}
{% tab title="Default" %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2F4DgmrTfikfOQXSV4WXD8%2Fimage.png?alt=media&amp;token=f11df790-13cf-40e4-b914-121515592bbc" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Modern" %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FFj0WttmJ6YpW29dD5QBm%2Fimage.png?alt=media&amp;token=d133a81c-6ac5-49cc-8644-b35b3687b057" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Hover effect:** This option allows you to set an effect when hovering for image with many selections (Warning: Hovering effect will resize your images).
* **Aspect 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.

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FJinJJZZmYXscquwbBz87%2Fimage.png?alt=media&amp;token=ab1b7efe-3cda-4daa-87d4-1bddcf96b650" alt=""><figcaption></figcaption></figure>

You can use **Section padding** to designate the distance between the **Collection packery** and the sections that come before, after, or on both sides.

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

You have the flexibility to adjust the position of each block as you desire.

{% embed url="<https://drive.google.com/file/d/1MkMKRSSWGDeRlA8dIChqQxjwPGjdJEhI/view?usp=sharing>" %}

### 3. Collection/banner block settings

Individual collection or banner blocks come with their unique settings, allowing you to customize elements like title, image, and the associated collection link.

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2Fh9s6A83s23JQ28Ya6LkH%2FFrame%204.jpg?alt=media&amp;token=01c63348-28f9-4597-acbd-393603fc7c18" alt=""><figcaption></figcaption></figure>

* **Collection Heading**: Represents the title displayed on the button within each collection block.
* **Select Collection**: Enables the choice of a specific collection for the block.
* **Select Image**: Allows you to opt for a thumbnail image distinct from the collection's default thumbnail for each block.

The alignment will be adjusted appropriately based on the number of collections.

{% tabs %}
{% tab title="3 Collections" %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FcrZ8elV9W0m2Yy5DCrKH%2Fscreencapture-dtian-umino-myshopify-2024-01-03-17_39_51.jpg?alt=media&amp;token=d186b8be-ef3c-4001-8f4c-164e33ffa4c7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="4 Collections" %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FJdLXHEYCxAhW28jaHeQG%2Fscreencapture-dtian-umino-myshopify-2024-01-03-17_36_27.jpg?alt=media&amp;token=b9531406-c3ed-4025-8949-ceb7a1525f8c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="5 Collections" %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FMKmAYFdZIhWj3jMalni2%2Fscreencapture-dtian-umino-myshopify-2024-01-03-17_33_26.jpg?alt=media&amp;token=26796da6-bebf-488b-b317-852cbd9433f6" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="6 Collections" %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FFj0WttmJ6YpW29dD5QBm%2Fimage.png?alt=media&amp;token=d133a81c-6ac5-49cc-8644-b35b3687b057" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}