Look 3

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

1. The finished look

2. Block structure at a glance

This layout has two levels of nesting - a top-level grid of category columns, and inside each column a second grid of sub-category cards. Use this map throughout the guide.

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.

-----------------------------------------

🚩 Process 2: Configure the Stat list (outer Item list)

The Stat list is the outer container that holds all 4 Category card columns. Delete all default Stat blocks inside it first, then apply these settings:

-----------------------------------------

🚩 Process 3: Build one Category card (Group)

You'll build one complete Category card, then duplicate it 3 times. All 4 cards share the same internal structure - only the content changes per card.

STEP 1: Add the Category card Group inside the Stat list

• Click "Add block" inside the Stat list and add a Group. Name it Category card.
• Configure its settings:

STEP 2: Build the Card header (title row + arrow link)

• Inside the Category card, click "Add block" and add a Group. Name it Card header.
• Set its direction to Horizontal on both desktop and mobile - this places the title on the left and the arrow on the right.
• Set Width to Custom · 100%, and bottom padding to 8px.

Inside the Card header, add the title:

• Click "Add block" and add a Group. Name it Card title.
• Inside Card title, add a Heading block. Enter the category name, e.g., Top Rated. Set font size to Medium.

Inside the Card header, add the arrow link:

• Click "Add block" and add a Group. Name it Arrow link.
• Inside Arrow link, add a Text block. Enter › or → as the text.
• Set font size to Large.
• In the Text block settings, add the collection URL to the Link field so the arrow navigates to the collection page.

STEP 3: Add the banner Image

• Back in the Category card (not inside Card header), click "Add block" and add an Image.
• Upload your banner image for this category.
• Set Image ratio to Natural.
• Set the Link field to the collection URL so clicking the banner navigates to the collection.

STEP 4: Add the Sub-cards list (inner Item list)

• Back in the Category card, click "Add block" and add an Item list. Name it Sub-cards list.
• Apply these settings:

STEP 5: Build one Sub-card inside the Sub-cards list

• Click "Add block" inside the Sub-cards list and add a Group. Name it Sub-card.
• Configure its settings:

• Inside the Sub-card, add an Image block and upload an image.
• Add a Heading block directly below the image (no wrapper group needed). Enter the sub-category name, e.g., Earbuds. Set font size to Custom (Desktop: 14px, Mobile: 12px, Line height: 140%).

STEP 6: Duplicate the Sub-card 2 more times

• Click on the Sub-card group in the sidebar.
• Click the ⋯ (three dots) menu and select "Duplicate block". Repeat until you have 3 Sub-cards.
• Update the Image and Heading text in each duplicated Sub-card.

-----------------------------------------

🚩 Process 4: Duplicate the Category card 3 more times

STEP 1: In the left sidebar, click on the Category card Group you just built inside the Stat list.

STEP 2: Click the ⋯ (three dots) menu and select "Duplicate block". Repeat until you have 4 Category card Groups total.

STEP 3: For each duplicated card, update:

• The Heading inside Card title (e.g., High-end Picks, Smartphones, Kitchens)
• The Link on the Arrow link Text block
• The banner Image and its Link
• Each Sub-card's Image and Heading text

-----------------------------------------

🚩 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 4 category columns are stacking vertically - confirm the Stat list Display type is set to Grid and Items per row (Desktop) is set to 4.
• The category title and arrow are stacking instead of sitting side by side - confirm the Card header Group direction is set to Horizontal.
• The sub-cards are showing in a single column instead of 3 - confirm the Sub-cards list Items per row (Desktop) is set to 3.
• Banner images are different heights across columns - make sure all banner images are designed at the same aspect ratio before uploading.
• 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.