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, but you can also add a store block anywhere on the website.
We have 3 types of the store blocks that you can use:
Category list — a block with tabs to display several categories.
Products — a block to show selected products (even from different categories).
Storefront — a block to display a single category.
To add any of these blocks, click on the “plus” icon in the editor:
Then navigate to the Store section:
You'll see 3 blocks there, and below we'll tackle each of them.
The category list block allows you to display several categories in a convenient way.
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 article.
To select a category for each tab, click on the gear icon:
Then click on the dropdown menu and pick a category you'd like to display in that particular tab:
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:
Repeat this action for the rest of the tabs in the block.
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.
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.
To add a product, open the card settings by clicking on the "gear" at the top left corner:
Select what product you'd like to display in the Product layout tab:
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 article for more info.
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.
To choose a category, hover over the block and access its settings:
In the Categories field, choose a category in the dropdown:
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.
We have 3 types of the store blocks that you can use:
Category list — a block with tabs to display several categories.
Products — a block to show selected products (even from different categories).
Storefront — a block to display a single category.
To add any of these blocks, click on the “plus” icon in the editor:
Then navigate to the Store section:
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.
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 article.
To select a category for each tab, click on the gear icon:
Then click on the dropdown menu and pick a category you'd like to display in that particular tab:
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:
Repeat this action for the rest of the tabs in the block.
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.
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.
To add a product, open the card settings by clicking on the "gear" at the top left corner:
Select what product you'd like to display in the Product layout tab:
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 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.
To choose a category, hover over the block and access its settings:
In the Categories field, choose a category in the dropdown:
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.
Updated on: 12/07/2023
Thank you!