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

# Cascading product

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" 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="/files/tipkln4Happ2qFf8So5J" alt=""><figcaption></figcaption></figure>

Cascading product section can be used to showcase products from a collection in a cascade layout.&#x20;

## How to create a Cascading product

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

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

## Section settings

### **General**

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

You can also add a preferable **Collection** and adjust the number of shown products - **Products to show** (between 2 and 12).

<figure><img src="/files/utHVrdfG7T9nO0oeibAT" 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="/files/XYZvgrhBq72kP4X5ZaHp" 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 product items and **Variation between media sizes** (None/Low/Medium/High) to create unique layouts for the section.

<figure><img src="/files/pfTo3HV3DFs7P1aZsjd3" 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="/files/lFVeQbLOfw3YiLXCU9GB" alt=""><figcaption></figcaption></figure>