Dynamic galleries

You can use groups to display multiple elements for a feed item within a Swipeable Gallery or Carousel Gallery. For example, you might want to include both a product image and a text title for an item in each gallery frame.

Create a group with all the dynamic elements, then add that group to the gallery. With the right data binding, the gallery will populate that group with data for each feed item.

Use groups can be used to place multiple elements into each frame of the Swipeable Gallery or Carousel Gallery component. For example, you might want to have both an image and some text content in each frame. Using groups, you can also build a dynamic ad that has several elements of automatically generated product-related content in each frame of a gallery.

To do this, create a group with all the elements you want to be dynamic, and add only that single group to the gallery. With the right data binding, that group will show a frame for every product in the feed.

To create dynamic elements within a gallery:

  1. Create a group with a set of placeholder elements that you want to be dynamic. In this example we'll use an image and a product description.
  2. Create a binding between each element and the appropriate feed object for product 0:
    • Select the element in the group that you want to bind the feed data to. In this example, we'll select our description area, which is called group1 div #description.
    • Select the element attribute you want to bind the feed data to. In this example, we'll select Text content.
    • Select the data schema object to bind to. In this case, the item won't be in the "Presets" column. Instead go to the "Data" column, and select Product > 0 > description. This binds the element to the first product in the product array (counting from zero).
    • Repeat for every element you're using in your group.
  3. Create a binding between the group as a whole and the Product category:
    • Select the group that contains your dynamic elements. In this example, it's called group1.
    • Select Repeat for each item in the collection in the element attribute column.
    • Select Product from the "Data" column. Your ad will iterate over the entire list of products and create a group for each product using the data bindings you created previously.
Was this article helpful?
How can we improve it?