1. The finished look
⚠️ Before you start: This guide uses the Block in Block system. If you're not familiar with Group blocks and Item list blocks yet, read the Block in Block guide first.
2. Block structure at a glance
Each category card shows a name, item count, and two product thumbnails side by side. On desktop the cards appear as a 6-column grid; on mobile they collapse to a 2-column carousel.
🔍 Reminder: All items labelled as Collection, Info, Thumbnails, and Tile are Group blocks. Stat list is an Item list block. Identify them by their icons - refer to the Block in Block guide if unsure.
3. Step-by-step guide
🚩 Process 1: Add the Stat counter section and hide the Header
STEP 1: Add the Stat counter section to your page.
- Open the Shopify Theme Editor (Online Store > Themes > Customize).
- Navigate to the page where you want to place this section.
- Click "Add section" and select Stat counter.
STEP 2: Hide the Header block.
- In the left sidebar, find the Header block under your new Stat counter section.
- Click the eye icon next to it to hide it. This look doesn't use the header area.
STEP 3: Configure the section-level settings.
| Setting | Value |
|---|---|
| Section width | Full width |
| Desktop & Mobile direction | Vertical |
| Top padding | 0px |
| Bottom padding | 0px |
| Gap | 12px |
-----------------------------------------
🚩 Process 2: Configure the Stat list
Delete all default Stat blocks inside the Stat list first, then click on the Stat list and apply these settings:
| Setting | Value |
|---|---|
| Display type (Desktop) | Grid |
| Display type (Mobile) | Carousel |
| Items per row (Desktop) | 6 |
| Items per row (Tablet) | 3 |
| Items per row (Mobile) | 2 |
| Carousel behavior (Auto-play every) | 4s |
| Gap | 4px |
| Padding Top (Desktop) | 16px |
-----------------------------------------
🚩 Process 3: Build one Collection card (Group)
You'll build one complete Collection card, then duplicate it for each category. All cards share the same structure - only the content changes.
STEP 1: Add the Collection Group inside the Stat list
- Click "Add block" inside the Stat list and add a Group. Name it Collection.
- Configure its settings:
| Setting | Value |
|---|---|
| Direction (Desktop) | Horizontal |
| Direction (Mobile) | Vertical |
| Vertical alignment (Desktop & Mobile) | Center |
| Width | Custom · 100% |
| Gap | 8px |
| Inner Spacing (Vertical & Horizontal) | 8px |
| Show border (Desktop & Mobile) | On |
| Link | Enter the collection URL - the whole card becomes clickable |
STEP 2: Add the Info group (name + item count)
- Inside the Collection group, click "Add block" and add a Group. Name it Info.
- Set its direction to Vertical.
- Inside Info, add a Heading block. Enter the category name, e.g.,
Kitchens. Set font size to Custom (Desktop: 15px, Mobile: 14px, Line height: 140%). - Add a Text block below. Enter the item count, e.g.,
44 Items. Set font size to Small.
STEP 3: Add the Thumbnails group
- Back in the Collection group, click "Add block" and add a Group. Name it Thumbnails.
- Set its direction (Layout) to Horizontal on both desktop and mobile so the two image tiles sit side by side.
- Set Gap to
4px.
STEP 4: Build one Tile (image background + product image)
Each thumbnail is a Group acting as a colored tile that wraps the product image with padding and a background color:
- Inside Thumbnails, click "Add block" and add a Group. Name it Tile.
- Configure its settings:
| Setting | Value |
|---|---|
| Inner Spacing (Vertical & Horizontal) | 4px |
| Color scheme (light & dark) | Choose a scheme with a soft background color - this creates the tile effect around the product image |
- Inside the Tile group, click "Add block" and add an Image. Upload the first product thumbnail image. (Note: On demo store - we use an image with transparent background)
STEP 5: Duplicate the Tile for the second image
- Click on the Tile group in the sidebar.
- Click the ⋯ (three dots) menu and select "Duplicate block".
- Update the Image inside the duplicated Tile with the second product thumbnail.
-----------------------------------------
🚩 Process 4: Duplicate the Collection card for each category
STEP 1: Click on the Collection group in the sidebar.
STEP 2: Click the ⋯ (three dots) menu and select "Duplicate block". Repeat for as many categories as you need.
STEP 3: For each duplicated card, update:
- The Link on the Collection group
- The category Heading text inside Info
- The item count Text inside Info
- The two Images inside the Tile groups
-----------------------------------------
🚩 Process 5: Save and check the result
Click "Save" in the Theme Editor. Then preview your store - your section should look like this:
If something looks off, check these common issues:
- The Info text and thumbnails are stacking vertically on desktop instead of sitting side by side - confirm the Collection group direction is set to Horizontal for desktop.
- The two thumbnail tiles are stacking instead of sitting side by side - confirm the Thumbnails group direction is set to Horizontal.
- The product images have no background tile effect - confirm each Tile group has a color scheme applied and Inner Spacing set to 4px.
- Cards are not showing in a row on desktop - confirm the Stat list Display type (Desktop) is set to Grid and Items per row (Desktop) is set to 6.
- The Header area is showing - confirm the Header block is hidden (eye icon toggled off).
Need help? Contact our support team at Omni Themes Support.
