26th Jan 2020

E-commerce Store With XeroChat :


“Ecommerce store” is a special feature of XeroChat , the world’s best marketing software. With the feature, you can create a virtual store that will open not only inside messenger but also on the browser. Just after creating your store, it will provide two QR codes-- Messenger QR code and browser QR code. Just as your customers QR code, straightway, your virtual store opens inside your messenger or on browser. Because of the QR codes, the customer can directly enter your store.

With XeroChat Ecommerce feature, you can create both Ecommerce store & Restaurant food ordering system . Restaurant food order can be set both for home delivery or inside restaurant for counter or table wise delivery . All option are available to create your desire option for your both Ecommerce store or Restaurant.

Before going into details , you may check the live demo

Food Order Demo (Messenger)
Food Order Demo (Outside Messenger)

Ecommerce Demo (Messenger)
Ecommerce Demo (Outside Messenger)

In this blog, I will show you how to create Ecommerce store for inside messenger and on browsers with XeroChat

Creating store:

First, you have to create a store on the interface of the Ecommerce store and add products to the store. Then you have to make some settings so that your virtual store works properly.

First, go to the left panel of the XeroChat Dashboard > click on the Ecommerce store.

Screen shots of interface of ecommerce store

Just as you click on the Ecommerce store button, the interface of the Ecommerce store will appear with a Create store button at the top of the page.

creating and editing store

To create store, click on the Create store button> fill-out the form-- selecting a Facebook Page, providing some initial information about your store, writing down the Terms of service and refund policy, and uploading the logo and favicon.

In the form, there is a special box called local. Just as you click on the box, a drop-down menu of some languages will be shown-- select a language from here. Your ecommerce store will open in the language you select. For example, if you select English, your Ecommerce store will appear to your customers in English.

When you have completed filling out the form click on the create store button.

filling out a form to create a store

Add category:

Now you have to add some categories so that you can add products in different categories. The category is an important thing to arrange your products in proper order. If so, your clients can easily choose their desired products.

To create a category, go to Categories option at the right panel of the dashboard. A page will appear with add category button at the top of the page. Now click on the add category button.

Screen shots: Add category.

Instantly, a pop-up form will appear. Now select your page and click on Add Category > write down the category name > Click on the Save button.

Screen shots: Add category box.

Well, you can create many categories. All the categories-- with edit, delete and status button-- will be listed on the page. By clicking on the edit and delete button, you can edit and delete the category. You can also see the status of the category-- active or not.

Add Attribute:

To add the attribute,click on Attributes option at the right panel of the Dashboard and a page will appear with Add attribute button at the top of the page. Now click on the Add attribute button.

add attribute.

Instantly, a pop-up form will appear with. Now select your store > write down the Attribute Name > provide attribute value in comma-separated> enable or disable any of the three radio buttons called ‘Multi select’, ‘Optional’, and ‘Active’ as you see fit as you see fit> click on the save button.

As for the multi-select button, you have to keep in mind that you can’t enable the multi-select button for the attributes like ‘Size’ because a product can’t be small, medium, and large at the same time-- it is not logically possible.

As for optional button, If you enable the optional button, your clients have option not selecting attribute values for a specific product. If a client doesn't select an attribute value, they will order the the product of default attribute value.

But if you disable the Optional button, the clients must choose an attribute. Otherwise, he/she can’t order the product.

By the ‘Active’ button, you can make the attribute Active or Inactive. The functionalities of the other two buttons are a bit complicated to understand. If you enable the ‘Multi-select’ button, your clients can select the multiple attribute values for a specific product. On the other hand, if you disable the ‘Multi-select’ button, a client can only one attribute value for a specific food item.

Like the Category option, after you have added one or more attributes, the attributes will appear on the page. Of course, you can add as many attributes as you want. Well, from the page, you can edit and delete any attribute and can see the status of the attributes if the attribute is active or not.

Screen shot: Add attribute

Add products to the store:

After you have added categories and attributes, add some your products that could be included in categories and attached to the attributes.

Click on the Products > Add product > Fill up the form > click Save button.

Screenshots of product on the page.

