# Scrolling layers

<figure><img src="/files/Pa4oXSNJK96FscCZMMn3" alt=""><figcaption></figcaption></figure>

Create an engaging visual experience with scrolling layers to highlight products, promotions, and key brand messages.

## How to add a Scrolling layers section to your Shopify store

{% hint style="success" %}

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Scrolling layers** section.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to customize a Scrolling layers section <a href="#how-to-customize-a-banner-with-tabs-section" id="how-to-customize-a-banner-with-tabs-section"></a>

### Section settings

{% hint style="info" %}
[Overview](/pebble-theme/theme-sections/overview.md#common-settings-available-in-most-sections)
{% endhint %}

### Block settings

The Scrolling layers section includes two blocks: **Header** and **Scrolling layer item**.

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

<figure><img src="/files/mPRSTIxyZhaKSy65n3lX" alt=""><figcaption></figcaption></figure>

Use the **Header** block to create and customize the section’s heading and introductory content.

<table><thead><tr><th width="214.1806640625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Alignment</strong></td><td>Set the header alignment: left, center, or right.</td></tr><tr><td><strong>Devices</strong></td><td>Switch between desktop and mobile padding settings.</td></tr><tr><td><strong>Bottom</strong></td><td>Adjust the spacing below the header.</td></tr></tbody></table>

{% hint style="info" %}

#### 📦 Nested dynamic blocks

* **Heading** – Add a main title
* **Subheading** – Provide supporting text above or below the heading
* **Text** – Include additional descriptions or details
* **Image** – Display an image or icon
* **Button** – Add a call-to-action
  {% endhint %}

Learn more: [Basic](/pebble-theme/theme-blocks/basic.md)
{% endtab %}

{% tab title="Scrolling layer item" %}

<figure><img src="/files/JChoPNGPwvv3lvk32Nsm" alt=""><figcaption></figcaption></figure>

Add a scrolling layer item with image, text, and icon to highlight key content.

<table><thead><tr><th width="147.124755859375">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>Select or upload an image to display in the scrolling layer item.<br>Use a <strong>minimum width of 800px</strong> to keep it sharp and properly fitted.</td></tr><tr><td><strong>Aspect ratio</strong></td><td>Choose how the image is scaled.</td></tr><tr><td><strong>Corner radius</strong></td><td>Adjust the roundness of the image corners.</td></tr><tr><td><strong>Icon</strong></td><td>Select an icon to display alongside the content.</td></tr><tr><td><strong>Icon size</strong></td><td>Set the size of the icon (preset or custom).</td></tr><tr><td><strong>Width</strong></td><td>Adjust the icon width.</td></tr><tr><td><strong>Width mobile</strong></td><td>Adjust the icon width on mobile devices.</td></tr></tbody></table>

{% hint style="info" %}

#### 📦 Nested dynamic blocks

* **Heading** – Add a main title
* **Subheading** – Provide supporting text above or below the heading
* **Text** – Include additional descriptions or details
* **Button** – Add a call-to-action
  {% endhint %}

Learn more: [Basic](/pebble-theme/theme-blocks/basic.md)
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/pebble-theme/theme-sections/scrolling-layers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.