Product display in 2 columns on the mobile site version
The correct arrangement of products on the mobile version of the site plays a crucial role in improving the user experience. Arranging products in two columns can increase shopping convenience, as customers will see more products simultaneously. At the same time, if you need each product image on the smartphone screen to be more prominent in the product list, you can display products in one column.
You can display 2 products per each row in the following sections/blocks of your website:
Store homepage
Category page
Blocks “Storefront” and “Category list”
Block “Products” (collection items)
Before changing product display on mobile devices, you need to switch to editor for the mobile site version. This can be done by clicking on the mobile phone icon, either at the top of the editor or directly in the settings of a particular element:
Open the list of pages on your site, click on the Store tab, and navigate to the Store homepage. Click on the Category product settings element (element with product samples) and select to display two Items in row for the mobile version of the site:
Tip: You can set the column spacing (indentation) to 15 or 30 pixels.
Open the list of site pages, navigate to the Store tab — Category page and, similarly to the previous section, open Category product settings and select to display two Items in row for the mobile version of the site:
Note: similarly, you can change the display for a tablet, and you can choose the number of products in row from 1 to 4.
By default, all products are displayed on the store's homepage, but you can also add a storefront blocks to other pages of the site. You can learn how to add such blocks in the article Adding a block with your store to a page.
For the Storefront block, navigate to the Storefront settings by clicking on the gear in the middle of the element and select to display two Items in row:
Similarly, for the Category list block - navigate to the Storefront settings and select to display two Items in row:
In the Products block, hover over any item in the collection and navigate to the Collection settings by clicking on the “gear” in the upper right corner of the collection item. After that, similar to the previous sections, choose to display two Items in row:
Hint: this block is a collection - you can learn more about this block type in the article customizing collection items.
Publish the site for the changes to take effect.
You can display 2 products per each row in the following sections/blocks of your website:
Store homepage
Category page
Blocks “Storefront” and “Category list”
Block “Products” (collection items)
Before changing product display on mobile devices, you need to switch to editor for the mobile site version. This can be done by clicking on the mobile phone icon, either at the top of the editor or directly in the settings of a particular element:
1. Store homepage
Open the list of pages on your site, click on the Store tab, and navigate to the Store homepage. Click on the Category product settings element (element with product samples) and select to display two Items in row for the mobile version of the site:
Tip: You can set the column spacing (indentation) to 15 or 30 pixels.
2. Category page
Open the list of site pages, navigate to the Store tab — Category page and, similarly to the previous section, open Category product settings and select to display two Items in row for the mobile version of the site:
Note: similarly, you can change the display for a tablet, and you can choose the number of products in row from 1 to 4.
3. Blocks “Storefront” and “Category list”
By default, all products are displayed on the store's homepage, but you can also add a storefront blocks to other pages of the site. You can learn how to add such blocks in the article Adding a block with your store to a page.
For the Storefront block, navigate to the Storefront settings by clicking on the gear in the middle of the element and select to display two Items in row:
Similarly, for the Category list block - navigate to the Storefront settings and select to display two Items in row:
4. Block “Products” (collection items)
In the Products block, hover over any item in the collection and navigate to the Collection settings by clicking on the “gear” in the upper right corner of the collection item. After that, similar to the previous sections, choose to display two Items in row:
Hint: this block is a collection - you can learn more about this block type in the article customizing collection items.
Publish the site for the changes to take effect.
Updated on: 08/27/2024
Thank you!