User Guide on eCommerce Module

Created by Surya Boddu, Modified on Wed, 3 Apr, 2024 at 9:36 AM by Surya Boddu

Overview

Welcome to the user guide for our E-commerce module, designed to help you effectively manage your online store and streamline your business transactions. This guide offers step-by-step instructions on how to leverage the power of our E-commerce module to customize your website, control themes, headers, menus, footers, and content, as well as organize categories, items, and subscriptions. By following the steps outlined below, you can ensure a seamless and hassle-free experience while maximizing the functionality of our E-commerce module. To cater to a wide range of customers, it's essential to manage both your website and mobile app effectively. That's why this comprehensive guide provides an overview of how to manage your e-commerce website and mobile app using the Bitsila application.

https://drive.google.com/drive/u/0/folders/1U1I9DhTyGz8oGWKTE4hD4cVA1TWKNqa5 (Mobile apps)

https://drive.google.com/drive/u/0/folders/11qVbR9cc-v6WwVbHii2cxHZ1GU7wKDVZ (Website)

WEBSITE

Step-by-Step Guide to Managing e-Commerce Website

Step 1: Accessing the e-Commerce Module

Log in to the Bitsila application.
On the dashboard, navigate to the E-commerce module.
Choose the Website option to access the website management section.

Step 2: Managing Website Theme

a. Managing Themes:

To access the theme management section, click on the Theme option in the layout.
Next, click on the Edit button to make changes to the selected theme.

To choose a template design, click on the Template option and select a design from the dropdown menu.
Proceed to the "Template Layout" option and select either Fixed Width or Full Width from the dropdown to define the layout of the template.
Customize the theme colors by clicking on the Theme Colors option and selecting a color from the dropdown.
Similarly, choose a color palette by clicking on the Color Palette option and selecting a palette from the dropdown.
To select a specific font for your website, click on the Font Family option and choose a font style from the available options.
If you want to preview different font styles, click on the Preview Font Style option to see examples.
Finally, enter the desired font size in the designated field, keeping in mind that the recommended size is 12.

b. Master Controls:

To control the shape of the container, enter the desired value in pixels for Container Border Radius. You can define the values for each corner separately (top left, top bottom, top right, top right bottom) using the format: ex. 5, 5, 0, 0. If a single value is entered, it will be applied to all corner radii.
Similarly, define the Button Border Radius and Item Border Radius by entering the desired values in pixels, following the same format as above.

c. Passcode Protect:

Ensure that the Passcode Protect option is disabled if you want the webpage to be displayed. Verify that it is set to Disabled.

d. Updating and Previewing Changes:

Once you have made all the necessary changes and entered the required credentials, click on the Update button to save the modifications.
To preview and publish the updated changes, click on the Action button located in the right corner of the display screen. From the dropdown menu, select Preview and Publish.

If you have already set a theme for your website but wish to make changes or switch to a new theme, follow the same steps as mentioned above by clicking on the Edit button in the Themes tab. This will allow you to select a new theme and customize it accordingly.

Step 3: Customizing Website

Click on the Edit button to update the changes and customize your website.
In the Colors section, select the desired colors for various elements.

In the "Others" section:

Enter the desired value for Button Corner Radius to determine the button's corner curvature.
Click on Item Card and choose a design from the dropdown menu to customize the appearance of item cards.
Similarly, select a design for the cart and login sections from their respective dropdown menus.
Enable the Show Item Tags option to display tags associated with items.
Enable the Do Not Show Out of Stock Items on Home Page option to prevent out-of-stock items from appearing on the home page.
Click on Offer Tag and select a design from the dropdown menu to customize the appearance of offer tags.
Click on Update to save the changes made.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes.

Feel free to experiment with different customization options and make your website visually appealing and tailored to your brand's requirements.

Step 4: Managing Header

To manage the header section and make updates or edits, follow these steps:

Click on the Header section to access the header management options.

a. In the "Layout" section:

Click on Template and choose a template design from the dropdown menu.
Select the desired Service Type from options like Delivery, Curbside, or In-store.
Enable the Show Store Count option to display the total store count for customers to place orders.
Click on Change Header Background Color to modify the header's background color.
Similarly, click on Change Header Icon Color to change the color of the header icons.

b. In the "Payment Modes" section:

Enable the desired payment modes such as Payment Gateway, COD (Cash on Delivery), COP (Cash on Pickup), or Auto Accept COD or COP to reflect them in the header section.
Click on the Update button to save the changes made.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes.

By following these steps, you can efficiently manage and customize the header section of your online store, ensuring a seamless and visually appealing experience for your customers.

