Online-store (переведено Гюльнар)

You can now create a fully functional online store directly inside Mavibot. The new "Online Store" website type lets you quickly launch a product catalog without relying on third-party solutions. All configuration is done through a user-friendly visual interface — no coding required.

With our website builder, you can create a fully functional online store: add products, images, descriptions, and prices — and customers can choose products, add them to the cart, and pay. Everything works right on the site. No extra integrations needed. Simple and fast.

How to create online-store

Go to the sites section and click on the "Create" button:

Clicking the "Create" button opens a dropdown menu with website types. From there, select "Online Store"

After clicking on the "Online Store" button, you will go to the site settings, where you need to open the "Products" tab:

Product category

After going to the "Products" section, you will see product card templates:

You can go straight to configuring the products themselves, but if you want to categorize them so your customers can easily find what they need by category on the site, we recommend creating categories first.

To do this, click on the gear icon:

After that, the right menu opens with the category settings:

Click on the "Create Category" button:

In the window that opens, enter the category name and select the color (it will be displayed in the products table).

You can also change the column display in the category settings:

How to import products from another platform?

For example, we uploaded a table with products that we created manually in the "Tables" section of the Mavibot: Таблицы" ссылка

If you need to transfer an online store from one site or another service to Mabibot, use the tabs to download products in the category settings:

There is a "Download" tab in the category settings. Click on the button of the same name to download the table with product cards:

Next, after uploading the file containing the product cards exported from another platform, you need to map the columns.

After uploading the product table, you see:

1. The first table column: it displays the names of your columns from the uploaded table.

The columns correspond to the column names in the table:

1. The second column of the table shows example values taken from the second row, right after the column headers.

1. Product column: helps to compare (or skip, if a column is not needed) the column values of the uploaded table with the columns of the product:

Next, click "Upload products":

If needed, you can edit a product card by clicking the magnifying glass icon in the product row.

How to upload product cards?

To download the created product cards from one site to another, use the export tab in the category settings:

There is a "Export products" tab in the category settings.

Export products: here you can configure which columns from the product card table you would like to export (download to your device) and transfer to another project.

To remove unnecessary columns, it is enough to remove the check mark in the row with the column name.

Next, click on "Export products" — then the product cards will be downloaded to your device in the table format:

Product card

To create a new card, click on the round button "+" :

You will open the product settings window:

To edit an existing product card, click on the magnifying glass in the product line:

Here you need to add the title, upload image (one or more) and add a description:

Next, specify the product price and other details: a) Product category b) Price (e.g., current and old price — useful for showing discounts) c) SKU (Stock Keeping Unit) d) Quantity (you can specify how many items are available in your store) e) Short description

Then, if necessary, add the product characteristics and click "Save":

After that, the product card will appear in the table in the "Products" tab.

To add more products, click on the round button "+" :

Website settings

After creating the neeed categories and filled out the product cards, go to the site settings. To do this, click on the name of your website in the top line:

Then you will return to the site settings, where you need to click on the page to go to the section settings:

You will switch to the page editing mode by clicking on the "+" button:

In the right menu, select the "Product Catalog" section:

Product cards from the "Products" tab, including all details, prices, and images, will automatically appear in the section settings:

You're just a few steps away:

1. Now, select which product categories you want to display in the section:

1. Next, select the number of columns:

1. Specify how many products to display at the begin (before clicking on the "Show more" button)

1. Next, enable the toggles if you want your customers to sort products by categories and filters, and to display a short product description:

Now click "Save".

Now hover over the section and click "Settings" to customize it.

In the section settings, you can:

1. select the appropriate font, font size for the section;

2. customize the background by uploading images or selecting solid colors or gradients;

3. configure the section layout, including width, visibility, size, and alignment

Now go to the preview:

Here you can preview how the website displays products, test how the filters and category search work, and view the cart and checkout process.

How to change the website address?

So that the website address has a clean and concise link, instead of an automatically generated one like in the example below:

You can change the page URL. To do this, go to the site settings:

Next, in the main settings, change like in the picture below:

1. Site title - is displayed in the Sites section (after changing its name, you can easily find the site in the list of existing sites in the future):

1. The browser tab title — displayed in the address bar.

1. URL — site adress:

Sharing a link in the chatbot

A link to an online store can be shared in a chatbot: for example, with a simple link (for other messengers) or using the web-app button in Telegram.

How to do that?

Telegram Web-app

Step 1. Copy the online store address from the browser's address bar:

Or from the store card in the “Websites” section.

Step 2. Create a block in the constructor.

Step 3. Telegram Web-app button

In the block, create a button (to do this, click on "Buttons" in the block settings) and click "Add button". A modal window opens with the button settings:

Select "Telegram Web Application" function and paste the link to your website:

Next, add the button name, for example, "Go to the site" and click "Add":

Next, the button will be added to the block. Also select the "In Text" button type:

And save the block settings:

Next, let's test the Telegram bot. Send the bot the word "Store", as specified in the block's condition.

The bot sent a message with a button linking to your website. When the button is clicked, a web app with your store opens:

A button with a online store link (for other messengers)

Step 1. Copy the online sote address from the browser's address bar:

Or from the store card in the “Websites” section.

Step 2. Create a block in the constructor.

Step 3. The button with the online store link

In the block, create a button (to do this, click on "Buttons" in the block settings) and click "Add button". A modal window opens with the button settings:

Add the button link and name, while the function remains the same — by default:

Next, the button will be added to the block. Also, select the button type: "Inline" or "Keyboard".

And save block settings: