> ## 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).

# Adding a store block

After you added products in your store, it's time to decide where to display them on the live site. By default, all the products are placed on the [store homepage](https://help.weblium.com/en-us/article/displaying-products-on-the-store-homepage-1oa0joq/), but you can also add a store block anywhere on the website.

We have 3 types of the store blocks that you can use: 

1. [Category list](#3-1-category-list-block) — a block with tabs to display several categories.
2. [Products](#3-2-products-block) — a block to show selected products (even from different categories).
3. [Storefront](#3-3-storefront-block) — a block to display a single category.

To add any of these blocks, click on the “plus” icon in the editor:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1072_1d9y8zz.png)

Then navigate to the **Store** section:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_g6a6qt.png)

You'll see 3 blocks there, and below we'll tackle each of them.

### 1. Category list block

The **category list** block allows you to display several categories in a convenient way. 

|| ${color}[#ffa800](Note:) If you haven't yet created product categories in the store, make sure to check out the [Creating product categories in the online store](https://help.weblium.com/en-us/article/creating-product-categories-in-the-online-store-p1uamn/) article.

1. To select a category for each tab, click on the gear icon:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_pkkf8d.png)

2. Then click on the dropdown menu and pick a category you'd like to display in that particular tab:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_108j23x.png)

3. Continue to adjust the view by specifying the product sorting, setting the number of products displayed, the number of products in a row. You can also tick the options to display the out of stock products and display product descriptions:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_w6yq8g.png)

4. Repeat this action for the rest of the tabs in the block.

| ${color}[#1aa900](Tip:) To further manage the block, for example, rename the title/ tabs, add or remove tabs or add some color to them, check out the dedicated article: [Adding blocks with tabs](https://help.weblium.com/en-us/article/adding-blocks-with-tabs-1zoc2d/).

### 2. Products block

The **products block** lets you choose particular products from your store and display them in a collection. Basically, in this block you can select products from various categories and change them manually if needed. 

1. To add a product, open the card settings by clicking on the "gear" at the top left corner:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1074-1_1imuo5y.png)

2. Select what product you'd like to display in the **Product layout** tab:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1053_ea64py.png)

|| ${color}[#ffa800](Note:) Bear in mind that this is a collection block. Each item in the collection keeps the same layout as others. Check the [Collection items settings](https://help.weblium.com/en-us/article/collection-items-settings-b2rb1y/) article for more info.

###  3. Storefront block

Storefront block lets you display a single store category on your live site. Even if you add/ delete products in the store settings, the catalog in the storefront will be updated automatically to reflect all the recent changes.

1. To choose a category, hover over the block and access its settings:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/image_hpwx9m.png)

2. In the **Categories** field, choose a category in the dropdown:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1080-7_v8a7w2.png)

3. Same as with the block called "Category list", in the Storefront block you can set the number of products displayed in the block, their sorting, the number of elements in a row the visibility of the out-of-stock products, and the product descriptions.