Dynamic Subcategories
The Dynamic Subcategories app automatically displays subcategories on collection pages in your Shopify store. Depending on the selected data source, subcategories are either pulled from a navigation menu's child links or from a collection metafield and rendered in the storefront. The appearance is fully controlled through the Theme Editor and can be further extended with custom CSS.
How It Works
The block is implemented as a Theme App Extension and is loaded as a section block in the Theme Editor. When a page loads, the Liquid template reads the current collection and determines its subcategories — either by traversing the navigation menu or by reading the custom.subcategories metafield. Custom CSS configured in the Admin interface is stored in a shop metafield and embedded directly into the page.
Installation
The app is installed via the Shopify App Store. After installation, the Dynamic Subcategories block automatically appears in the Theme Editor under Sections → Blocks. Add the block to your collection template and configure it directly in the editor.
Data Sources
Navigation Menu
With this source, you select a navigation menu that maps your collection hierarchy. The Liquid template searches the menu for an entry whose handle matches the current collection. The direct child links of that entry are displayed as subcategories.
Requirements:
- A navigation menu with the current collection as a parent entry
- The desired subcategories must be set up as direct child links of that entry
Example menu structure:
Clothing → /collections/clothing
├── Jackets → /collections/jackets
├── Pants → /collections/pants
└── Shirts → /collections/shirts
When visiting the Clothing collection, Jackets, Pants, and Shirts will be displayed as subcategories.
Metafield
With this source, the custom.subcategories metafield of the current collection is read. Collections stored there are displayed directly as subcategories. The metafield must be of type Collection (list).
Requirements:
- The desired subcategories must be entered in the metafield on each respective collection
The custom.subcategories metafield definition is automatically created the first time the app is opened in the Shopify Admin.
Layouts
Grid
Displays subcategories in a multi-column grid. The number of columns is freely configurable (2–5). On smaller screens, the grid automatically reduces to 2 columns (≤ 768 px) or a single column (≤ 480 px).
Carousel
Displays subcategories in a horizontally scrollable view with navigation buttons on the left and right. Buttons are automatically disabled when the beginning or end of the list is reached. The carousel dynamically calculates tile width based on the current container width and responds to window resize events.
List
Displays subcategories stacked vertically. Image (if enabled) and text are shown side by side. On small screens (≤ 480 px), the layout automatically switches to a stacked vertical arrangement.
Settings
All settings are configured directly on the block in the Shopify Theme Editor.
Data Source
| Setting | Type | Default | Description |
|---|---|---|---|
| Data source | Select | Navigation menu | Choose between Navigation menu and Metafield |
| Menu | Menu select | – | Navigation menu to use (only for data source Navigation menu) |
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Layout | Select | Grid | Grid, Carousel, or List |
| Columns | Range | 3 | Number of columns (2–5); Grid and Carousel only |
| Gap | Range | 16 px | Spacing between items (0–48 px, step: 4 px) |
Images
| Setting | Type | Default | Description |
|---|---|---|---|
| Show image | Checkbox | Yes | Enables display of the collection image |
| Image ratio | Select | Square | Aspect ratio: Square (1:1), Landscape (16:9), or Portrait (2:3) |
| Image radius | Range | 4 px | Corner radius of images (0–40 px, step: 2 px) |
Images are delivered responsively with srcset and sizes (300 w, 600 w, 900 w) and load via lazy loading. A hover effect scales the image slightly to 105%.
Typography
| Setting | Type | Default | Description |
|---|---|---|---|
| Font size | Range | 16 px | Font size for category titles (10–28 px, step: 1 px) |
| Show description | Checkbox | Yes | Displays the collection description below the title; HTML is stripped and text is truncated to 120 characters |
Carousel Buttons
These settings are only visible when the Carousel layout is selected.
| Setting | Type | Default | Description |
|---|---|---|---|
| Button size | Range | 40 px | Size of navigation buttons (28–56 px, step: 4 px) |
| Button style | Select | Filled | Style: Filled (white background, shadow), Outlined (transparent, border), or Minimal (no background, no border) |
Custom CSS
Custom CSS for the block can be added on the app settings page in the Shopify Admin. The CSS is stored in the shop metafield $app:custom_css and embedded directly into the <head> on each page load.
The admin interface validates CSS in real time using the css-tree library and shows syntax errors with line numbers before saving.
CSS Variables
The block exposes the following CSS custom properties, set via the Theme Editor settings:
| Variable | Description | Default |
|---|---|---|
--dsc-columns | Number of columns | 3 |
--dsc-gap | Spacing between items | 16px |
--dsc-image-radius | Image corner radius | 4px |
--dsc-font-size | Title font size | 1rem (16px) |
--dsc-btn-size | Carousel button size | 40px |
CSS Classes
| Class | Element | Notes |
|---|---|---|
.dsc-container | Main container | Has data-layout (grid/carousel/list) and data-carousel-btn-style attributes |
.dsc-item | Individual subcategory item (link) | |
.dsc-item__image | Image container | Additional modifier classes: --square, --landscape, --portrait |
.dsc-item__image img | The actual image | Hover zoom applied via .dsc-item:hover |
.dsc-item__content | Text container (title + description) | |
.dsc-item__title | Subcategory title (<h3>) | |
.dsc-item__description | Description text | |
.dsc-carousel__track | Scrollable carousel track | |
.dsc-carousel__btn | Both navigation buttons | Modifiers: --prev, --next |
.dsc-empty-state | Placeholder in Theme Editor mode | Only visible in Design Mode |
Example
.dsc-container {
padding: 1rem 0;
}
.dsc-item__title {
color: #1a1a2e;
font-weight: 700;
}
.dsc-item__image {
border: 2px solid #e8e8e8;
}
Behavior in the Theme Editor
When the app is opened in the Shopify Theme Editor (Design Mode), the block displays contextual hints if no subcategories are found:
- No menu selected or menu has no entries → hint to select a menu
- Collection not linked in the menu → hint that no entry was found for the current collection
- Metafield empty → hint to populate the
custom.subcategoriesmetafield
In the regular storefront, these hints are not shown — the block simply renders nothing if no data is available.
Responsive Behavior
| Breakpoint | Grid | List | Carousel |
|---|---|---|---|
| > 768 px | Configured column count | Side by side (image + text) | Configured column count |
| ≤ 768 px | 2 columns | Side by side | Configured column count |
| ≤ 480 px | 1 column | Stacked vertically | Configured column count |
The carousel calculates its tile width dynamically based on the current container width and automatically adapts to window size changes via a ResizeObserver.