The Dynamic Repeater is a collection-based design widget that allows you to quickly and easily create repetitive, structured layouts where the design is the same for each item, but the content is different; such as lists of products, events, or services.
The wrapper (also called "frame") of the Repeater widget is the container for the collection items. In the image below, three collection items are pictured.
Each collection item displays content from a row in the connected internal collection. This is made possible by connecting widgets to columns in the internal collection.
For example, on a dog adoption website there is an internal collection listing adoptable dogs. See an image of the collection below.
To display the dogs in the Dynamic Repeater, the columns and widgets are connected as follows:
-
“Picture” column is connected to an Image widget.
-
“Dog name” column is connected to a Small Heading widget.
-
“Dog description” column is connected to a Text widget.
When you add the Dynamic Repeater to the canvas, a sample internal collection is created and linked to the Dynamic Repeater. You can modify this sample collection, or create a new collection to link to the Dynamic Repeater.
To add a Dynamic Repeater widget:
-
In the Layout Elements section of the Widget panel, locate Dynamic Repeater and drag it onto the canvas. Note that when you add the Repeater to the canvas, a sample internal collection is created with 4 collection items (rows in the collection) that populate in the Dynamic Repeater. This is to help you visualize the design before adding your own content.
-
If desired, you can add and remove widgets from the Dynamic Repeater to meet your needs. It does not matter which collection item you modify, the changes will automatically update all other collection items. Note that new widgets will need to be manually connected to a specific collection column. This will be completed in a later step.
You can modify the design of the Dynamic Repeater's wrapper or the collection items inside the Dynamic Repeater. Note that design changes made to one collection item will apply to all others. This allows you to save time instead of manually applying design changes to each individual collection item and risking mistakes.
To modify the design of the wrapper, click the Dynamic Repeater widget to open the floating menu and click Edit Design. In the Wrapper section of the design panel you can configure the following:
-
Wrapper design. You can define the Dynamic Repeater’s background color, alignment, size, animation, position (fixed or pinned), and space between collection items inside the Dynamic Repeater.
To learn more about the design panel sections and how to configure each design option, see Design with Flexbox Technology.
To learn more about what “fixed” or “pinned” means in terms of widget position, see Widget Position: Fixed and Pinned.
To define how collection items display in the Dynamic Repeater, click the Dynamic Repeater widget to open the floating menu and click Edit Design. In the Layout section of the design panel you can configure the following:
-
Items per row. Select how many collection items to display per row. Maximum of 10 items per row.
-
Items fit. Select either Fixed Width or Stretch to Fit.
To enable pagination or a load more option, open the Navigation section of the design panel and switch on the Enable navigation toggle. Once navigation is enabled, configure the following:
-
Pagination or Load more. Pagination splits the collection items into pages that site visitors navigate between. Load more displays a set amount of collection items, then each click loads an additional set of collection items.
-
Items per page. Define how many collection items to display per page or before more results are loaded.
To make design changes to the widgets inside a collection item, click an individual collection item to open the floating menu and click Edit Design. All design changes will be applied to each item in the Repeater. In the Layout section of the design panel you can configure the following:
-
Content alignment. Define horizontal and vertical alignment of content inside the collection item.
-
Stacking direction. Select whether the widgets inside the Repeater are stacked horizontally or vertically.
-
Wrap and row alignment. If desired, you can enable the widgets for each collection item to wrap into another row. If you select to wrap, you also need to define row alignment.
It is important to note, the width or height of the collection items in the Dynamic Repeater cannot be changed. The collection item scales to fit 100% of the wrapper, which means the collection item’s height and width are controlled by the Dynamic Repeater’s wrapper height and width. The Dynamic Repeater’s height and width can be defined in the Size section of the design panel.
When you add the Dynamic Repeater to the canvas, a sample internal collection is created and linked to the Dynamic Repeater and the default widgets inside it. You can modify this sample collection, or create a new internal collection to link to the Dynamic Repeater. If you add new widgets to the Dynamic Repeater, they will need to be connected to a collection column.
Note
Currently, the Dynamic Repeater can only be connected to an internal or image collection. In the future, we plan to support all collection types.
To connect a Dynamic Repeater to a collection:
-
Click the Dynamic Repeater widget to open the floating menu.
-
Click the three dot icon on the floating menu and then select Replace Collection.
-
In the modal, use the dropdown menu to select the desired collection.
-
Click Replace.
-
Next you need to connect widgets to the collection columns. Click a widget in the Dynamic Repeater to open the floating menu, then click the three dot icon and select Connect to Data.
-
In the modal, use the dropdown menu to select the column in the collection that will be connected to the widget. Note that only compatible columns will display. For example, Image widgets can only be connected to a column in the collection with Image set as the field type. Click Connect. Repeat for each widget in the Dynamic Repeater.
Use filtering and sorting to control which collection items are displayed, in what order, and under what conditions.
Following is a description of each option:
-
Sort allows you to sort collection items by collection column in ascending or descending alphabetical order. For example, to display a list of team members in alphabetical order based on their first name, you can sort by the First name column in the connected collection and select ascending as the order to display results in. Can be used on regular and dynamic pages.
-
Fixed Filters allow you to display collection items with specific values. For example, to display a list of team members with areas of expertise in business or technology, create a fixed filter that requires the Areas of expertise collection column to contain the values "business" or "technology". Can be used on regular and dynamic pages.
-
Dynamic filters allow you to link matching fields from two seperate collections; one from the collection associated with the current dynamic page and the other from the collection connected to the Dynamic Repeater widget. This allows you to display only the content that is relevant to a specific dynamic page. For example, dynamic filters can be used to display blog posts from the same category as the current dynamic page.
To configure filtering and sorting:
-
Click the Dynamic Repeater to open the floating bar. Click Collection and select Sort & Filter.
-
In the Display section, use the Number of items dropdown to select how many items will display in the widget.
-
On the Filter & Sort tab of the popup, enable the Sort by toggle.
-
Use the Sort by dropdown menu to select the collection column you want to sort by. Use the up and down arrows next to the dropdown to organize the collection items in ascending or descending alphabetical order.
-
Under Fixed filters, click +Add filter. Use the dropdown to select the collection column you want to filter by and enter the exact value(s) that needs to be met for the desired collection items to display.
-
Click Done.
To configure dynamic filters on dynamic pages:
-
Click the Dynamic Repeater to open the floating bar. Click Collection and select Sort & Filter.
-
Under Dynamic filters, click +Add filter.
-
Use the Service Collection dropdown to select a field from the current dynamic page's collection.
-
Use the Repeater Collection dropdown menu to select a field from the Dynamic Repeater's connected collection that matches the field selected in the Service Collection dropdown menu in the previous step.
-
Click Done.
To add a collection item to the Dynamic Repeater, you need to add a new row in the collection. The row must have content before it will populate in the Dynamic Repeater.
To remove a collection item, delete the corresponding row in the collection.
To add a widget, open the widget panel and drag and drop the desired widget into the Dynamic Repeater. The widget is automatically added to all other collection items.
When you are ready to connect the widget to the collection, click the widget to open the floating menu. Click the three dot icon and select Connect to Data. In the popup, select the column you want to connect the widget to. Note that only compatible columns will display, meaning Image widgets can only be connected to column in the collection with Image set as the field type. Click Connect.
To change the widget connection, click the widget to open the floating menu. Click the three dot icon and select Change Connection. Use the dropdown menu in the popup to select a different collection column. Click Connect.
To edit the content of an item in the Dynamic Repeater, click the widget and make the desired updates. Because the Dynamic Repeater supports inline editing, your changes will be updated in the connected collection as well.
You can also edit the content of a collection item directly from the collection.
To increase or decrease the spacing between collection items, click the Dynamic Repeater to open the floating menu and click Edit Design. In the Spacing section of the design panel, use the Spacing between elements setting to define the space between collection items.
Each image in the Dynamic Repeater can have its own unique alt text.
To add alt text to images inside the Dynamic Repeater:
-
Open the collection that is connected to the Dynamic Repeater.
-
In the collection table, click the plus icon (+) to add a new column/field.
-
Enter Alt text as the field name and select Plain text as the field type.
-
Navigate back to the Dynamic Repeater and click to select one of the image widgets.
-
In the floating bar, click the three dot icon and click Manage Connection, then select Change Connection.
-
In the popup, use the Connect Alt Text to dropdown menu to select the collection column created in step 3.
-
Click Connect.