# Repeater

The **Repeater** is a powerful tool that allows you to duplicate and display repeating patterns of content effortlessly, ideal for product lists, feature showcases, reviews, blog posts, or any content that appears in multiple similar blocks.

Instead of manually creating multiple versions of the same element, the Repeater automatically handles the layout, keeping everything consistent and easy to update. When used with [**data binding**](https://docs.funnelish.com/advanced-features/data-bindings), the Repeater will pull in live data (e.g. products, reviews, posts) so you don’t have to manually update each item.

## Adding a Repeater widget <a href="#adding-a-container-widget" id="adding-a-container-widget"></a>

To add a repeater to your canvas, continue with the steps below:

1. Open the funnel you want to edit and edit the page.
2. On the left panel, select the **Repeater** widget
3. Click and drag it in your layout where you want the repeated items to appear.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2Fx5WoYRNoTA7stVud2NCs%2Fimage.png?alt=media&#x26;token=dec1c4db-5d46-4689-87f2-0484839a214b" alt=""><figcaption><p>Selecting Repeater from elements panel</p></figcaption></figure>

## Designing the Template

Once you added the repeater widget, you will see an empty container box and two boxes.&#x20;

The empty container will hold the template you want to repeat and the two boxes are where the copies will be shown.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FKKi5hAHzNQ32BH2epTvw%2Fimage.png?alt=media&#x26;token=031304f8-15b9-4bb5-8a19-f1ccda4bdb01" alt=""><figcaption><p>Container inside Repeater</p></figcaption></figure>

1. To add more boxes to the container, click **(+) Add new box**.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FwOdiUE8WTvkGZlFVesxW%2Fimage.png?alt=media&#x26;token=8cbe6f1b-c6f2-4174-8ccb-fad81cea9306" alt=""><figcaption></figcaption></figure>

2. Now click **(+)** inside each box to add the desired element.&#x20;

{% hint style="info" %}
In this example we'll be creating a product list using a Headline, an Image and a Paragraph element.
{% endhint %}

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FCPE5dSmXV3RnhfC1HEB4%2F2025-09-29%20at%2011.45.gif?alt=media&#x26;token=7f7a97f1-e7e8-4706-be92-a3c6de6132e6" alt=""><figcaption><p>Elements in the template container</p></figcaption></figure>

{% hint style="info" %}
You can add elements such as: Image (for product image), Heading / Text (for product title), Paragraph (for description or details), Video (for product reviews), Price element, Button or Radio Button (for “Add to Cart” or select) etc...
{% endhint %}

You should now see the elements added and duplicated automatically in the repeater.

## Setting Up the Data Binding&#x20;

### Binding the Repeater

1. Click the **Repeater**&#x20;
2. On the left hand panel, click **Data** > **Data Bindings**
3. Click **Products Collection**&#x20;
4. Assign the **main dataset.** This is (e.g., Products, Order Bumps, Reviews).&#x20;
5. Click **Save.**

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FcPHBL45bP6kkuMrMT1cg%2Fimage.png?alt=media&#x26;token=fc84a06f-7952-4691-9afe-d4312447a8bd" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
The parent container/section/box should *not* be empty because it defines the data context for everything inside.
{% endhint %}

### Binding the Elements

1. Click an **Element**
2. Click **Data > Data Binding**
3. Bind each element to the corresponding data.  In this example, we'll bind the **headline** element to the **product name,** the **image** to the **product image** and the **paragraph element** to the **displayed price.**<br>

   <figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FXUknqNJ1FVMCDd3vDC8u%2Fimage.png?alt=media&#x26;token=6097a7b8-1cc5-44f1-a1aa-c27520c929b6" alt=""><figcaption><p>Data binding the headline element</p></figcaption></figure>

   <figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FTSgKYsM8cfB5xq49uyU7%2Fimage.png?alt=media&#x26;token=ce185a23-3667-4a89-b17c-bfdd771aff9f" alt=""><figcaption><p>Data binding the image element</p></figcaption></figure>

   <figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FzntUSwT6Ef4RFNGGy4ST%2Fimage.png?alt=media&#x26;token=48ace4dd-c9ad-40e4-a6c2-7fbf7237f5cc" alt=""><figcaption><p>Data binding the paragraph element</p></figcaption></figure>

\
For example:

* Button / Radio → Product ID
* Title / Heading → Product Title or Product Name
* Image → Product Image
* Paragraph  → Product Description
* Price → Product Price

{% hint style="success" %}
Repeat this action for each element&#x20;
{% endhint %}

{% hint style="info" %}
👉 Alternative setup: You can bind the **section itself** (the parent) directly to a dataset. Then, add a row or a repeater inside, inherit the dataset, and bind the elements.
{% endhint %}

## Styling the template's layout

Now you can focus on styling the layout adding spacing, colors, fonts, padding/margins, borders etc.

Once you're done, click **Save Changes.** To see it in action, click **Preview.** \
\
In the preview page, you will see the Repeater generating one item per product (or per dataset item), each filled with the correct data.&#x20;

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FjBFeo3rxFCIyhhd7UOgr%2F2025-09-29%20at%2012.14.png?alt=media&#x26;token=0fea9cf3-1348-43e4-b547-f346863e67c4" alt=""><figcaption></figcaption></figure>

<p align="center"></p>


---

# 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.funnelish.com/start/funnel-builder/repeater.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.