Likewise, you can add thousands of products. And all the products will be shown on the page. And you can edit, delete and clone the products and see the product page of the product by the action button. Also, you can see the price and status of whether the product is active or inactive.

Checkout settings:

Now you have to make a checkout setting for your store. XeroChat’s Ecommerce store Ecommerce store has integrated some online payment methods-- PayPal, Stripe, Mollie, Razorpay, Paystack so that your customers can easily pay via the payment methods. Besides, it supports manual payment and cash on delivery systems.

Now you can make a specific checkout setting for a specific store.

To make a checkout setting, click on the ‘Checkout settings’ > fill-out check out integration form-- providing your account information.

Then you will get a checkout payment option. From here, enable any online payment methods and manual checkout for your store. And ‘Cash on Delivery’ is enabled by default.

Now you can make a specific checkout setting for a specific store.

After that, you will get the ‘Currency and Label’ option. From here, select your currency.

Then you will see, in a row, three radio buttons called Right alignment, Two decimal, and Display comma. Hover your mouse over the tooltips of the buttons, to see the functionality of the buttons.

You can alter the label of the the Buy Now button and Store Pickup title.

Then came the Tax and Delivery charge option. Here, you have to provide the amount of Tax in percentage and delivery charge.

Then comes the address preference area. If you enable the ‘Store Pickup’ button, the clients receive the products directly from your store. On the other hand, if you disable the ‘Store Pickup’ button, you have to provide a delivery address. And if you enable ‘Delivery note’ button, your clients can send a delivery note on how they want the delivery.

You can also determine which fields your clients have to provide in the delivery address by disabling and enabling some radio button. If you know the area of your clients, you don’t need to bother your customers to provide their countries, states and cities. On the other hand, if you are uncertain about the area of your customers, let them fill-out their exact addresses. Well, enable and disable them as you see fit.

Now click on the Save button.

Screenshot of making the checkout setting.

Delivery points:

If you enabled the store pickup option, you have to set the delivery points. To do this, you have to add point names and point details.

To add a delivery point, click on the ‘Delivery points’ > Add point> Fill-up a pop-up form-- providing points name and points number > click on the save button.

Delivery point name means the specific location inside your store from where customer will receive their products. And delivery point details means the exact position of the location. For example, for general store, point name could be counter and point details could be counter number. And for restaurant, delivery point name coud be table and delivery point details could be table number.


If you want to give discounts on some specific products, coupons are required.

To add coupons, click on the Coupons at the right panel of the dashboard> fill-out the form> click Save button.

How to fill-out the form:

First, in the store field, select your store name. Then in the products field, specify the products the coupon will be applicable on. In XeroChat's Ecommerce store, you can make three types of coupons, such as Percent, Fixed cart, and fixed products. Now you have to decide what kind of coupon you want to make by enabling one of the three radio buttons. But before proceed, you have understand the characteristics of the each type of coupon.

Let's explain them:

Percent– Percent coupon type is applicable for selected products only. For example, if the cart contains three (3) t-shirts @ $20 each = $60, a coupon for 10% off applies a discount of $6.

Fixed cart –A fixed total discount for the entire cart. For example, if the cart contains three (3) t-shirts @ $20 each = $60, a coupon for $10 off gives a discount of $10. This coupon type will be applicable for all the products you have added to cart whether you have selected the products or not.

Fixed product – A fixed total discount for selected products only. Customers receive a set amount of discount per item. For example, three (3) t-shirts @ $20 each with a coupon for $10 off applies a discount of $30.

Then you have to fill-out the following boxes:

Coupon amount- Then you have to provide the amount for the coupon. Depending on the discount type you choose, the coupon amount will be a Fixed value or percentage. Enter the amount without a currency unit or a percent sign, which will be added automatically based on the discount type you choose e.g., Enter ’10’ for £10 or 10%.

Coupon expiry date– Date the coupon should expire and can no longer be used.

Max usage limit- You have to specify the number of times the coupon could be used before reaching the expiration date.

Coupon deactivate- By disabling the status button, you deactivate the coupon anytime.

Free shipping – If you enable Free shipping, the shipping cost will be removed when the coupon is used.


On order page, you can see the full details of the orders given by clients. Besides, you can, using a thermal printer, print the invoice of the order to hand the printed copy to your delivery person and the client.

