Add subcollections blocks to themes

    The app provides two types of Subcollections blocks:

    • Subcollections (Overlay) – Displays collection titles as overlay text on top of images.

    • Subcollections (Text Below) – Displays collection titles below the images.

    Both blocks share the same data source and logic, and differ only in visual layout and configuration options.

    These blocks are designed to be used on collection pages only. When a customer views a collection page, the block will look up the collection currently being viewed in the Collections Tree and display its direct child collections. These child collections will appear in a grid or slider layout depending on your configuration.

    This feature is helpful for organizing large catalogs into nested categories, improving navigation and UX for your customers.

    How to Add Subcollections Blocks to Your Theme

    There are two ways to add Subcollections blocks to your theme, similar to how you added the Breadcrumbs block:

    Option 1: Add from the App

    1. Go to the app dashboard after installing the app.

    2. Under the “Add blocks” section, select either Subcollections with Overlay or Subcollections with text Below.

    3. The app will automatically insert the selected block into the main collection template of your current theme.

    4. You can also switch your working theme if you want to add the block to a different theme.

    Option 2: Add from the Shopify Theme Editor

    1. Go to Online Store > Themes and click Customize on your desired theme.

    2. Navigate to a collection template using the template selector.

    3. In the left panel, find the section where you want to place the block (e.g., the main content area).

    4. Click “Add section”, scroll to the App blocks section, and choose either Subcollections with overlay or Subcollections with text below.

    5. Reposition the block as needed and save your changes.

     

     

    Configure the Subcollections with text below block

    📏 Block Layout

    • Block max width: Set a maximum width for the block container (in pixels). Useful for limiting how wide the block spreads on large screens.

    • Heading: Optional title to be shown above the block.

    🖼 Image Settings

    • Image ratio: Set the shape of the collection images (Square, Portrait, Landscape, Circle…).

      • Cover: The image will cover the entire area, cropping if needed.

      • Contain: The entire image will be visible, possibly leaving blank space.

        Image fit type:

         

    • Image border radius: Adjust the roundness of the image corners.

      Not applicable if the image ratio is set to “Circle”.

    🧱 Layout

    • Number of columns on desktop: Choose how many subcollections are displayed per row on desktop.

    • Enable carousel on desktop: Enable this to display subcollections in a horizontal slider instead of a grid.

    • Content layout:

      • Normal: Collection title and product count appear below the image.

      • Overlap: Collection title and product count are overlaid on the image.

    • Text alignment: Set alignment of the collection title (left, center, right).

    • Show the product count: Toggle to display the number of products in each subcollection.

    • Enable uppercase text: Display collection titles in all uppercase letters.

    🔁 Slider Carousel Settings

    Only relevant if the carousel layout is enabled.

    • Enable the scrollbar: Display a scrollbar when the slider content overflows.

    • Enable the navigation: Show left/right navigation arrows for the carousel.

    • Scrollbar color: Choose the color of the scrollbar.

    📱 Mobile Layout

    • Number of columns on tablet: Choose the number of columns on tablet devices.

    • Number of columns on mobile: Choose between 1 or 2 columns on mobile devices.

    • Enable swipe on tablet and mobile: Allow swipe gestures for sliding content on touch devices (if carousel is enabled).

    🔠 Collection Title Font Size

    Adjust font size of collection titles per device type.
    Product count font size is automatically scaled based on this.

    • Desktop / Tablet / Mobile: Font size settings for each screen size.

    🎨 Colors

    • Text: Set the text color for titles and product counts.

    • Background: Set a background color (only applies when Content layout is set to Overlap).

    📏 Margin

    • Margin top / Margin bottom: Adjust the vertical spacing above and below the block.

     

     

    Configure the Subcollections with overlay block

    🔧 Block settings

    • Block max width: sets the maximum width of the block in pixels.

    • Heading: title displayed above the block.

    🖼️ Image settings

    • Image ratio: aspect ratio of the images: Square / Landscape / Portrait / Circle.

    • Image fit type

      • Cover: crops the image to fill the entire area.

      • Contain: scales the image to fit within the area.

    • Image border radius: sets how rounded the image corners are (in pixels).

      Not applicable when the image ratio is set to “Circle”.

    🧱 Grid settings

    • Number of columns on desktop: defines how many columns are shown on desktop.

    • Content position: where the text appears over the image:

      • Middle: centered vertically.

      • Bottom: aligned to the bottom edge.

    • Text alignment: aligns the content: Left / Center / Right.

      Not applied when content is positioned at “Bottom” and product count is visible.

    • Show the product count: displays the number of products in each subcollection.

    • Enable uppercase text: transforms all text to uppercase.

    🎠 Carousel settings

    • Enable carousel on desktop: activates horizontal slider mode on desktop.

    • Enable the scrollbar: shows a scroll bar when the carousel is enabled.

    • Enable the navigation: shows left/right arrows to navigate the carousel.

    • Scrollbar color: customize the color of the scroll bar.

    📱 Mobile layout

    • Number of columns on tablet: sets the number of columns on tablet view.

    • Number of columns on mobile: choose between 1 or 2 columns on mobile view.

    • Enable swipe on tablet and mobile: allows swipe gestures to browse on mobile and tablet.

    Collection title font size

    • Desktop / Tablet / Mobile

      Set the font size of collection titles by device.

      Product count font size will auto-adjust based on this.

    🎨 Color settings

    • Text

      Color of the text displayed over the image.

    • Overlay

      Background overlay color (sits behind the text on the image).

    🎨 Hover colors

    Only applied when content is positioned at “Bottom”.

    • Text: text color on hover.

    • Background: overlay background color on hover.

    📐 Margin settings

    • Margin top / Margin bottom: controls the vertical spacing above and below the block (in pixels).

    Published