Module: Collections Builder Audience: Store admins Last updated: March 2026
Overview
The Collections Builder offers several layout options that control how collections appear on each screen of your mobile app. Mix and match layouts at different levels of your hierarchy to create a browsing experience that fits your brand.
Available Layouts
Accordion
Collections display as expandable sections. Customers tap a collection to reveal its children inline, without navigating to a new screen. Best for stores with many small subcategories.
[Screenshot: Accordion layout showing expanded and collapsed collection groups]
Grid
Collections display as a grid of image tiles. Configure the number of columns:
1 Column: Full-width tiles for large feature images.
2 Columns: A balanced layout and the most popular choice.
3 Columns: Compact grid that fits more collections on screen.
[Screenshot: Grid layout comparison showing 1-column, 2-column, and 3-column configurations]
Row
Collections display as a horizontally scrollable row of tiles. Best for highlighting a curated set of collections or as a secondary navigation element.
[Screenshot: Row layout showing horizontally scrollable collection tiles]
Choosing a Layout
Select a collection or level in the hierarchy tree.
In the inspector panel, find the Layout setting.
Choose Accordion, Grid, or Row.
If you chose Grid, select the column count (1, 2, or 3).
The phone preview updates immediately.
You can set different layouts at different levels—for example, a 2-column Grid at root level and Accordion deeper down.
Top Menu
An optional horizontal bar above the main collection list providing quick-access links.
In the inspector panel, toggle Top Menu on.
Select which collections appear in the top menu.
The phone preview shows the menu bar above the collection list.
Useful for giving prominent placement to categories like "Sale" or "New Arrivals" without restructuring the hierarchy.
[Screenshot: Top menu enabled showing quick-access collection links above the grid]
Per-Collection Product Sorting
Each collection can have its own default product sort order:
Select a collection in the hierarchy tree.
In the inspector panel, find Product Sorting.
Choose a sort option (e.g., Best Selling, Price Low to High, Newest First).
Tips
Use the phone preview to compare layouts—switch between options and see the difference instantly.
Two-column Grid is the safest default for most catalog sizes and image styles.
Reserve the top menu for your highest-traffic categories to keep it uncluttered.
FAQ
Can I use different layouts for different levels of my hierarchy? Yes. Each level can have its own layout.
Does the top menu replace the main collection list? No. It appears above the list as an additional navigation element.
Can customers change the product sort order? Your setting is the default. Depending on app configuration, customers may also sort themselves.
Related Articles