# Cascading collection

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FDuaBJ0zieV4mnlcSFCfi%2Fimage.png?alt=media&#x26;token=f5102996-7a59-4b0d-8993-721a4b5fe8c4" alt=""><figcaption></figcaption></figure>

The cascading collection displays a short list of collections using the cascading layout to catch visitors' attention.&#x20;

This layout gives the flexibility to create unique designs for the collection list.

{% hint style="success" %}
**Steps:**

1. In the theme editor (**Customize**) > click **Add section.**
2. Select **Cascading collection.**
3. **Save.**
   {% endhint %}

## Section settings

### **General**

Adjust the **Container type** (Default/Full width/ Use container box) and **Color scheme** for this section.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FBaJL9FKazA26OqzoCR2f%2Fimage.png?alt=media&#x26;token=ae9cc023-c741-4efe-bf0b-7b492b633290" alt=""><figcaption></figcaption></figure>

### **Section header**

Use the provided text fields to add a suitable **Heading**. Leave this field blank if you do not want to display it.&#x20;

Adjust the **Heading size** (Medium/ Large) and **Text alignment** (Left/ Center) to make the content look reasonable on your page.

You can also make the heading overlay and sticky within the section by enabling the **Overlay heading** checkbox.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FWyrvMwO7Xs3fuBEvlNCS%2Fimage.png?alt=media&#x26;token=580e7377-5cb3-4db3-a1ac-7ce4ad19b8f4" alt=""><figcaption></figcaption></figure>

### **Grid settings**

Determine the **Vertical space between items** (Small/ Medium/ Large) and the **desktop column gap** (50px - 250px) between them.&#x20;

You can also adjust the **Sequence** (1 - 5) of collection items and **Variation between media sizes** (None/ Low/ Medium/ High) to create unique layouts for the section.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FPme9DYiBgVR2IsLjKtJl%2Fimage.png?alt=media&#x26;token=73e2023f-a085-4a74-b154-951d548c9a29" alt=""><figcaption></figcaption></figure>

### **Animation**

You can **Enable parallax animation,** which makes the small cascade media scroll faster than the large one.

Adjust the level of parallax animation by changing the **Parallax intensity** range (%).

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fcj538IKsK1xATarvjY6n%2Fimage.png?alt=media&#x26;token=a03b841d-0cb0-44ce-b04b-bbb1e142f113" alt=""><figcaption></figcaption></figure>

## Block settings

Select the **Collection** you want to attach and an **Image** for it. You can leave the image setting blank to use the collection's featured image.

Insert the custom content you want for the **Collection title**, or leave it blank to display the collection titl&#x65;**.**

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FihwMk0ctauhnaOLHr1fO%2Fimage.png?alt=media&#x26;token=fe366030-3bc8-4ffc-b0e4-aadd1351e633" alt=""><figcaption></figcaption></figure>
