Dynamic galleries

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

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

Create dynamic elements within a gallery

1. Create a group with placeholder elements

  1. Create placeholders for the elements that you want to include in the gallery. For example, create an image element and a text element.
  2. Select all the placeholder elements.
  3. Create a group by right-clicking the selection and clicking Create group...
  4. Name the group and click OK.
  5. Delete the group from the stage. The group still exists in the Library.

2. Add the group to the gallery

  1. Select the gallery.
  2. In the Properties panel, enter the name of the group you just created in the Groups field.

3. Add data bindings for each dynamic element

  1. Open the Dynamic Properties dialog by clicking the Add dynamic bindings button on the Dynamic panel's Bindings tab.
  2. For each element:
    1. Click Add Binding.
    2. For the Element field, select the element in the group that you want to bind the feed data to.
    3. For the Element attribute field, select the attribute that should be defined by dynamic data.
    4. For the Data schema object field, select the feed attribute to bind to, using the first item (which is numbered 0).

4. Add a data binding for the group

  1. Create a binding between the group and the top-level item:
    1. Click Add Binding.
    2. For the Element field, select the group with your gallery frame elements.
    3. For the Element attribute field, select Repeat for each item in collection.
    4. For the Data schema object field, select the top-level item in your feed. The object's name can differ, but the item is listed above the index dropdown.
  2. Click OK.

Your gallery now iterates through all the items in your dynamic feed, displaying one item per frame.

Add dynamic exit URLs

If your dynamic data includes an exit URL for each item, you can configure your gallery to use the exit URL for the currently displaying item.

Add a data binding for the gallery's exit URLs

  1. Open the Dynamic panel, and on the Bindings tab,click the Add dynamic bindings button to add a new binding.

  2. For the Element, select your gallery.

  3. For the Element attribute, select Exit URLs.

  4. For the Data schema object, select the top-level item that's listed above the index dropdown. The name differs depending on the schema you're using.

  5. Click the Filters tab, then find the Pluck and join filter.

  6. For the filter property, select the data schema object for the exit URL.

The final data schema object will look similar to this:
Product | Pluck and join: URL

Was this article helpful?
How can we improve it?