Subcollections

Showcase child and sibling categories directly on your collection templates.

Before this block can display anything, you’ll need to create your category tree. See instructions here.

Add the "Subcollections" block

• In the Theme editor, navigate to the Collection template (Note: if you have multiple templates, you'll need to follow these steps for each template – or copy and paste the block)

• Make sure you're previewing a collection that appears in your category tree and that has child categories

• Go to Add a new section > Apps; you'll see the Subcollections block listed

• Once added, you should already see your child categories appear! If you're happy with the design, hit Save – otherwise check out the customization settings below. Note: If you're previewing a collection that has no subcategories (or no siblings, when that feature is enabled – see further below), you will see placeholders. Placeholders are only visible in the theme editor to help you customize your block and will not be shown to customers.

  

  Placeholders are only shown in the theme editor

Settings

Some of these settings are only available on the Pro Plan.

• Visibility and behavior:

  • Show only on first page of collection: When a customer has navigated to another page in the collection, e.g. page 2, subcollections may no longer be relevant to them and are therefore hidden. Enabled by default.

  • Show current category: By default, the block only shows the children of the current collection. Enable this setting to also show the current collection at the start of the list, for added context.

  • Show same-level categories when no subcategories exist: When the customer reaches a category that has no subcategories, you can choose to show all the other categories at the same level, including the current one, instead. This keeps navigation consistent across all collections in the tree, allowing customers to seamlessly toggle between closely related categories once they reach the deepest level of each branch. Note: When Show current category is also enabled, the parent of those same-level categories is also shown. This is to ensure a seamless transition between a parent category and its children.

• Appearance:

  • Style: Choose between Image card or Button:

  

  Image card style

  

  Button style

  Note: Image card displays the collection's featured image or, if not set, the first product's featured image.

  • When Image card style is selected, the following settings are available:

    • Image shape: Choose between Adapt to image (may result in varying heights), Square, Portrait or Circle

    • Show link underlines: By default, link underlines are shown and animate on hover. You can disable this by toggling this option off.

    • Override text color: By default, the category titles inherit the current color scheme's text color. When enabled, a color picker appears. Note that this color also applies to slider controls, when enabled.

  • When Button style is selected, the following settings are available:

    • Button text, background and border colors

  • Border thickness: This applies to the buttons, slider controls (when borders are visible) and the border around the current page, when applicable.

  • Corner style: Sets how rounded the corners appear on buttons and slider controls. Choose between Square, Slightly rounded or Rounded.

  • Font size: Leave blank to default to the theme's font size. When using this setting, enter a value with a unit (e.g. 1.25rem).

• Layout and spacing:

  • Display layout: Choose between Slider and Grid (wraps to the next line)

  • When Slider is selected, the following settings are available:

    • Slider style: Choose between two options (Full bleed or Centered):

      

      Full bleed extends to the edge of the page (when slides overflow) and controls are only visible on hover/focus

    

    Centered is "contained" and controls are always visible

    • Slider control style: Choose between Primary, Secondary or Tertiary. Control colors are based on the current text color, whether set in the section or in the block. When the primary style is selected, the current text color is used as a background and a filter is applied to the SVG for contrast. See FAQs for how to override the background color.

  • When Image card style is selected under Appearance, the following settings are available:

    • Desktop columns (>= 64em): Choose between 2 to 8 columns

    • Mobile columns (< 48em): Choose between 1 to 3 columns Note: Tablet columns (between 48em and 64em) is automatically set to the average of desktop and mobile columns.

  • Content width: The app can't ascertain your theme's page width, so you can set the specific value here. Popular theme widths:

    • Primavera: 1400px (default)

  • Horizontal alignment depends on the Style:

    • Image cards: Applies to the category title and, when the content doesn't span full width or the grid layout is selected, it also applies to the columns – enabling you to create this centered layout:

    

    Here, horizontal alignment is set to "Center", meaning the category titles and all the columns are centered on the page.

    • Button: When the buttons don't span the full width of the content.

  • Horizontal gap: This is the gap between each item.

  • Vertical gap: Only appears when Grid display layout is selected.

  • Vertical padding: The space at the top and bottom of the block. Many themes' app sections already have a padding setting, so you might want to keep this setting at 0px and default to your theme's spacing.