# Scrolling cards

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

<figure><img src="/files/qo45ReewgrYgzT8Z6m5D" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Image" %}

<figure><img src="/files/fUr3ctveShfg774nVjIL" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

The **Scrolling cards** section is a dynamic, editorial-style layout that pairs **scroll-animated headings** with **zigzag cards** to create a high-impact storytelling moment. As shoppers scroll, the content stays fixed while cards move vertically—perfect for campaigns, brand storytelling, or highlighting product features in an engaging way.

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

{% hint style="success" %}

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

## How to edit the section Scrolling cards

The Scrolling cards section includes 2 static blocks:

* [Scrolling cards](/pebble-theme/theme-sections/scrolling-cards.md)
* [Headings](#headings)

{% tabs %}
{% tab title="Scrolling cards" %}
Holds all the cards that will scroll in zig-zag form. On mobile, the cards are displayed in a carousel.

<div><figure><img src="/files/BSpiv0GNEXMrDv62fA5w" alt=""><figcaption></figcaption></figure> <figure><img src="/files/aQFYeiTfMtWUbZ9XL6bH" alt=""><figcaption></figcaption></figure></div>

**Features:**

* Supports multiple [Product overlay card blocks](/pebble-theme/theme-blocks/product.md#product-overlay-card)
* Mobile swipe support
* Auto zigzag pattern for alternating cards
* Cards align left/right based on position
  {% endtab %}

{% tab title="Scrolling headings" %}
The animated heading area scrolls vertically.

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

**Features:**

* Looping or stacked heading lines (e.g., Heading 1 → Heading 2)
* Smooth scroll-mask animation
* Height automatically adjusts to typography size

{% hint style="info" %}
Besides headings, you can also include a descriptive text, a subheading, and a button.
{% endhint %}
{% 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-cards.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.