(Various preset) Look 1: Collection list

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 Category cards 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 on the Heading block inside the Header and enter your section title - e.g., Shop conveniently in the Various online supermarket.

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

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

The static Item list block holds all your category cards. Rename it Card list for clarity, then click on it to open its settings and configure:

Leave all other settings at their defaults.

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

🚩 Process 4: Build one Category card (Group)

You'll build one card fully first, then duplicate it for each additional category. All cards share the same internal structure - only the content, links, and color scheme change per card.

STEP 1: Add and configure the Category card Group

• Click "Add block" inside the Card list and select Group. Rename it Category card (or the category's name, e.g., Fruit & Veggies, for easy identification).
• Configure its settings:

STEP 2: Add the category Heading

• Inside the Category card Group, click "Add block" and select Heading.
• Enter the category name, e.g., Fruit & Vegetables.
• Set the Heading size to Medium.

STEP 3: Build the Image Group (product preview row)

• Inside the Category card Group, click "Add block" and select Group. Rename it Image.
• Configure its settings:

Now add 4 product images inside the Image Group:

• Click "Add block" inside the Image Group and select Image. Upload or select a product image from this category.
• Repeat to add 3 more Image blocks (4 total), each showing a different product from this category.

STEP 4: Build the Subcategory links Group

• Back inside the Category card Group (not inside Image), click "Add block" and select Group. Rename it Subcategory links.
• Set its Direction to Vertical on both desktop and mobile.
• Set the Width to Custom - 100%.

Inside the Subcategory links Group, add each subcategory as a Text block:

• Click "Add block" and select Text.
• In the text editor, type the subcategory name (e.g., Fruit) and wrap it in a hyperlink pointing to that subcategory's collection page.
• Repeat for all subcategories in this category.

Then add the Shop all button at the bottom:

• Click "Add block" inside Subcategory links and select Button.
• Set the label to Shop all.
• Set the Button style to Primary.
• Add the collection URL in the Button link field.

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

🚩 Process 5: Duplicate the Category card for each category

Now that one card is complete, you don't need to rebuild the others from scratch.

STEP 1: In the left sidebar, click on the Category card 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 the right number of category cards.

STEP 3: For each duplicated card, update:

• The category Heading text (e.g., "Meat & Fish Products", "Pantry Staples", etc.)
• All 4 Image blocks inside the Image Group - replace with product images from that category
• All Text blocks inside the Subcategory links Group - update both the label text and the link URL for each subcategory
• The Button link URL in the Shop all button to point to that category's collection
• The Color scheme of the Category card Group and its nested Image Group - give each card a distinct scheme to create the varied pastel background colors

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

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

• Cards are stacking vertically instead of in a row - make sure the Card list Display type is set to Carousel and Desktop columns is set to 6.
• Product images are stacking instead of showing in a row - confirm the Image Group direction is set to Horizontal on both desktop and mobile.
• Subcategory links and button are side by side instead of stacked - confirm the Subcategory links Group direction is set to Vertical.
• All cards show the same background color - make sure you've set a different Color scheme for each Category card Group and its nested Image Group.
• Cards are too cramped on mobile - confirm the Card list Mobile columns is set to 2.

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