Online store is a great opportunity to present your products on the site and start receiving orders from visitors.

With Weblium online store, you can add photos, name, price, availability and description of your products. Moreover, you can choose where to place these products on the site — adding product cards is possible for almost any block in the editor.

Follow the instructions below to add, set up your products for an online store, and display them on a published site.

Important: an online store is available for Pro sites only.

Adding products to your store

First, you need to add products in the site settings, and then place them in the editor.

Note: online store is linked to a certain website. Thus, if you need multiple websites with online stores, you'll need to create and manage each store separately for each website.

Open the site's Settings and navigate to the Your store tab:



Click Add to create a product:



In the pop-up window enter the product details — image, name, price, SKU, description and availability:



Tip: maximum image size — 1 MB, supported file formats — .jpg and .png. You can also add up to 10 images and make one of them a cover.

The name and product SKU are the only required fields, but we recommend leaving comprehensive information about the products so that site visitors can make the best choice.

After you've saved the item, its status will be marked as Published. If you're not ready to show your products in the catalog yet, change the Visibility of the product to the Draft:



This way, the product and its details will remain in the site settings, but will not be available for adding to the block in the editor. You can change its visibility to Published at any time.

To delete, duplicate, or edit an existing product, click on the three dots near it:



Tip: once you make changes to the product, don't forget to click Save:



If you have a few products in your catalog, you can delete some of them by clicking on the checkbox:



Displaying products on your live site

For the product to be available for adding in the site editor, make sure that its visibility is set to Published. You can use a specific block to show your products, or add product cards as elements to almost any existing block.

Open the site editor, access the block gallery and add a Store block:



Note: bear in mind that this is a collection block. Each item in the collection keeps the same layout as others — if you delete an element from one item in the collection, it will be automatically deleted from every item. Check the article Collection items settings to see how you can edit the products block.

In case you want to add products to another block, hover over a place in the block where you'd like to add a card and click on the "plus":



You can use both the ready-made blocks in the gallery as well as choosing a blank one. Learn how you can edit your custom block in the article Adding a custom block.

Then, choose the Product element in the list:



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:



You can also add a background to this specific product card:



To edit the style and the text in the button, click on the button itself and then press the "gear". More on how to change button's design — in the article Changing the design of a button.



The color of the pricing in the product card depends on the site color palette. If the background of the card is light, the pricing will have the Brand color from the palette. If you have a dark background of the card, the pricing will have the color of a Light shade:



Once you're done with setting up product cards, make sure to publish your site for the changes to appear live.

To see all product's details, click on the image of the product on the published site, and you will be automatically redirected to the page with full information:



Check the article Managing orders in the online store to see how you can process the orders from your clients and change their statuses.
Was this article helpful?
Cancel
Thank you!