Look 2

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 Stats counter section and configure it

STEP 1: Add the Stats 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 Stats counter.

STEP 2: Configure the section-level settings.

Click on the Stats counter section name to open its settings panel and apply these values:

⚠️ Note: Setting Desktop direction to Horizontal is what places the Header (left side) and Stat list (right side) next to each other. Each side takes up equal width automatically.

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

🚩 Process 2: Build the left side (Header group)

The Header group is the left-side container. Everything in this process goes inside it. The Header already exists in the section by default - you do not need to add it.

STEP 1: Add the Text group (subheading + main heading)

• Click "Add block" inside the Header group and add a Group. Name it Text.
• Set its direction to Vertical.
• Inside the Text group, click "Add block" and add a Subheading. Enter your label text, e.g., Exclusive in Maximize.
• Add a Heading below it. Enter the main title, e.g., Enjoy the Latest Technology at Highest Quality. Set font size to Medium.

STEP 2: Add the Features group (outer container for the 4 rows)

• Back in the Header (not inside Text), click "Add block" and add a Group. Name it Features.
• Set its direction to Vertical so the rows stack from top to bottom.

STEP 3: Build one Feature row inside the Features group

Each feature row is a horizontal Group containing a colored icon box and a text label. Build one completely, then duplicate it.

• Inside the Features group, click "Add block" and add a Group. Name it Feature row.
• Set its direction to Horizontal so the icon and text sit side by side.
• Set Vertical alignment to Center for both desktop and mobile.

Inside the Feature row, add the icon box:

• Click "Add block" and add a Group. Name it icon.
• Set a Color scheme to give the icon box its background color (e.g., a scheme with a yellow or highlighted background).
• Add padding on all sides (e.g., 8px) to give the icon breathing room.
• Inside the icon group, click "Add block" and add an Icon. Choose your icon from the dropdown.

Again, inside the Feature row, add the text label:

• Click "Add block" and add a Group. Name it text.
• Inside the text group, add a Heading. Enter the feature text, e.g., 100% Price and Quality Guarantee. Set font size to Custom (Desktop: 15px, Mobile: 13px, Line height: 140%).

STEP 4: Duplicate the Feature row 3 more times

• Click on the Feature row group in the sidebar.
• Click the ⋯ (three dots) menu and select "Duplicate block". Repeat until you have 4 Feature rows.
• Update the Icon and Heading text in each duplicated row.

STEP 5: Add the Button

• Back in the Header (at the same level as Text and Features), click "Add block" and add a Button.
• Set the label to Explore Our story.
• Set Button style to Primary.
• Add the destination URL in the Button link field.

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

🚩 Process 3: Configure the Stat list (right side)

The Stat list is the Item list on the right side that holds all the category cards.

 Click on it in the sidebar and apply these settings:

Leave all padding at 0px and all other settings at their defaults.

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

🚩 Process 4: Build one Collection card and duplicate

STEP 1: Delete the default Stat blocks

• Inside the Stat list, delete all the default Stat blocks that came with the section.

STEP 2: Add one Collection group

• Click "Add block" inside the Stat list and add a Group. Name it Collection.
• Apply these settings:

STEP 3: Add the Image and Heading inside the Collection group

• Inside the Collection group, click "Add block" and add an Image. Upload or select your category image.
• Add a Heading below the image. Enter the category name, e.g., Wireless Earbuds. Set font size to Custom (Desktop - 14px, Mobile - 14px, Line height - 140%)
  

STEP 4: Duplicate 7 more times

• Click on the Collection group in the sidebar.
• Click the ⋯ (three dots) menu and select "Duplicate block". Repeat until you have 8 Collection cards total.
• For each duplicated card, update the Image, the Heading text, and the Link URL.

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

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

• Left side and right side are stacking vertically instead of sitting side by side - confirm the section's Desktop direction is set to Horizontal.
• Feature rows are side by side instead of stacked - confirm the Features group direction is set to Vertical.
• Icon and text label are stacking instead of sitting side by side - confirm each Feature row group direction is set to Horizontal.
• Category cards are not showing in a 4-column grid - confirm the Stat list Display type is set to Grid and Items per row (Desktop) is set to 4.

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