Skip to main content

Create a Store accordion layout

Accordion mode renders one Store Card per result. Rows marked Reveal on expand inside that Store Card remain hidden until the visitor selects the card.

1. Build the accordion Store Card​

  1. Go to Builder → New → Store Card.
  2. Add the summary row that is always visible—for example name, locality, Open now status, and expand indicator.
  3. Add one or more rows containing details such as full address, opening schedule, phone, custom fields, and actions.
  4. Select each detail row.
  5. In Row settings, enable Reveal on expand.
  6. Save the Store Card.

Do not mark every row as Reveal on expand. The closed card needs a visible summary that identifies the Store.

2. Configure Store List​

  1. Open the Layout.
  2. Select the Store List widget.
  3. Set Display → Accordion (expand on click).
  4. Select the Store Card under Card design (list item).
  5. Enable Open one at a time to close the previous Store when another opens, or disable it to allow several expanded cards.
  6. Configure scrolling, results per page, and Load more.
  7. Save the Layout.

3. Test interactions​

Test selecting the card with mouse and keyboard. Only Reveal-on-expand rows should slide open. Verify buttons/links inside the card perform their own action rather than unexpectedly toggling the accordion.

After Load more, newly appended cards must use the same accordion behavior and single-open rule.