Step 5: Menu Builder

To create a new Menu Builder in the system, follow these steps:

Click on Create New to initiate the creation of a new Menu Builder.

In the Menu Builder form, provide the following details:

Enter a Name for the menu builder.
Choose the desired Text Color from the available options.
Select a Background Color for the menu builder.

Click on the View as dropdown menu and choose between displaying the category as an image or an icon.
Enable the Show filters option if you want to display filters for the category.
Enable the Show sorting options option to provide sorting options for the category.
Click on the Update button to save the changes.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes.

By following these steps, you can manage the Categories in the E-commerce module, edit category settings such as templates, view options, and enable filters and sorting options. Remember to preview and publish your changes to make them live on your online store.

Step 10: Managing Category Pages

To manage a category in the E-commerce module and make changes, follow these steps:

Click on the Category tab to access the category management section.
To edit or update any changes, click on the Edit button next to the category you wish to modify.

In the editing interface:

Select the desired view style by choosing Grid view or List view from the dropdown menu.
Enable the Show Filters option to display multiple filters on the left-hand side of the category page.
Enable the Show Sorting Options option to display multiple sorting options (numerical and alphabetical) on the right-hand side of the category page.
Enable the Show Banners option to display the category banner at the top of the category page.
Enable the Show Browse Category option to show the complete categories as a browse category.
Click on the Update button to save the changes.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes.

By following these steps, you can manage a category in the E-commerce module, edit category settings such as view style, filters, sorting options, banners, and browse categories. Remember to preview and publish your changes to make them live on your online store.

Step 11: Managing Item Pages

To manage the item page and make changes to it in the E-commerce module, follow these steps:

Click on the Item tab to access the item management section.
Find the item you want to edit and click on the Edit button associated with it.

In the editing interface:

Click on the Template option and select a desired template design from the dropdown menu.
Enable the Show Reviews option to display reviews on the item page.
Enable the Show Addons option to display addons related to the item.
Enable the Show Trending Items option to display trending items on the page.
Enable the Show Recently Viewed Items option to display recently viewed items.
Make any other necessary changes or updates.
Click on the Update button to save the changes.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes.

By following these steps, you can manage the item page in the E-commerce module, including editing the template design, enabling or disabling features like reviews, addons, trending items, and recently viewed items. Remember to preview and publish your changes to make them live on your online store.

the updated changes, click on the "Action" button and select "Preview and Publish."

Step 12: Versions

Click on the Versions tab to view and update subscription details.

Step 13: CMS Folders

To manage CMS folders in the E-commerce module, follow these steps:

Click on the CMS Folders tab to access the CMS folder management section.
Within the CMS Folders interface, you will see a list of existing folders.
To create a new CMS folder, click on the Create New button.

In the creation form, enter the necessary details for the new CMS folder:

Name: Provide a name for the folder.
Description: Add a description or summary of the folder's content.
Read Duration Mins: Specify the estimated reading duration in minutes.
Folder Type: Select the appropriate folder type from the dropdown options, such as Landing Page, Blog, or Other.
Status: Choose the status of the folder as Active or Inactive.
Upload Banner Images: Attach relevant banner images to the folder, if applicable.
After entering the required information, click on the Update button to create the CMS folder.
To search for a created CMS folder, use the search functionality by entering the folder name in the search field.
Additionally, you can apply filters by selecting the status and folder type from the respective filter dropdowns to narrow down the search results.
Once you have located the desired CMS folder, you can make any necessary edits or updates by clicking on the Edit button associated with that folder.

After making the desired changes, remember to click on the Update button to save the updated details.

To save and publish all the changes made, click on the Action button located in the right corner of the display screen and select Preview and Publish.

Following these steps will allow you to manage CMS folders efficiently in the E-commerce module, create new folders, update their details, search for specific folders, and ensure your content organization is accurate and up to date.

MOBILE APPS

To manage or set up the mobile app theme on the dashboard, follow these steps:

Step 1: Accessing the e-Commerce Module

Select the e-Commerce module from the dashboard.
Choose the Mobile Apps option.

Click on the hamburger icon to access the menu, which consists of various sections such as "Theme", "Customize", "Header", "Footer", "Home", "Categories", "Category", and "Item".

Step 2: Managing Website Theme

a. Managing Themes:

To access the theme management section, click on the Theme option in the layout.
Next, click on the Edit button to make changes to the selected theme.