To see the details of orders and print the invoices, click on Orders in the ‘Action Menu’ Instantly, all the orders will be shown on the page. Move the bottom scroll bar to see the whole details of the orders.

Now you can change the status of the orders. Click on the ‘Status’ field beside the specific order and a drop-down menu with ‘Pending’, ‘Approved’, ‘Rejected’, ‘Shipped’, ‘Delivered’, and ‘Completed’ will appear. Now select one of them according to the real status of the order.

To print the invoice, click on the invoice button > click on the any of the three options-- Large A4, Thermal 88mm, Thermal 57mm to print the invoice.

After the invoice printed, give the copy to your delivery person so that they can pickup the products to delivery. Of course, you can give the printed copy of the orders to your clients.

Click on the ‘Choose date’ button to see the orders given at a specific date such as the last month. And click on the download button the list of orders in a CSV file.

Abandoned cart recovery reminder:

XeroChat Ecommerce store can send abandoned cart recovery reminders to the clients if they leave your virtual store after adding products to the cart. It is a very important feature because it can recover lost sales by bringing back the potential customers to your virtual store.

To set abandoned cart recovery reminder, click on the ‘Confirmation and Reminder’> fill out a form.

How to fill-out the form:

First, select either Messenger, Sms, or Email. Then you will see a list of three options. by the options, you can send three abandoned cart recovery reminder.

You can determine the time of sending abandoned cart recovery reminder. By default ‘Do not send’ option is selected. Click on it, and drop-down menu with hours list-- from one hour to 24 hours-- will appear. Select one option to set hours for sending the abandoned cart recovery reminder. If you want to send more than one abandoned cart recovery reminder, select other options, too and set the hours of reminder to send the reminders one after another. But if the clients return and finish the check out the left reminders won’t be sent. Instead, a confirmation will be sent to them.

You can, of course, edit the default text for the message content in content box. That is, you can send a coupon code via the message to give discount on the products added to the cart.

Confirmation message:

Likewise, you can make a setting for confirmation message.

Reminder Report:

Click on the ‘Reminder report’ to to see the details of the abandoned cart reminders that have been sent

Screenshot of Reminder Report

QR menu:

Now you need the QR code so that you can provide the code to your customers. By scanning the QR code, your customer will enter the virtual shop whether inside messenger or on browsers.

To get the QR codes, click on the QR menu and straightway, the ‘QR menu’ page will appear. Click on the download button, to download the QR codes.

Under the messenger QR code, you can write a welcome message for your clients. After writing the message, click on the ‘Save’ button. Then your QR code will hold the message you have written.

Visit store:

Click on the ‘Visit store’ option to see your virtual store, the interface of your store, the output of your virtual store.

Copy url:

To copy the different types of urls to your virtual store, first, click on the ‘Copy url’ option> then copy the url you need.

You need the url to integrate your virtual shop to your Facebook page messenger. If you integrate the virtual store to the messenger, the client can directly enter your shop without scanning the QR code generated by your store by sending a message.

Integrate your virtual store to Facebook page messenger:

To integrate your virtual store to Facebook page messenger, copy the store url and product urls and go to the messenger bot of the XeroChat.

Click on the Messenger bot > bot settings > action> add bot reply> fill out the bot reply settings form.

How to fill-out the form:

At first, you have to provide a bot name and keywords in comma-separated. Based on the keywords, the bot will reply. Next, you have to select the reply type. To integrate your shop with Messenger, you have to provide urls copied from ‘Copy url’ section of the store you created. Now select any of the reply types that come with button types that support urls.

Anyway, select ‘text with button’ reply type and any of the web url and webview buttons. Select the web view full and a box called web url will appear— past the url here. If you provide a store url, the entire shop will appear inside the Facebook messenger, whereas for the product url, the specific product will appear. Clicking ‘Add more button’ and ‘Add more reply’ button, you can add more buttons and replies.


Moreover, by the postback button, you can provide products in categories.

Now click on the Submit button to save the bot settings for your virtual shop. Now the Messenger bot is ready to handle your virtual shop inside the messenger. That is, your clients can enter your virtual store by sending messages.

