Once you add your products in the store settings, you can decide on the best way to showcase them to the site visitors. Weblium offers a few ways to display the products on the live site. You can choose one or combine them:

Displaying products on the store homepage
Adding a store block on a particular page
Adding a product card element to an existing block

Let’s look into each of the ways separately.

Important: only Published products can appear on the live site.

Displaying products on the store homepage

A store homepage is an automatically generated page on your website that can be accessed by adding /shop at the end of the domain or clicking the link in your store settings:

By default, the store homepage consists of a website header, footer, and the product category “folders” that contains the category name and image. If your products are not added to any categories in the store settings, they are placed on the Store homepage category by default. Under the "folder," products and subcategories are displayed.

Store homepage is added to your sitemap automatically and can be indexed the same way as other website pages.

Note: since the store homepage gets created automatically, currently there is no way to edit it. If you’d like to hide the page from the sitemap and block its indexing, see the article Changing the settings of the online store.

The best way to let your site visitors access and browse the store homepage is by adding it to the site navigation menu. Learn more about this in the article Menu bar settings.

Adding a store block on a particular page

Weblium offers 2 store blocks that let you display the products on any page of your website. To add these blocks, click on the “plus” icon where you’d like to place them:

Navigate to the Store section:

You’ll see two blocks that look similar at first glance, but can be used for different purposes. Check them out.

Products block

The first block — Products — 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 article Collection items settings for more info.

Storefront block

Storefront block lets you display a whole online store catalog 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 added block to access its settings:

In the Categories field, choose a category in the dropdown:

Here you can also set the number of products displayed in the block, their sorting, the number of elements in a row and the visibility of the out-of-stock products.

Tip: all further changes in the product cards or in the category will be displayed on the published site. Therefore, when adding new products to a category, you won't need to manually add them in the editor. They will be immediately available in the storefront.

Adding a product card element to an existing block

If you are looking for a way to fit in a product to an existing block organically, try adding a product card as a separate element. It’s possible to do so in almost all the blocks in the editor, plus it allows certain flexibility in terms of the layout you get.

To add a product card element, hover over a place in the block where you'd like to add a card and click on the "plus":

Then, choose the Product element in the list:

Tip: you can star a Product element as your favorite for a quick access according to the instructions in the article Adding elements.

Hover over the Product element and click on the "gear" at the top left corner:

In the Product layout choose the product you want to display:

Once you are done adding products in the editor, make sure to publish the site for the changes to take effect.
Was this article helpful?
Thank you!