Navigation: a category's options
Each category row carries everything you can do to it.
| Control | What it does |
|---|---|
| ⠿ (the grip) | Drag to reorder within the heading. |
| The name | Click to rename in place. |
| Pictures | The box under the name, with up to three pictures. See below. |
| Not for sale | Shown when a category is switched off for selling under Games. Shoppers don't see it in the menu, even while it's On here. |
| + Page | Gives this category a designed landing page. See below. |
| On / Off | Keeps the category in your tree but out of the live menu — for building something before you reveal it. |
| ✕ | Removes it. |
| + sub-category | Adds a level beneath — "Singles", "Sealed". |
Pictures
Every category your shoppers see in the menu has the same Pictures box. Click a box to add or change a picture, and Save navigation to keep it. Each one is cropped to the size your theme asks for.
| Picture | Where it shows |
|---|---|
| Home card | The category's card on the home page. |
| Menu icon | The small picture beside its name in the menu. |
| Hover picture | Fills the menu panel when shoppers point at it. Only on themes with the menu designer; it's the same picture as the designer's Background. |
A heading with one category of the same name, such as Accessories, shows its sub-categories as the menu entries, so their pictures are set on each sub-category.
Landing pages, and what they replace
Normally a category goes straight to its product grid. + Page puts a designed page in front of it instead — a hero, some text, featured products — and the grid moves one click deeper. Build the page itself in Pages; the button becomes Edit this category's landing page once it exists.
A brand-new category can't have one yet. The button is greyed and reads "Save the menu first" — the page has to attach to a category that actually exists. Save, then add the page.
Sub-categories
+ sub-category adds a level beneath the category — "Singles", "Sealed". Each one gets a name you can click to rename, a menu icon, a landing page, an On/Off switch and a ✕. Drag them to reorder within the category.
Once a heading has anything from the menu designer, every category in it shows its sub-categories in the panel beside it, not under its name, so the whole dropdown looks the same.
A sub-category is a nested step in the address rather than a separate branch — Singles under
Magic reads as /products/magic-the-gathering/singles — so shoppers can always get
back up a level.
Reusing a background
In the drop-down designer, Copy background from… sits beside Background. It lists every category with a background, in this heading and your other headings, grouped by heading. Pick one and this category uses the same picture, with nothing to upload. Save and Publish as usual. The designer draws the drop-down in your theme's own colours, so a category with no background looks just as it will on your shop.
Column widths in the drop-down designer
In the designer, click column 2 or column 3 and a Column width box appears in the toolbar. Type a width in pixels, or leave it empty for the theme's own width. Widths are set per category, and the drop-down on your shop grows and shrinks to match whichever category the shopper is pointing at.
Events in a drop-down
Click column 3 and + Add a block offers Events: a stacked list of your upcoming events. Each shows the event's picture, when it is on and its name, and the picture and the name both link to the event's page. An event with a limited number of places has a badge over its picture saying how many spaces are left; an event with no limit has none and reads "Open entry". Choose Today, This week or This month, how many to show, and optionally a search such as Magic the Gathering, which matches the event's title or its game. Leave the search empty to list every event. The list is worked out each time the page loads, so it is never out of date, and it shows nothing when no events match. Click the top of the block to give it a heading, which sits centred above the list and shows only when there are events, so an empty block leaves no heading behind. The designer shows the events that would appear right now, and updates as you change the search, the range or the number.