Usage of the E-commerce store:

Your virtual store created by XeroChat’s ‘Ecommerce store’ can generate two types of QR code— one for messenger and one for browser. Well, just as a client scans the QR code, the digital chart of your products appears on the mobile screen. If they scan the QR code for messenger, they can access the digital chart of your products inside messenger. On the other hand, if they scan the QR code for browsers, they will access the digital chart on the browsers. The digital chart is more than a normal chart, for the digital chart is itself is the virtual store. On the digital chart, they can scroll through different products and can choose from them, select attribute of the product and add the product to the cart and can buy the product.

Then they have to let the your virtual store know from where they want to pickup the products-- whether from the store or not. If a client wants to pickup the products from the store, they have to select the store pickup option. Then they have to provide the delivery points such as the table number where they are sitting at.

On the other hand, if they want to receive products from the home or office, they have to provide the delivery address.

Anyway, they can also write a delivery note that will be sent along with the orders. In the delivery note, they can dictate how they want the delivery.

Then they have to make payments to finish the checkout. They can make payments via any of the online payment methods including PayPay and Stripe. Also, they can make payment via ‘Manual Payment’ or can choose ‘Cash on delivery.

Well, just as they finish making payments, a page will appear with a confirmation message at the top and order details on the middle, meaning they have finished purchasing successfully.

Using ecommerce store for clients are very easy and convenient. The clients can do shopping using the ecommerce store from their home or office. Also, they can do shopping in the store but without talking to any person in the shop.Therefore, they don't have to come to direct contact to any person. So they can feel safe form corona virus while shopping.

Related Topics :

How to setup Ecommerce Payment Settings in XeroChat

How to make QR Code Menu for Restaurant food order with XeroChat

How to Recover Lost Sale With XeroChat Abandoned Cart Reminder

18 Comments Login to comment

  • The buttons I mean when set to webview

  • Hi. The Buy buttons are not responding when in mobile messenger app for android. Have not tested in Safari IOS. but the URL works. However I would like to know if the buttons can be fixed in the messenger mobile app so that people do not have to leave Facebook when i set it to URL for both Desktop and mobile.

    I am loving the Software by the way. Long live your developers!

  • Is there a way to have attributes to have a different value. Example
    Each attribute has a different purchase amount. Practical application
    User select pizza as categor.
    User then selects cheese pizza
    Cheese pizzza has three value points
    Small- $8
    Medium- $10
    Large- $12

  • Hello you are planning to add the variable or dynamic attributes function.
    Example: "sweater" product, attributes (color) red, green, yellow

    Now I want each color to have a different value, if a user chooses green the system displays the value 5 usd but if he chooses red and this has a 20% discount the system would display a value of 4.50 for example.

    All e-commerce platforms have this feature and it would be wonderful if xerochat also added it, as this is a much-needed feature to be competitive as an e-commerce platform.

  • I need to insert products with a decimal price. Example 2.50 € how can I do?

    • xeroneitbd Admin

      8 months ago

      You will be able to do it from next update. We will give the update by this week hopefully.

  • Already have an Facebook Store Catalog over the Facebook Business Manager. Can this Shop integrated or Imported?

    • xeroneitbd Admin

      11 months ago

      No, You can't . It's for creating store external & then integrate with Messenger BOT.


  • HI team, please let us able to change the currency from $ to our local currency. Thank you

    • xeroneitbd Admin

      11 months ago

      Yes, You can change the currency of-course from payment settings.


  • hi,

    can we have dual pricing currency for each product?

  • Hi Team thanks for the great feature.

    May I ask :

    1) Can we modify the currency symbol from $ to our own currency? Else people will confused the product is selling in US dollor evertime

    2) Can we make shipping cost dynamic according to how many product are added to the cart?

    • xeroneitbd Admin

      11 months ago

      1. All currency is now available in payment settings . You can set your own currency .

      2. Currently not available.


  • How to remove decimal and change format of price?

    • xeroneitbd Admin

      11 months ago

      Currently there is no settings/option for change these. We will think about in future update.


    • katetan

      11 months ago

      This is quite important feature. Please kindly consider

This site requires cookies in order for us to provide proper service to you      Got it