To choose a template design, click on the Template option and select a design from the dropdown menu.
Proceed to the "Template Layout" option and select either Fixed Width or Full Width from the dropdown to define the layout of the template.
Customize the theme colors by clicking on the Theme Colors option and selecting a color from the dropdown.
Similarly, choose a color palette by clicking on the Color Palette option and selecting a palette from the dropdown.
To select a specific font for your website, click on the Font Family option and choose a font style from the available options.
If you want to preview different font styles, click on the Preview Font Style option to see examples.
Finally, enter the desired font size in the designated field, keeping in mind that the recommended size is 12.

b. Master Controls:

To control the shape of the container, enter the desired value in pixels for Container Border Radius. You can define the values for each corner separately (top left, top bottom, top right, top right bottom) using the format: ex. 5, 5, 0, 0. If a single value is entered, it will be applied to all corner radii.
Similarly, define the Button Border Radius and Item Border Radius by entering the desired values in pixels, following the same format as above.

c. Passcode Protect:

Ensure that the Passcode Protect option is disabled if you want the webpage to be displayed. Verify that it is set to Disabled.

d. Updating and Previewing Changes:

Once you have made all the necessary changes and entered the required credentials, click on the Update button to save the modifications.
To preview and publish the updated changes, click on the Action button located in the right corner of the display screen. From the dropdown menu, select Preview and Publish.

If you have already set a theme for your website but wish to make changes or switch to a new theme, follow the same steps as mentioned above by clicking on the Edit button in the Themes tab. This will allow you to select a new theme and customize it accordingly.

Step 3: Customizing Website

Click on the Edit button to update the changes and customize your website.
In the Colors section, select the desired colors for various elements.

In the "Others" section:

Enter the desired value for Button Corner Radius to determine the button's corner curvature.
Click on Item Card and choose a design from the dropdown menu to customize the appearance of item cards.
Similarly, select a design for the cart and login sections from their respective dropdown menus.
Enable the Show Item Tags option to display tags associated with items.
Enable the Do Not Show Out of Stock Items on Home Page option to prevent out-of-stock items from appearing on the home page.
Click on Offer Tag and select a design from the dropdown menu to customize the appearance of offer tags.
Click on Update to save the changes made.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes.

Feel free to experiment with different customization options and make your website visually appealing and tailored to your brand's requirements.

Step 4: Managing Header

To manage the header and make changes, follow these steps:

Click on the header to access the header management section.
Click on the Edit button to make any desired changes.

In the "Layout" section:

Click on the Template option and select a template design from the dropdown menu.
Click on the Service Type option and select the desired service type from the dropdown menu, such as curbside, delivery, or in-store.
Enable the Show Store Count option to display the store count from which customers can place orders.
Click on the Change Header Background Color option to modify the header's background color.
Click on the Change Header Icon Color option to modify the color of the header icons.

In the "Payment Modes" section:

Enable the desired payment modes, such as payment gateway, COD (Cash on Delivery), COP (Cash on Pickup), Auto accept COD, or Auto accept COP.
Click on the "Update" button to save the changes made to the header.

To preview and publish the updated changes, click on the "Action" button located in the right corner of the screen.

From the dropdown menu, select "Preview and Publish" to view the changes in the application.

By following these steps, you can manage and customize the header of your mobile app or dashboard, including layout settings, template design, service type, header background color, header icon color, and payment modes. Remember to save your changes and preview/publish them to apply them to the application.

Step 5: Managing Footer

To manage the footer, click on the Footer tab.
Click on the Edit tab to update or make any changes.

Select the template design from the dropdown menu under Template.
Select the footer menus from the dropdown menu under Footer Menus (e.g., Home, Search, Cart, Favorites, Profile).
Select the icon styles design from the dropdown menu under Icon Styles.
Click on the Update button to save the changes.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to see the changes in the application.

Step 6: Managing Home Page

To manage the Home Page in the E-commerce module and create a new Home Page, follow these steps:

Click on the Home tab to access the Home Page management options.
Click on Create to create a new Home Page.

In the Home form:

Enter the title name for the Home Page.
Choose the title color and background color for the title section.
Choose the description color and background color for the description section.
In the Section tab, select the section type from the dropdown menu.
Enter the link associated with the section.
Enter the Info Banner URL if applicable.
Select the section objects from the dropdown menu.
Select item categories from the dropdown menu.
Choose the section color and background color for the section.
Click on Style and select the desired style from the dropdown menu.
Select the layout size from the dropdown menu.
Select the alignment from the dropdown menu.
Select the applicable sales channel(s) from the dropdown menu (such as WEB, mobile, B2C Mobile, B2C Web, B2B Mobile, and B2B Web). Select All if it is applicable to all sales channels.
Select the status as Active or Inactive from the dropdown menu.
Enable Show Header if you want to display the header on the Home Page.
Click on Create to create the new Home Page.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes.

