How to create an 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:

After setting up the category, you can go to the product card 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 an Import tab in the category settings. Click on the button of the same name to download the table with product cards:

After uploading the file containing your product cards (exported from another platform), you will need to map the columns.

Once the product table is uploaded, you will see a mapping interface with two key columns:

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.

2. The second table column: displays an example of values taken from the second row, right after the column headers.

3. 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".

Ready!

This way you can quickly upload products to MaviBot and launch your online store.

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

How to export product cards

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

There is an "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:

You can export product cards in cvs format from any platform, so you can quickly set up and launch an online store.

Product card

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

The product settings window will open.

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) Article (number) d) Quantity (you can specify how many items are available in your store) e) Short description

Attention!

First, create at least one product before adding product categories

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 "+" :

Site settings

After creating the necessary categories and filling out the product cards, proceed to the site settings. To do this, click on your website’s name in the top navigation bar.

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.

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

Within the section settings, you can:

• Customize typography: Select the font and adjust its size for the section.

• Style the background: Upload an image or choose a solid color or gradient.

• Configure the layout: Adjust the width, visibility, overall size, and alignment.

You can learn more about the global section settings here.

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.

You can add any number of sections for your online store — for example, to display specific product categories in each section or place sections on different pages of the website.

All you need to do is fill in the product cards, while the section settings are minimal for a quick launch.

How to change a site address

To give your site a clean, concise address instead of an automatically generated URL (like the one shown below), you can customize the page link. Go to the site settings to make this change.

Next, in the main settings, update the fields as shown in the image below.

1. Site name. This is the name displayed in the Sites section. Changing it helps you identify and find the site more easily in your list later.

1. Browser tab title. The title displayed in the browser tab and address bar.

2. URL. The site's address.

Your fully functional online store is ready!

How to share a link in a chatbot

You can share a link to your online store in a chatbot. For example, you can send a direct link (compatible with most messengers) or use the dedicated Web App button in Telegram.

Telegram Web-app

You can share your online store in a chatbot via a Telegram Web App button or as a standard link (for other messengers).

Method 1: Telegram Web App button

This method opens your store within Telegram's native interface.

Step 1. Copy your store address

Copy the URL from your browser's address bar or from the store card in the “Sites” section.

Step 2. Create or edit a block

Create a new block in the builder or embed this into an existing bot flow.

Step 3. Configure the Telegram Web App button

1. In your block, navigate to Buttons in the settings and click "Add button."

2. In the modal window, select the "Telegram Web Application" function.

3. Paste your store's URL into the link field.

4. Name the button (e.g., "Go to the site") and click "Add."

5. Set the button type to "Inline" or "Keyboard" as needed, then save the block settings.

Step 4. Test the Bot

Trigger the block (e.g., by sending the word "Store"). The bot will reply with a message containing the button. Clicking it will open your store as a Telegram Web App.

Method 2: Standard link button (for other messengers)

This method creates a standard button that opens the store in a web browser.

Step 1. Copy your store address

Copy the URL from your browser's address bar or from the store card in the “Sites” section.

Step 2. Create or edit a block

Create a new block in the builder or embed this into an existing bot flow.

Step 3. Configure the link button

1. In your block, navigate to Buttons in the settings and click "Add button."

2. In the modal window, leave the function as the default (usually "Open URL").

3. Paste your store's URL into the link field and name the button.

4. Set the button type to "Inline" or "Keyboard" and save the block settings.

Done! You have successfully configured your chatbot to share your online store via a direct link or a native Telegram Web App.