(Swift preset) 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 Stats counter section and configure section-level settings

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.
• (Optional) Rename the section to something like Stats with promo card via the ⋯ menu for easier identification in your sidebar.

STEP 2: Clear out the default blocks that come with the section.

The Stats counter section adds some default content you won't need for this look. Remove them before doing anything else:

• Inside the Header block, delete the default Subheading and Heading blocks.
• Inside the Stat list block, delete all 4 default Stat blocks.

STEP 3: Click on the section to open its settings panel and configure:

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

🚩 Process 2: Set up the Header block

The Header is the static Group block at the top of the section. It holds the section's main heading.

STEP 1: Click on the Header block in the left sidebar to open its settings, then configure:

STEP 2: Click "Add block" inside the Header, select Heading, and enter your section title - e.g., Online Hypermarket for Professionals and Businesses.

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

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

The Stat list is the static Item list block that holds the two side-by-side areas: the Stats row and the Promo card. Click on it to open its settings and configure:

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

🚩 Process 4: Build the Stats row

The Stats row is a Group block that holds all the stat counters displayed horizontally. You'll build it with 3 Stat item Groups inside, each containing a Counter and a Text block.

STEP 1: Add and configure the Stats row Group

• Click "Add block" inside the Stat list and select Group. Rename it Stats row.
• Configure its settings:

STEP 2: Add and configure the first Stat item Group

• Click "Add block" inside the Stats row Group and select Group. Rename it Stat item.
• Configure its settings:

STEP 3: Add the Counter and Text blocks inside the Stat item

• Click "Add block" inside the Stat item Group and select Counter. Enter the stat value - e.g., 1100+. Adjust the font size to suit your design.

• Click "Add block" again and select Text. Enter the supporting description - e.g., Original products with a guarantee.

STEP 4: Duplicate the Stat item for each additional stat

• Click on the Stat item Group, open the ⋯ menu, and select "Duplicate block". Repeat until you have the number of stats you need (3 in the demo).
• For each duplicate, update the Counter value and Text description.

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

🚩 Process 5: Build the Promo card

The Promo card is a Group block that sits to the right of the Stats row (on desktop). It contains a Card group on the left (with a heading and CTA buttons) and a promo Image on the right.

STEP 1: Add and configure the Promo card Group

• Click "Add block" inside the Stat list and select Group. Rename it Promo card.
• Configure its settings:

STEP 2: Add and configure the Card Group (heading + buttons)

• Click "Add block" inside the Promo card and select Group. Rename it Card.
• Set its Direction to Vertical on both desktop and mobile - this stacks the heading above the buttons.
• Set the Width to Fit so it takes up the remaining space beside the image.
• Add padding as needed to give the card content breathing room.

Inside the Card Group, add the heading:

• Click "Add block" and select Heading. Enter your promo headline - e.g., We Keep Your Car Running Newer Longer. You can highlight part of the text using the theme's highlight/marker styling in the heading settings.

Then add the Action buttons Group:

• Click "Add block" inside the Card Group and select Group. Rename it Action buttons.
• Set its Direction to Horizontal on both desktop and mobile - this places the two buttons side by side.
• Inside Action buttons, click "Add block" and select Button. Set the label (e.g., View Repair), choose Primary style, and add the destination link.
• Add a second Button block. Set the label (e.g., View Maintenance), choose Secondary style, and add the destination link.

STEP 3: Add the promo Image

• Back inside the Promo card Group (not inside Card), click "Add block" and select Image.
• Upload or select your promo image (e.g., a product or lifestyle photo that reinforces the card message).
• Adjust the image width as needed so it balances well with the Card group beside it.

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

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

• Stats row and Promo card are stacking instead of showing side by side - make sure the Stat list Display type is set to Grid and Desktop columns is set to 2.
• The 3 stat counters are stacking vertically instead of in a row - confirm the Stats row Group direction is set to Horizontal on desktop.
• The Counter is beside the Text instead of above it - confirm each Stat item Group direction is set to Vertical.
• The Card heading and buttons are side by side instead of stacked - confirm the Card Group direction is set to Vertical.
• The two CTA buttons are stacking instead of showing side by side - confirm the Action buttons Group direction is set to Horizontal.
• The promo image is above or below the Card instead of beside it - confirm the Promo card Group direction is set to Horizontal on desktop.

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