By following these steps, you can manage the Home Page in the E-commerce module and create a new Home Page with customized sections, styles, and settings.

Step 7: Managing Categories

To manage the categories in your mobile app or dashboard, follow these steps:

Click on the Categories tab to access the category management section.
Find the category you want to edit or update and click on the Edit button associated with it.

In the editing interface, click on the Template option and select a desired template design from the dropdown menu.
Click on the View As option and select whether you want to view the categories as images or icons from the dropdown menu.
Click on the Section Type option and select the desired section type, such as Info Banners, Offer Banners, or Offers, from the dropdown menu.
Enable the Show Filters option to display the filters on the category page.
Click on the Update button to save the changes made to the category.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes in the app.

By following these steps, you can manage and customize the categories in your mobile app or dashboard. You can edit the template design, choose between viewing categories as images or icons, select the section type, enable filters, and save the changes. Don't forget to preview and publish the changes to ensure they are reflected in the application.

Step 8: Managing Category Pages

To manage a category in the E-commerce module and make changes, follow these steps:

Click on the Category tab to access the category management section.
To edit or update any changes, click on the Edit button next to the category you wish to modify.

In the editing interface:

Select the desired view style by choosing Grid view or List view from the dropdown menu.
Enable the Show Filters option to display multiple filters on the left-hand side of the category page.
Enable the Show Sorting Options option to display multiple sorting options (numerical and alphabetical) on the right-hand side of the category page.
Enable the Show Banners option to display the category banner at the top of the category page.
Enable the Show Browse Category option to show the complete categories as a browse category.
Click on the Update button to save the changes.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes.

Step 9: Managing Item Pages

To manage the item page and make changes to it in the E-commerce module, follow these steps:

Click on the Item tab to access the item management section.

Find the item you want to edit and click on the Edit button associated with it.

In the editing interface:

Click on the Template option and select a desired template design from the dropdown menu.
Enable the Show Reviews option to display reviews on the item page.
Enable the Show Addons option to display addons related to the item.
Enable the Show Trending Items option to display trending items on the page.
Enable the Show Recently Viewed Items option to display recently viewed items.
Make any other necessary changes or updates.
Click on the Update button to save the changes.

In the top-right corner of the screen, click on the Action button.

From the dropdown menu, select Preview and Publish to save the updated changes.

the updated changes, click on the "Action" button and select "Preview and Publish."

Notes:

Make sure to save your changes before previewing and publishing them.
Take note of the recommended font size for optimal display.
Regularly check and update the status of your settings and pages.
Ensure the Passcode Protect option is disabled to ensure proper webpage display.

FAQs:

Q: What is the E-commerce module in your system?

A: The E-commerce module is a powerful tool that allows you to manage your online store, customize your website's appearance, and control various aspects such as themes, headers, menus, footers, and content. It also helps you organize categories, items, and subscriptions for a seamless business transaction experience.

Q: How can the E-commerce module benefit my online store?

A: The E-commerce module empowers you to create a personalized and professional online store. By customizing the appearance and layout of your website, you can enhance your brand's identity and provide a visually appealing experience for your customers. Additionally, the module helps you organize and manage your products, categories, and subscriptions efficiently, allowing for streamlined operations.

Q: Is any technical expertise required to use the E-commerce module?

A: No, the E-commerce module is designed to be user-friendly and accessible to individuals without extensive technical knowledge. The step-by-step instructions provided in this guide will guide you through the process of managing your online store effectively.

Q: Can I use the E-commerce module for both my website and mobile app?

A: Absolutely! The E-commerce module is designed to cater to both your website and mobile app. With the Bitsila application, you can manage your e-commerce business seamlessly across multiple platforms, ensuring a consistent and optimized experience for your customers.

Q: Can I customize the appearance of my website using the E-commerce module?

A: Yes, you have complete control over the look and feel of your website. The E-commerce module allows you to choose from different themes, customize headers, menus, footers, and content, enabling you to create a visually appealing and cohesive online store that aligns with your brand.

Q: Can I integrate third-party payment gateways with the E-commerce module?

A: Yes, the E-commerce module allows integration with popular third-party payment gateways, offering your customers a wide range of secure and convenient payment options. Integration with payment gateways simplifies the checkout process and enhances the overall shopping experience.

Q: Can I expand my online store's functionality beyond the E-commerce module?

A: Absolutely! Our system offers various modules and extensions that can complement the E-commerce module and expand the functionality of your online store. From marketing tools to customer relationship management, you can leverage additional modules to enhance your e-commerce business further.