Dropdown
A dropdown you build in the theme editor from menu items with images, promo cards and a banner – compact under its link, or a full-width panel. It can replace a link of your menu or add a new one.
- In the editor
- Dropdown – with Menu item, Promo card, Banner inside
- Where it goes
- The Header section
- Settings
- 15
When to use it
Menus from Online Store > Navigation are text only. A Dropdown block adds pictures, product counts, promo cards and a notice – for Edits, Gifts or New in. The Index preset uses one for its Edits menu.
Set it up
- In the Header section, choose Add block › Dropdown.
- Set the Label. To replace a link of your main menu, enter its exact title in Attach to menu link; leave it empty to add a new item at the end of the menu.
- Add Menu item, Promo card and Banner blocks inside the dropdown.
- Choose the Width: Compact opens under the link; Full width opens across the page.
Content
- Menu item: a Title, an optional Subtitle, a Link, an Image and a Tag such as New or Sale.
- Promo card: an Image, Heading and Text. Pick a Collection to link the card and show its product count, or a Product to show its photo and price. Each card has a Maximum card width, a side (left or right of the menu items) and an Image ratio.
- Banner: a notice across the top or bottom of the dropdown – delivery, a sale, opening hours – with an icon, a link and a style (Highlight, Accent, Soft or Outline).
- Links from a menu: fill the dropdown from another menu instead. Links with sub-links become columns; others show like menu items, with their collection image and product count.
- Keep the link's own sub-links: when attached to a menu link, keeps its sub-links from Online Store > Navigation next to your blocks.
Full-width grid
- Columns (1–8) and Items per column (1–12): menu items fill the columns from top to bottom.
- Column spacing, and Promo cards area – the share of the panel width for promo cards.
Menu items
Image size, Vertical padding and Text size for the menu items, and whether links from a menu show their images and their product counts or prices.
All settings
Block: Dropdown15 settings
| Setting | Options | Default |
|---|---|---|
| Build a dropdown here, or attach it to a link from your header menu. | ||
| Attach to menu linkExact title of a top-level menu link. The dropdown replaces that link. Leave empty to add a new item. | Text | – |
| Keep the link's own sub-links | Checkbox | On |
| LabelLeave empty to keep the attached link's title. | Text | Sample text |
| Link | Link | – |
| Links from a menuOptional. Links with sub-links become columns, other links show like menu items with their collection image and product count. | Menu | – |
| Width | Compact · Full width | Full width |
| Full width grid | ||
| Menu items fill the columns from top to bottom. Promo cards sit next to the menu items; set their width and side on each card. | ||
| Columns | 1–8 | 4 |
| Items per column | 1–12 | 4 |
| Column spacing | 8–64px | 24px |
| Promo cards areaShare of the panel width for promo cards. Menu items get the rest. | 20–80% | 50% |
| Menu items | ||
| Image size | 24–96px | 44px |
| Vertical padding | 0–20px | 6px |
| Text size | 13–22px | 15px |
| Show images for links from the menuUses the collection or product image. | Checkbox | On |
| Show product count or price for links from the menu | Checkbox | On |
Block: Menu item5 settings
| Setting | Options | Default |
|---|---|---|
| Title | Text | Sample text |
| Subtitle | Text | – |
| Link | Link | – |
| Image | Image | – |
| TagShort text like New or Sale. | Text | – |
Block: Promo card10 settings
| Setting | Options | Default |
|---|---|---|
| Image | Image | – |
| Heading | Text | Sample text |
| Text | Text | Sample text |
| CollectionOptional. Links the card and shows its product count instead of the text. | Collection | – |
| ProductOptional, instead of a collection. Links the card, uses the product photo when no image is set and shows the price. | Product | – |
| TagShort text like New. | Text | – |
| LinkUsed when no collection or product is selected. Any link works here too, products included. | Link | – |
| Layout | ||
| Maximum card widthCards share the promo area evenly and never grow past this width. | 140–480px | 320px |
| Position | Left of the menu items · Right of the menu items | Right of the menu items |
| Image ratio | Square · Portrait · Landscape · Wide | Landscape |
Block: Banner6 settings
| Setting | Options | Default |
|---|---|---|
| A notice across the whole dropdown, for delivery, a sale or opening hours. | ||
| Text | Rich text (one line) | Sample text |
| Link label | Text | Sample text |
| Link | Link | – |
| Icon | None · Sparkle · Truck · Gift · Tag · Clock · Star · Return · Chat · Pin | Truck |
| StyleColors come from the dropdown's color scheme. | Highlight · Accent · Soft · Outline | Highlight |
| Position | Top of the dropdown · Bottom of the dropdown | Bottom of the dropdown |
Related
HeaderLogo, menu, search, account and cart in three layouts, with a full-width shop panel, a transparent mode and a mobile drawer.LinkA single link next to the header menu – plain, highlighted or a button, with an icon and a badge.Header and footerThe announcement bar, header layouts, menus with dropdowns and full-width panels, the search bar, language and country selectors, and the footer.