Creating Store
After installing the module you will see Booking Pro feature added in your installed feature list in Editor -> Features section
1. Click on Booking Pro feature and add into app
2. You need to add your first store , click on + icon. Store may be your Hotel / Beach / Bus / Service provider In case of Appointment , it depends on your use case. Schedule/Payment gateways settings as based on store so you need to plan your app based on these settings.
3. Fill in all the details as shown below , related to store
- Store Information like address and name, operations hours etc to be displayed in store list page, address is also used to calculate delivery fee (if enabled)
- Store Information
- Store Information
- Store Information
- Store Information
- Store Information
- Store Information
- Just for display purpose Store Information
- Store Categories are optional when you have just one store , you can use it when you have multiple store and can be created Stores -> Category section only after creating your first store.
- Title is used to display more store related info in app side
- Description is used to display more store related info in app side
- Enable of you want to display this store on map view
- Add Schedule – Here you can enter operation hours for Appointment or classes booking, you can add multiple slots for same day to allow breaks , example , You want to add 8am-10am , 2pm-4pm for Monday , then add two entries for Monday one for 8am-10am and other for 2pm-4pm , this way you have have multiple breaks for any day you want.
- Store status Draft – Not published in App. , Published – Visible in app to all users
- If you want to capture date/time for order in checkout process enable this * This is optional for now and we have kept it for future use case/scenario
- if you want to capture pickup time of delivery in checkout process enable this and make it mandatory if you want user to force this info -* This is optional for now and we have kept it for future use case/scenario
- Icon – is used to upload store image and displayed in app while showing this store
- These are the payment methods available with Commerce Pro and can be enabled per store after.
- Age group – Based on customers age group you can charge additional fees, here you can add different additional fees for various age groups, Please make sure that you keep lower age group first for example add rate for children first and then for adults as per screenshot below
- Add your first tax slab here
Manage Products
- Go to Catalog -> products to see all the created products
- Clicking + icon will allow you to create new product
- Edit icon will lead you to edit product page
- Product Information you want to be displayed on product page , it will be Room Information in cases of hotel and Services Info in case of classes/appointment
- [Optional] Available stock is the current stock available for this product and it will be automatically reduced on new orders.
- [Optional] Minimum order quantity . Enter 2 if you want to force user to order minimum 2 quantity of this product.
- [Optional] Maximum order quantity . Enter 2 if you want to force user to order maximum 2 quantity of this product.
- [Optional] Choose store to which this product belongs, ignore if you have just one store
- [Optional] Upload one more pictures of the product
- In case of hotel setup, product is a room and you have to enter Capacity for adult and children. – Capacity must be enabled from Settings tab.
In case of Appointment , you will have to enter Service Time as duration in minutes and Buffer time is extra time you need after each service and seats per service will be 1 in case of appointment but can be more to allow multiple bookings for one slot ( classes is best example for this scenarios)
– Service Time must be enabled from Settings tab.
Manage Product Options & Choices
Product Options and Choices both allows you to create group of options to be selected by user before adding the product to cart.
Difference between Product Options and Choices is that Products Options comes with additional price which is added to cart and choices are just user choice selection and no additional fees are added to cart.
- click + icon to add new product option/choice
- If you select any option then enter price to be added to cart when selected by user.
- Sauces is group of choice option and when enabled it will show you options to be included in product
- User list choices doesn’t comes with price option , it will still allows user to select choice but wont add any additional fee in cart.
Create New Product Options / List Choice Options
- Give a name to Group like Sauces etc
- When you mark this option as required it will force user to select option before adding product to cart
- clicking + icon will allows you to add new option
- Change Option name or delete it as per your need
Manage Categories
Categories can be useful in Category List and Product List views.
Store Categories
Store Categories are useful when you have multiple stores which needs to be categorised. You can create store categories by visiting Catalog -> Store Category page. See picture below which allows creating store category with inputing title, description and icon image.
Note : You need to keep your List View option as Store List view from settings page to show store categories.
Product Categories
You can create multiple categories for products too and you can assign them to any products you need. You can create product categories by visiting Catalog -> My Category page. See picture below which allows creating product category with inputing title, subtitle and icon image.
You can assign category to product in Edit/Add product page.
Manage Accommodations
Accommodations are number of options available for same same room type/seat/table on beach.
In case of hotel, you might have twin or double room type which will be added as product in booking pro but you have 20 twin room type and 30 double room type, that’s where you have to create 20 accommodation for twin room/product.
While making booking user will have option to book 20 twin room type as you have 20 accommodation.
In the same way in case of beach booking you have to create number of accommodation for your table/umbrella type, and umbrella type will be product.
Note : Incase of Hotel Booking and Seat map booking creating accommodation is mandatory if you don’t create accommodation user won’t be able to find any room in the app but in case of Appointment kind of setup accommodation is ignored.
To Create Accommodation, first you should already have products created from Catalog -> products tab/page and then click on Booking Info -> Accommodations tab/page
This page , shows list of all the accommodations and
Clicking + Icon will allows you to add new Accommodation
It will just ask title and type of product for which you want to create accommodations and no of accommodations you have, if you enter 20, it will create 20 records with given title and product in sequence.
Seasonal Rates
There are always some day in the year or month where you want to increase your rate , seasonal rates allows you to charge additional amount for any product for any no of days.
We have created flexible settings so that you can charge for just one special day in the year or weekend/weekdays etc.
To create seasonal rates click on Booking-> Seasonal rates page and hit + icon to add new rate.
Note: Seasonal rate amount will be added to original price of the product.
if product price is 100 and seasonal rate is 20 then user will be charged 120.
Add new Seasonal rate screen
- You can give any title for your reference
- Start date and End date is the dates in between which seasonal rates will be applied.
- Product – for which you want to charge seasonal rate
- Days – For which day you want to charge , example – you can charge all the Mondays between start and end date.
- Rate – Amount you want to charge as additional fee, please note this amount will be added to original price of the product.
Manage Orders
Manage order for Booking Pro is similar to Commerce Pro but has additional info related to booking/schedule/checkin date etc, check bottom of this page.
Manage Order Screen
- Go to Orders tab to see all the orders
- You can search order by store, customer name etc
- Click on any order row to see order details
Order detail page
- Click on Cancel button if you want to cancel the order
- You can see complete order details and modify anything you need
- Change order status from here
- Order Items can be seen along with all prices tc
- Notes entered by customer is shown here
Booking Info
- This section show booking related info for specific page , we have another page for booking which shows booking in calendar view, see Calendar view for Booking
- Customer notes is note which is left by customer while placing order and Admin notes is information saved by admin for customer, it will be visible in order detail page at app side.
Booking Info in Calendar
Calendar View for All the BookingsGoto Booking Info -> booking tab/page and it will open calendar view of the bookings info.
1. You can see all the hotel/product name and clicking it will filter bookings of just that product on calendar.
2. If you have any booking for any day, you will see it’s name on that slot and clicking it will show more info about booking
3. All the bookings related information will be displayed in the popup after clicking it’s name in calendar.
4. We can change duration to see bookings for any other month/week etc
Seat Map Designer
In some scenarios you want to show the placement of the accommodation/umbrella/seat before user makes a booking. This feature allows us to achieve this in our app.
Seat Map designer allows you to create map of umbrella on beach or seats for bus or cinema and user can see designed map on app and click specific seats to book it.
Note:
1. You must have accommodations created to design seat map and use this flow
2. Accommodations are displayed on maps as seat/product which can be booked via app.
3. You can create seat for each store and different store will have different seat map.
To open Seat Map designer first click on stores page and then click on map edit icon as seen in screenshot below.
It will open seat map designer page where you do all the design and mapping of the accommodation.
Seat Map Designer
- You can set background image to show map view of the space, in above screenshots blocks and information you see is coming from background image, we will map our accommodation on this background image, this helps user to understand the location of the accommodation they are booking.
- Marker Image shows the of seat on the background image, in case of cinema marker image can be used as chair image.
- If marker image is not available we can show some shape to highlight the seat area. As you can see in background image red rectangle is shown at point 3
- Clicking anywhere on background image will show popup which allows you to place accommodation on that position. Once you add an accommodation it wont be available to add it again. So if you are cinema is having 30 seats then create 30 accommodations and place it all one by one on this background image.
Based on these settings and accommodations placement user will be able to select any accommodation/seat and make booking.
Seat Map Designer
In some scenarios you want to show the placement of the accommodation/umbrella/seat before user makes a booking. This feature allows us to achieve this in our app.
Seat Map designer allows you to create map of umbrella on beach or seats for bus or cinema and user can see designed map on app and click specific seats to book it.
Note:
1. You must have accommodations created to design seat map and use this flow
2. Accommodations are displayed on maps as seat/product which can be booked via app.
3. You can create seat for each store and different store will have different seat map.
To open Seat Map designer first click on stores page and then click on map edit icon as seen in screenshot below.
It will open seat map designer page where you do all the design and mapping of the accommodation.
Seat Map Designer
- You can set background image to show map view of the space, in above screenshots blocks and information you see is coming from background image, we will map our accommodation on this background image, this helps user to understand the location of the accommodation they are booking.
- Marker Image shows the of seat on the background image, in case of cinema marker image can be used as chair image.
- If marker image is not available we can show some shape to highlight the seat area. As you can see in background image red rectangle is shown at point 3
- Clicking anywhere on background image will show popup which allows you to place accommodation on that position. Once you add an accommodation it wont be available to add it again. So if you are cinema is having 30 seats then create 30 accommodations and place it all one by one on this background image.<br>Based on these settings and accommodations placement user will be able to select any accommodation/seat and make booking.
Settings
- Phone Number field can be enabled to be captured in checkout flow and you can mark it optional/mandatory for customer to place the order.
- VAT field can be enabled to be captured in checkout flow and you can mark it optional/mandatory for customer to place the order.
- New Store’s default status, this is important when you allow store signup from app via marketplace module. Draft – Hidden to customers in app , Published – Visible to all customers
- You can Enable/Disable shopping cart functionality , if disabled it wont show add to cart button in the app , good option if you want to use commerce pro for just catalog, ads, business listing purpose
- You can hide price from the app in case you are using this as business listing or something similar purposes.
- If enabled taxes are included in product price
- You can enable buyer/seller chat in your app , you need to have Social Network Module installed to make this functionality work.
- You can change first page of commerce pro feature, this is very important setting which changes complete UI and Flow for your customers, it has four options
Category List View – if selected first page of commerce pro will show all the categories first and then sub categories and then product can be seen/added to cart. can be used when you have single store with multiple categories.
Product List View – This options shows all the products first. can be used when you have many products and no categories.
Store List View – Search form will be displayed first and then Store information will be displayed , this is useful when you want to do hotel booking flow.
Map List View – This settings is important when you want to show all your stores on maps first and recommended for multi store setup only as you want to show nearest stores to user on map and then clicking on stores icon takes customer to stores product info page. Can be used for directory listing etc - If stock is enabled order can not be places if you don’t have products in stock and you need to input stock available in edit section of all the products.
- Birthday field can be enabled to be captured in checkout flow and you can mark it optional/mandatory for customer to place the order.
- Invoicing address related fields can be enabled to be captured in checkout flow and you can mark it optional/mandatory for customer to place the order.
- Delivery address related fields can be enabled to be captured in checkout flow and you can mark it optional/mandatory for customer to place the order.
- Payment Gateway mapping is important based on your store setup, Commerce Pro setup supports Single Store Setup , Multi Store Setup or Marketplace Mode, in different mode you want to transfer funds to different accounts, it allows 3 options.
Multi Vendor ,Single Gateway – In those mode you will have multiple stores but payment gateway will be used from one default store settings, you need to mention which is default store in point 14 option.In this mode order can be placed for products from single/multiple stores. for this mode it’s recommend to set List View as Store List View , see point 8 .
Multi Vendor , Direct Transfer to Store – in this mode you will have multiple stores and payment gateway settings will be used from each individual store, so amount collected will be transferred to store owners gateway/account. Default Store settings form point 14 will be ignored in this mode. In this mode order can be placed for single store product only. for this mode it’s recommend to set List View as Store List View , see point 8 .
Single Vendor , Multi Store – in this mode all stores are owned by one merchant , it’s for chain of restaurants etc, it also allows each store to use their own gateway but on store page in checkout allows user to choose stores from list, in above two modes we don’t allow user to switch/choose any store in checkout page. In this mode order can be placed for products from single/multiple stores. - Default store is settings decide which stores payment gateway settings will be used in Multi Vendor ,Single Gateway mode.
- You can change date format to be used in order email/list section etc.
- Various settings to change label to use commerce Pro for different purposes example changing Table service to Umbrella Service / Employee code etc, and instead of products you can call it ads, business etc this gives huge flexibility to use this module many use cases of directory listing ,food, commerce etc
- This setting allows you to add service fee to cart and you can give it any label and enter any amount to be charged and mark it applicable(Yes) to be added to cart on each orders automatically, it can be used for setup fee/delivery fee/any other fees you want to charge everyone.
- You can enable driver tracking using QuestTag service which is free for 1000/orders/month and nominal fee after that. You just have to signup and copy past api keys and once you change order status to Shipped it will automatically send order data to QuestTag app and you can assign driver and customer will get sms and will be able to see the realtime location of driver and order status.
- QuestTag provides free App for driver and customer does not need any app they will be able to see driver location from a link sent via sms. This makes your delivery system more transparent
- Order Success message is displayed after order is successfully places
- If sale price is enabled product add/edit page will have option to enter discounted price and will be visible on app side.
- Age Rates label shows custom text when additional charge for age group is added
- Enable map view will allow user make booking via map designed page example umbrella booking, seat map booking etc
- If room selection is enabled – it will allow user to choose room while searching room in hotel booking flow and disabling will hide it from app
see screenshot
- If Service Time is enabled, the setup will be used for appointment and Classes and checkout date won’t be asked as this will enable session booking for service. You will have additional option in product edit to enter session duration and capacity.
- If capacity is enabled , you will have option to enter adult and child capacity in product add/edit page, it’s used in hotel booking scenario keep it disabled for other use case.
- If Booked Items on is enabled – on map designer booking flow from app, it will display all the booked accommodation too, to hide booked accommodation from keep it disabled.
- Banner text and Image can be changed from here
- Some pages we show price /night , in case of appointment you would like to change it /session /class etc, use this settings to customise it
- You can add discount code here, which cane be used by customer in cart , please enter all the information asked in form while creating coupon code.
- You can enter printer email for each store to print receipt.
- You can enable search functionality from here
- Will allow customer to add tip
- You can allow customer to place order as Guest user without creating any account.
- You can manage tax slab rates from here and then select in product edit page
Hotel Booking
You should create one store for each hotel and products should be room type like Duplex, Single Room etc and for each room type , you have to create accommodations example create 30 accommodations if you more than 30 rooms.
There are few important settings to be enabled to use the app in hotel booking flow.
1. List view is recommended to have Store List
2. Service Time – must be disabled
3. Create Products as Room Type and for each room type create available accommodation.
4. Accommodations must be created otherwise app wont find any rooms available.
Appointment / Classes / Gym
You should create one store for each service provider/ Coaching Class/GYM and products should be Service or Topic of the class/session, You don’t need to create accommodations in this setup
There are few important settings to be enabled to use the app in appointment booking flow.
1. List view is recommended to have Store List
2. Service Time – must be enabled
3. In Store Edit Page – Add schedule for Each day
We allow adding multiple slots for same day, suppose you want to operate from 9-12 am and 9-12 pm on Monday , so you will add two schedules for same day with different time slots.
4. Product/Service add/edit page should have session duration and capacity information, capacity can be more than 1 to allow multiple booking for same slot, it’s useful in class booking etc
Seat Map Booking
You should create one store for each hotel and products should be room type like Duplex, Single Room etc and for each room type , you have to create accommodations example create 30 accommodations if you more than 30 rooms.
There are few important settings to be enabled to use the app in hotel booking flow.
1. List view is recommended to have Store List
2. Map view must be enabled
3. Service Time – can be enabled for session booking or disabled for day wise booking
4. Create Products as Room Type and for each room type create available accommodation.
5. Accommodations must be created otherwise app wont find any rooms available.
6. Accommodations should be mapped using map designer page