Unified commerce widget
The unified commerce widget pulls products from your store (commerce module) and displays them on the main page or any other page. Just pick a criterion from new, popular, on sale, featured, category, promotion, or hand-picked, and the display updates automatically as your products change. You can use it anywhere a widget can go, such as widget pages, layouts, or the top of a board.
Products appear only when the commerce module is installed and at least one store page exists.
How to add it
- Install the unified commerce widget from the Store.
- On a widget page (or in layout editing), choose Add widget > Unified commerce widget.
- Set the row layout and slots, then save.
- Custom ratio: Write slot widths separated by
:. Examples:50:50,60:40,34:33:33,25:25:25:25 - Choose grid · horizontal scroll · list · large card · tabs in each slot's Style.
- Clicking a product card goes to the product details in that store.
- By giving slots different store addresses, you can display products from several stores together in one row.
- In layouts that use a dark theme, the widget is also shown in dark colors.
One widget is one row on the screen. To create multiple rows, place multiple widgets.
Row layout (presets)
Choose how to divide a row. Each division is a slot, and slots are numbered 1 · 2 · 3 · 4 from the left.
| Row layout | Slots | Default look |
|---|---|---|
| Grid - 4 across | 1 | 4 products side by side in one row |
| Grid - 3 across | 1 | 3 products side by side in one row |
| Horizontal scroll | 1 | 12 products you swipe left and right |
| Large card + grid | 2 | One large featured product card on the left, a 2×2 grid on the right |
| Grid + list | 2 | A 2×2 grid on the left, a vertical list of 5 on the right |
| List + list | 2 | Two blocks of vertical lists with 5 each |
| Tabs + grid | 2 | Category tabs on the left, a 2×2 grid on the right |
| 3 grid blocks | 3 | Three vertical grid blocks |
| Custom | Up to 4 | See "Custom" below |
If you set a product count larger than the default, extra rows are added accordingly. On narrow screens, the layout automatically switches to vertical.
Slot settings
For each slot, set what to show and how. You only need to fill in as many slots as the row layout uses.
| Setting | Description |
|---|---|
| Store address | The mid of the store to pull products from. If empty, the first store created is used. You can specify a different store for each slot |
| Title | The title above the slot (e.g., New this week). If empty, only products appear without a title |
| What to pull | New · Popular · On sale · Featured · Category · Promotion · Hand-picked |
| Target number | For a category or promotion, its number; for hand-picked, product numbers separated by commas |
| Count | Number of products to display. If empty, the row layout's default |
| Style | Used only with Custom. Choose from grid · horizontal scroll · list · large card · tabs |
The criteria use commerce product data as is. Popular means sales volume, On sale means products with a sale price, and Featured means the featured flag in product editing.
Custom
Setting the row layout to "Custom" lets you freely arrange ratios and styles.
For example, combine 60:40 + slot 1 "Horizontal scroll (on sale)" + slot 2 "List (popular)".
Common display options
| Setting | Description |
|---|---|
| New product period | Products added within this period (in hours) get a NEW badge. If empty, 72 hours |
| Show price | Whether to show the price on cards |
| Show badges | Whether to show badges such as NEW and discount rate |
| Sold-out products | Show them with a sold-out label, or remove them from the list entirely |