> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.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).

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

1. [Store homepage](#3-1-store-homepage)
2. [Category page](#3-2-category-page) 
3. [Blocks “Storefront” and “Category list”](#3-3-blocks-storefront-and-category-list) 
4. [Block “Products” (collection items)](#3-4-block-products-collection-items) 

Before changing product display on mobile devices, you need to switch to [editor for the mobile site version](https://help.weblium.com/en-us/article/editing-of-the-sites-mobile-version-1b7vztl/). 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:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/product-display-in-2-columns-o_j4212t.png)

### 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:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/product-display-in-2-columns-o_qyxlwi.png)
| ${color}[#1aa900](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:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/product-display-in-2-columns-o_wiqmak.png)

|| ${color}[#ffa800](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](https://help.weblium.com/en-us/article/adding-a-store-block-1qepwje/).

1. 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**:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/product-display-in-2-columns-o_iutcp1.png)

2. Similarly, for the **Category list** block - navigate to the **Storefront settings** and select to display two **Items in row**:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/product-display-in-2-columns-o_sdl5vr.png)

### 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**:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/product-display-in-2-columns-o_19af35d.png)

| ${color}[#1aa900](Hint:) this block is a collection - you can learn more about this block type in the article [customizing collection items](https://help.weblium.com/en-us/article/collection-items-settings-b2rb1y/).


[Publish the site](https://help.weblium.com/en-us/article/publishing-a-site-tgxmch/) for the changes to take effect.