About this block
A grid of eight category shortcuts for a shop's landing page. Each tile is one big clickable card with an icon and a short label, so shoppers can jump straight to what they came for. A heading and a 'Browse full catalog' button sit above the grid for people who'd rather see everything.
When to use it
- Your store's homepage, to send shoppers to the right department in one click.
- Above a product grid or collection page, as quick filters by category.
- You sell across several distinct categories and want them visible without opening a menu.
What's inside
- A light grey section with an h2 heading and an outlined 'Browse full catalog' button beside it. On phones the button drops below the heading.
- Eight white rounded cards, two per row on phones and four per row from tablet width.
- Each card is a single Link with a large icon in your primary colour above the label, so the whole card is the click target.
- Cards highlight their border in the primary colour on hover.
How to customize it
- Point each card at its category page, and the 'Browse full catalog' button at your main shop page.
- Swap the icons to match what you sell. Pick icons from the same set so their line weight matches.
- Keep labels to 2 or 3 words so the cards stay the same height on phones.
- Delete cards you don't need. Four or eight keep the rows even on desktop.
Questions
- Can I use product photos instead of icons?
- This block is built around icons. For photo tiles, put an Image inside each card, or use a product grid block that shows pictures.
- Does the whole card link, or just the text?
- The whole card. Each tile is one link, so clicking anywhere on it, including the padding, goes to the category.
- How many categories should I show?
- Show the ones that bring in the most sales, usually 4 to 8. More than that turns a shortcut into a list people have to read.