Look 1

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

Before touching any settings, here's the full nesting structure you'll be building. Use this as your 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.

• Click on the Stat counter section to open its settings panel.
• Set Section width to Full width.
• Set Top padding to 16px and Bottom padding to 0px.
• Set Color scheme (light) to Scheme 1 and Color scheme (dark) to Scheme 2. (This is up to you)

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

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

The Stat list is the Item list container that holds all 6 cards. Click on it in the sidebar to open its settings.

Leave all other settings at their defaults.

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

🚩 Process 3: Build one Banner card (Group)

You'll build one card fully, then duplicate it 5 times. All 6 cards share the same internal structure - only the content and color scheme change.

STEP 1: Add the Banner Group inside the Stat list

• Delete all the Stat blocks inside the Stat list.
• Click "Add block" inside the Stat list and select Group. This becomes your first Banner card. (name it Banner for easier setup)
• Click on the Banner to open its settings and configure:

STEP 2: Add the "Save up to" Subheading

• Inside the Banner, click "Add block" and add a Subheading.
• Enter "Save up to" as the text.
• Set font size to Medium.

STEP 3: Build the discount number area (Text Group → Heading + Off Group)

The large discount display (e.g., "35 % Off") uses a two-level nesting. First, add a container Group for the whole number area:

• Inside the Banner, click "Add block" and add a Group. Rename it Text for clarity.
• Set its direction to Horizontal on the desktop & mobile so the number and the unit sit side by side.

Inside the Text Group, add the large number:

• Click "Add block" inside the Text Group and add a Heading.
• Enter the discount number only - e.g., 35. No symbol yet.
• Set font size to Large (or Custom if you want a larger size).

Still inside the Text Group, add the unit and label:

• Click "Add block" and add another Group. Rename it Off.
• Set its direction to Vertical so "%" and "Off" stack on top of each other.
• Inside the Off Group, add a Subheading and enter % (or $ for money-based discounts).
• Add a second Subheading and enter Off.

STEP 4: Add the product Image

• Back in the Banner (not inside Text), click "Add block" and add an Image.
• Upload or select your product image.

STEP 5: Add the category Heading

• Click "Add block" and add a Heading.
• Enter the category name, e.g., Laptops.
• Set font size to Medium.

STEP 6: Add the description Text

• Click "Add block" and add a Text block.
• Enter the short description, e.g., Powerful processors, all-day battery, and sleek designs – save on ultrabooks.

STEP 7: Add the Shop now Button

• Click "Add block" and add a Button.
• Set the label to Shop now.
• Set Button style to Text link.
• Add the destination URL in the Button link field.

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

🚩 Process 4: Duplicate the Banner card 5 more times

Now that one card is complete, you don't need to build the other 5 from scratch.

STEP 1: In the left sidebar, click on the Banner Group you just built.

STEP 2: Click the ⋯ (three dots) menu at the top of the settings panel and select "Duplicate block". Repeat until you have 6 Banner cards total.

STEP 3: For each duplicated card, update:

• The Heading number (e.g., 25, 15, 199, 99, 299)
• The unit Subheading ("%" or "$" depending on the card)
• The Image
• The category Heading text
• The description Text
• The Button link URL
• The Color scheme of the Banner Group - give each card a distinct scheme to create the varied background colors

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

🚩 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:

• Cards are stacking vertically instead of showing in a row - make sure the Stat list Display type is set to Grid, not Carousel.
• The Header area is showing - confirm the Header block is hidden (eye icon toggled off).
• The "%" and "Off" are side by side instead of stacked - confirm the Off Group direction is set to Vertical.
• The number and unit are stacked instead of side by side - confirm the Text Group direction is set to Horizontal.

Need help? Contact our support team at Omni Themes Support.