In the Mix & Match Bundle Editor, you can set a different number of products per row for desktop and mobile.
The desktop and mobile layout settings are independent. Changing one will not affect the other.
Supported ranges:

• Desktop: 2–8 products per row
• Mobile: 1–2 products per row

Step 1: Open the Mix & Match Bundle Editor

Open the Mix & Match Bundle you want to edit.
In the preview area, locate the ProductList you want to adjust.

Step 2: Select the ProductList

Click the ProductList in the preview, or select the corresponding ProductList component from the page structure.
The ProductList settings will open in the panel on the right.
[IMAGE: ProductList selected with its settings panel open]

Step 3: Open the Layout Settings

In the ProductList settings panel, click:
Styling
Then expand:
Layout
The Layout section includes:

• Items per row
• Horizontal gap
• Vertical gap

[IMAGE: ProductList → Styling → Layout]

Change the Desktop Products per Row

Step 4: Switch to Desktop Preview

Click the desktop icon at the top of the editor to switch to Desktop Preview.
[IMAGE: Desktop Preview selected]

Step 5: Change Items per Row

Go to:
ProductList → Styling → Layout
Find:
Items per row
On desktop, you can set the value from:
2 to 8 products per row
For example:

• 2 products per row
• 4 products per row
• 6 products per row
• Up to 8 products per row

The desktop preview updates immediately after you change the value.
[IMAGE: Desktop Items per row setting]

Desktop Layout Recommendations

Desktop supports between 2 and 8 products per row.
The best value depends on:

• The available page width
• The width of the ProductList area
• Product image size
• Product title length
• The amount of information shown on each Product Card
• The space required for prices, variants, and buttons

As a general guide:

• 2–3 products per row: Best for larger cards or cards with more information
• 4–5 products per row: Suitable for most standard Bundle layouts
• 6–8 products per row: Best for compact, image-focused Product Cards

After changing the value, check that:

• Product images are large enough
• Product titles remain readable
• Prices do not look crowded
• Add buttons have enough space
• The ProductList is easy to browse

Change the Mobile Products per Row

Step 6: Switch to Mobile Preview

Click the mobile icon at the top of the editor to switch to Mobile Preview.
[IMAGE: Mobile Preview selected]

Step 7: Change Items per Row

Go to:
ProductList → Styling → Layout
Find:
Items per row
On mobile, you can select:

• 1 product per row
• 2 products per row

The maximum supported value on mobile is 2 products per row.
[IMAGE: Mobile Items per row set to 2]

The mobile preview updates immediately after you change the value.

Mobile Layout Recommendations

1 product per row

This layout is useful when:

• Product Cards contain more information
• Product titles are long
• You want to display larger product images
• Cards include more pricing, variant, or button content

2 products per row

This layout is suitable for:

• Most standard Mix & Match Bundles
• Product Cards with shorter titles
• Product-focused layouts with simple card content
• Helping customers browse more products at once

For most mobile Bundle layouts, 2 products per row provides a good balance between product visibility and browsing efficiency.

Adjust the Space Between Products

In addition to Items per row, the Layout settings allow you to adjust the spacing between Product Cards.

Horizontal gap

Horizontal gap controls the space between products in the same row.
Increase it when the Product Cards look too crowded.
Decrease it when you want a more compact layout.

Vertical gap

Vertical gap controls the space between product rows.
Increase it to create a more open layout.
Decrease it to make the ProductList more compact.
[IMAGE: Horizontal gap and Vertical gap settings]

Are Desktop and Mobile Settings Independent?

Yes.
Desktop and mobile use separate layout values.
For example:

Desktop:
4 products per row

Mobile:
2 products per row

Changing the mobile Items per row value does not change the desktop layout.
Changing the desktop value does not affect the mobile layout.

Switch to the correct device preview before changing Items per row.

Why Is the New Layout Not Showing on the Storefront?

Check that:

• You switched to the correct device preview
• The correct ProductList is selected
• You opened ProductList → Styling → Layout
• The Items per row value was updated
• The Bundle changes were saved
• The storefront page was refreshed
• You are viewing the correct Bundle
• The storefront is loading the latest published Bundle settings

Frequently Asked Questions

What is the maximum number of products per row on desktop?

Desktop supports up to 8 products per row.
The available range is:
2–8 products per row

What is the maximum number of products per row on mobile?

Mobile supports up to 2 products per row.
The available range is:
1–2 products per row

Can desktop and mobile use different values?

Yes.
The desktop and mobile Items per row settings are configured separately and do not affect each other.

Why can’t I set 3 products per row on mobile?

The Mix & Match Bundle Editor supports a maximum of 2 products per row on mobile.
This helps prevent product images, titles, prices, variants, and buttons from becoming too crowded on smaller screens.

Which layout should I use?

The best layout depends on the Product Card content and available page width.
As a general recommendation:

• Desktop: 3–5 products per row
• Mobile: 2 products per row

Use fewer products per row when the Product Cards contain more information.
Use more products per row on desktop when the cards are compact and primarily image-based.

Summary

To change the desktop products per row:

Switch to Desktop Preview
→ Select ProductList
→ Open Styling
→ Open Layout
→ Change Items per row
→ Save

Desktop supports:

2–8 products per row

To change the mobile products per row:

Switch to Mobile Preview
→ Select ProductList
→ Open Styling
→ Open Layout
→ Change Items per row
→ Save

Mobile supports:

1–2 products per row

Desktop and mobile settings are configured independently.

Updated on: 20/07/2026