Skip to main content

Create dynamic product groups with Auto Layout

Create a data-driven Image List in an Auto Layout group and fill it from Table or Excel.

D
Written by David Peng

Use an Image List when a product group should grow or shrink from one Table cell while keeping the layout you designed.

Build the source group

  1. Place two or more example product images directly inside one Auto Layout group.

  2. Set the group’s direction, wrapping, gap, padding, alignment, and size.

  3. Give the group a clear, unique name. This becomes its Table column name.

Every direct child of an Image List group must be an Image layer with an assigned asset.

Show the group in Table

  1. Select the source Visual.

  2. In the Properties panel, find Template and click Set up template.

  3. Select the Auto Layout group.

  4. In its Template section, turn on Show in Table.

  5. When Bind items to this column? appears, click Confirm.

  6. Resolve any setup issues, then click Open Table.

Add products in Table

  1. Add a production row or select an existing row.

  2. In the Image List cell, enter image file names separated by commas.

  3. Press Enter to apply the change.

front.png, side.png, detail.png

Each file name creates one image in the order entered. Repeating a file name is allowed.

Edit safely

A Table edit rebuilds the complete list from the source group as one undoable change. Later Table edits replace canvas-only changes made inside generated list items. Make shared layout and styling changes in the source group.

Troubleshooting

  • If the group cannot be shown in Table, confirm that it uses Auto Layout and that every direct child is an Image layer with an asset.

  • If an image is not found, use the exact file name shown in the Content Shelf.

  • If spacing or wrapping is wrong, edit the source Auto Layout group and regenerate the row.

Did this answer your question?