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.

C
Written by CS01

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

The image browser may be labeled Assets or Content Shelf in your editor.

Build the source group

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

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

  3. If your editor still shows Layout → Advanced → Copies in Properties, turn Copies on before template setup. In editors without that switch, use Template → Show in Table to bind the group directly.

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

For this basic setup, use only direct Image children with assigned assets. Keep text labels, decorative layers, and nested groups outside the list.

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, or leave it on if setup already enabled it.

  5. If 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. If a file name contains a comma, enclose it in double quotes: "front, red.png", side.png.

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, has direct Image children with assigned assets, and is bound through Template → Show in Table. If a separate Copies control is available, turn it on too.

  • 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?