> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.ushopaid.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # How to Change the Number of Products per Row on Desktop and Mobile in the Mix & Match Bundle Editor 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] ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1ry15ez.png) ## 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] ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1wmj175.png) # 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] ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_wxkwp8.png) ## 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] ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_134mydm.png) ## 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] ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_xn63gx.png) ## 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] ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_13zuwo7.png) 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] ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_wrdndf.png) # 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.