Browse docsHow do I change the Categories block layout?

How do I change the Categories block layout?

Sub Category ExtensionUpdated 1 min read

Click the Categories by Shopgears block in the theme editor to set its heading, a Grid or Side-scrolling row layout, columns, image shape, product count and maximum tiles, then click Save.

What it is

The Categories by Shopgears block has settings that control how the sub-category tiles look on your collection pages. You change them in the theme editor, like any other block:

  • Heading: turn Show heading on or off, and set the Heading text.

  • Layout: Grid or Side-scrolling row.

  • Columns on desktop: how many tiles sit side by side on larger screens.

  • Columns on mobile: 1 or 2 tiles per row on phones.

  • Image shape: Square, Portrait or Natural (the image's own proportions).

  • Show product count: displays how many products each sub-category holds.

  • Maximum to show: limits the number of tiles.

How to set it up

  1. Open the theme editor on your collection page template. From the app, use the setup section on Home.

  2. Click the Categories by Shopgears block to open its settings.

  3. Choose Grid for a tidy block of tiles, or Side-scrolling row for a compact strip shoppers can swipe through.

  4. Set Columns on desktop and Columns on mobile to suit your theme's width.

  5. Pick an Image shape that matches your collection images.

  6. Turn Show product count on or off, and set Maximum to show.

  7. Click Save in the theme editor.

Why it's useful

Every store's collection pages look different, and the tiles should fit in rather than stand out awkwardly. A side-scrolling row saves vertical space so products stay near the top of the page, while a grid works well for stores with a handful of key sub-categories. Matching the image shape to your photography avoids awkward cropping, and product counts help shoppers judge where to look. All of this is done in the theme editor with a live preview and no code.

Get started

Give every collection a place — and every page a trail.

Install free, let Magic import draft your category tree, and see breadcrumbs and structured data live on your storefront in minutes.

BreadCrumbs

Breadcrumbs, category trees and SEO schema for Shopify — built on your own collections and stored in your own metafields.

Product
Company