General settings
Site Title: Name of your website.
Website Description: Short description about your platform.
Website Address: Provide your store's domain/URL.
Support Email: Enter your email for customer support.
Support Contact: Phone number for customer inquiries.
WhatsApp Contact: WhatsApp number for support.
Primary Logo: Upload the logo in three versions:
Original Version
Light Version (for dark backgrounds)
Dark Version (for light backgrounds)
Favicon: Upload the small icon shown in browser tabs.
Logo Width: Specify width in pixels.
Logo Height: Specify height in pixels.
Google Play URL: Enter your app's Google Play Store link.
App Store URL: Enter your Apple App Store link.
Search Engine Visibility
Yes: Websites will be indexed by search engines.
No: Prevents search engines from indexing your website.
Actions
Submit: Save all settings. A toast notification ‘Updated General Settings’ will appear to confirm the update.
Cancel: Discard changes.
Email Settings
Configure SMTP settings for sending emails from the platform.
Sender / Admin Email: Email address from which system emails will be sent.
Sender Name: Name to appear as the sender in outgoing emails.
Email Type: Dropdown menu to select the email service provider type.
CC Email: Email address to receive a copy (CC) of all outgoing emails.
Email Host: SMTP host address for email delivery.
Email Port: SMTP port number for sending emails.
Secure: Dropdown to enable or disable secure connection for SMTP.
Options:
True: Enables SSL/TLS encryption
False: Sends email without encryption
Email User: Email address used as the SMTP authentication username.
Email Password: SMTP password for authentication. A masked field with an eye icon to toggle visibility.
Action
Save Changes: Apply the updated email configuration. A toast notification ‘SMTP settings updated and test email sent’ will appear to confirm the update.
Email Templates
Manage system-generated email templates for various events.
Per Page
It controls the number of low stock products records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the low stock products table.
The dropdown menu will show you options to display 10, 25, 50, or 100 low stock products per page.
Choose the number of low stock products you want to display per page.
The table will automatically refresh to show the selected number of low stock products per page.
Search
You can search low stock products by entering specific order details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the low stock products table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret email template data quickly and accurately. The columns are listed below:
S.No: Serial number of the email template within the current page view.
Title: Name of the email template, typically based on the triggered event.
Subject: Subject line used in the outgoing email.
Recipients: The email addresses receiving the message. It can include one or multiple recipients.
Status: Indicates whether the template is currently active.
Enable: The template is active and will be used when its corresponding event is triggered.
Disable: The template is inactive and will not be triggered until re-enabled.
Action: Edit icon opens the editor to customize the email content. The form sections and fields are mentioned below:
View Email Templates: Clicking this button will redirect you to the Email Templates list page, where you can view and manage all existing email templates configured in the system.
Basic Details
Title: Displays the name of the selected email template. This field is non-editable.
Subject: Enter the subject line of the email that the end user will see in their inbox.
Recipient: Specify the email address(es) that should receive this template. Leave blank if dynamically handled.
Content: This is the email body editor where you can write and format the message content using the rich text editor.
Short Tags: These dynamic placeholders are replaced with actual values when the email is sent.
Email Template Status: Controls whether this specific template is active.
Enable: The template will be triggered during the corresponding event.
Disable: No email will be sent for this event.
Update: Save your changes and apply. A toast notification ‘Email Template Updated Successfully’ will appear to confirm the update.
Cancel: Discards changes and returns you to the main Email Templates list.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Mobile App Settings
These options help you control the theme and visual alerts of your mobile app using colors.
App White Logo: Upload your logo with a white/light background. Used in dark mode screens.
App Dark Logo: Upload your logo with a dark background. Used in light mode screens.
Splash Screen: Upload an image that appears during the app loading screen.
Color Settings
Each of the following options lets you customize a different part of your app's UI:
Global Color: This is your default UI color. Used for general UI elements like background, borders, or text in global components.
Info Color: Used to highlight informational messages.
Base Color: This is the foundation color used for major components like buttons, icons, or links. Often used as a brand color.
Primary Color: Used to highlight main actions such as submit buttons, active tabs, links. It’s often the same as the base color.
Secondary Color: Used for supporting elements like secondary buttons or muted labels. Offers contrast to primary color.
Alert Color: Used for alert messages, warnings, or alerts.
Success Color: Used for success messages or indicators.
Warning Color: Used for warnings or cautions.
How to Use Each Option:
Click on the color box next to each label.
A color picker will appear (as shown in the last two screenshots).
Choose a color using:
The palette
The color slider
Predefined swatches at the bottom
The hex code will update automatically.
Click Submit to save your color settings. A toast notification ‘Mobile APP Settings Updated Successfully’ will appear to confirm the update.
Mobile Screen Settings
Manage the display and arrangement of content sections on your mobile app's homepage.
Per Page
It controls the number of low stock products records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the low stock products table.
The dropdown menu will show you options to display 10, 25, 50, or 100 low stock products per page.
Choose the number of low stock products you want to display per page.
The table will automatically refresh to show the selected number of low stock products per page.
Search
You can search low stock products by entering specific order details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the low stock products table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Add Section
Add a new section to your mobile app homepage. Click on the ‘Section’ (+ icon) in the top right. A popup titled Add a New Section will appear with the following fields:
Section Title: Enter the name of the section as it should appear on the app homepage.
Select Layout: Choose the content type this section will display. Based on the category selected the input fields will change. Available options typically include:
Product: Displays selected individual products in the section.
Brands: Displays products grouped by brand.
Tags: Displays products grouped or filtered by specific tags.
Categories: Displays products based on product categories.
Banner: Displays a visual banner section.
Layout Status: Controls whether the section is currently visible or hidden in the mobile app.
Show: Section will appear on the homepage.
Hide: Section will be hidden from view without deleting it.
Options that appear when product is selected in the ‘Select Category’ dropdown list:
Redirection Type
No Redirection (default): Section does not link anywhere.
App Screen: Redirects to a specific screen within the app when the section is clicked.
External Link: Redirects to a website or external URL.
Layout Status
Show (default): Section will be visible on the frontend.
Hide: Section will not appear to customers.
Layout Mode
Grid: Displays products in a tiled/grid format.
Slider: Displays products in a horizontal carousel/slider.
Include Products
Type: Select multiple products to display in the section.
Description: Click and select products to feature in the section.
Exclude Products
Type: Select products to exclude from this section.
NOTE: The options are the same for brands and categories. Tags and Banner have additional fields. They are mentioned below:
Tags
Tag Type
Basic: Used for general categorization and tagging of products/content.
Offer: Tags content related to special offers or promotional campaigns.
Deals: Specifically targets deal-based content which may or may not fall under offers.
Banner
Place Type: Selects location or category types
Limit: Controls the maximum number of promotional banners displayed.
Submit: Saves the changes. A toast notification ‘Mobile Screen Settings Page Added’ will appear to confirm the update.
Close: Discards and returns to the previous page.
Banners
This icon at the top right corner of the page will redirect to the ‘Home Banners’ section under ‘Appearance’ in this Settings module.
Below these controls you will find a table with various columns to interpret mobile screen settings data quickly and accurately. The columns are listed below:
S.No: Serial number of the section in the current view.
Section Title: Custom name given to each displayed section.
Layout: Determines how content is displayed. Options include:
Products
Tags
Categories
Banner
Status: Visibility control for each section:
Show
Hide
Action
Edit: All fields in ‘Add Section’ appear to edit and update.
Deletes the category. A dialog box ‘Remove Settings’ will appear with the text ‘Are you sure you want to delete this? along with ‘Close’ and ‘Delete’ options. Closing will remove the dialog box and clicking on ‘Delete’ will display this toast notification ‘Delete Mobile Home Screen Settings’ to confirm deletion.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Submit: Save the new section.
Cancel: Discard and return to the previous page. A toast notification ‘Mobile Screen Settings Page Added’ will appear to confirm the update.
Signup and Login settings:
This section is divided into three main configuration options:
Signup Method: Determines how new users can create an account on your Wcart store.
Email Verification: Users will need to provide their email address during registration. A verification link or code will then be sent to their email. They must verify their email before their account is fully activated and they can log in.
OTP (One-Time Password): Users will receive a One-Time Password (OTP) to their provided phone number or email (depending on system setup) during registration. They must enter this OTP to complete the signup process.
To change the Signup Method:
Select the radio button next to your preferred method: ‘Email Verification’ or ‘OTP’.
Click the ‘Save Changes’ button at the bottom of the page to apply your selection.
Login Method: Defines the methods users can use to log in to their existing accounts on your Wcart store.
Email & Password: Users will log in using their registered email address and the password they set during signup.
Email OTP: Users will log in by entering their email address, and an OTP will be sent to that email. They must then enter the OTP to gain access to their account.
Both: Users will have the option to log in using either their ‘Email & Password’ or by receiving an ‘Email OTP’.
To change the Login Method:
Select the radio button next to your preferred method: ‘Email & Password’, ‘Email OTP’, or ‘Both’.
Click the ‘Save Changes’ button at the bottom of the page to apply your selection.
Social Login Configuration: Allows to enable or disable the option for users to log in or sign up using their existing social media accounts.
Yes: Users will see options on the login/signup pages to use popular social media accounts for quick registration or login.
No: Social login options will not be displayed on the store's login/signup pages.
To configure Social Login:
Select the radio button next to your preferred option: ‘Yes’ or ‘No’.
Click the ‘Save Changes’ button at the bottom of the page to apply your selection.
Saving Changes: Click to ensure your new settings are applied. A toast notification ‘Social Logins Added Successfully’ will appear to confirm the update.
Payment Settings
Per Page
It controls the number of payment gateway records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the payment gateway table.
The dropdown menu will show you options to display 10, 25, 50, or 100 payment gateways per page.
Choose the number of payment gateways you want to display per page.
The table will automatically refresh to show the selected number of payment gateways per page.
Search
You can search payment gateways by entering specific payment gateway details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the payment gateway table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret payment data quickly and accurately. The columns are listed below:
S.No: Serial number of the listed payment gateways.
Payment Gateway: Displays the name of the payment gateway.
Status: Shows the current availability. It has two options:
Active: Gateway is enabled for use.
Inactive: Gateway is disabled and unavailable.
Live/Sandbox: Indicates active or test mode.
Action:
Edit: Configure the selected payment gateway. Clicking the edit icon redirects to the Edit Payment Settings page. The page contains the following fields:
Payment Gateway Name: Displays the name of the payment gateway This field is non-editable.
Live/Sandbox: A dropdown to switch between Live and Sandbox mode.
Live: The payment gateway is connected to real transactions.
Sandbox: The payment gateway is in test mode and does not process real transactions.
Test Key Id: Enter the public key for testing purposes.
Test Key Secret: Enter the secret key for testing purposes.
Live Key Id: Enter the public key for live transactions.
Live Key Secret: Enter the secret key for live transactions.
Payment Gateway Description:
Add a short description of the payment gateway for reference purposes.
Status: Indicates whether the payment gateway is Active or Inactive.
Active: The gateway is enabled for use.
Inactive: The gateway is disabled and unavailable for transactions.
Submit: Save any changes made to the payment gateway configuration. A toast notification ‘Payment Settings Updated’ will appear to confirm the update.
Cancel: Click to discard changes and return to the Payment Settings list.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Shipping Settings
Per Page
It controls the number of shipping gateway records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the shipping gateway table.
The dropdown menu will show you options to display 10, 25, 50, or 100 shipping gateways per page.
Choose the number of shipping gateways you want to display per page.
The table will automatically refresh to show the selected number of shipping gateways per page.
Search
You can search shipping gateways by entering specific shipping gateway details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the shipping gateway table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret shipping data quickly and accurately. The columns are listed below:
S.No: Serial number of the listed shipping gateways.
Shipping Gateway: Displays the name of the shipping gateway.
Status: Indicates availability of the shipping method.
Active: Shipping method is enabled and available for use.
Inactive: Shipping method is disabled and unavailable for use.
Action:
Edit: Opens the Edit Shipping Settings page to configure the selected shipping gateway. Configure the selected payment gateway. Clicking the edit icon redirects to the Edit Payment Settings page. The page contains the following fields:
Shipping Gateway Name: Displays the name of the shipping gateway.
Gateway Email: Enter the email ID associated with the shipping gateway.
Key ID: Enter the API key ID provided by the shipping service provider.
Key Secret: Enter the API secret key provided by the shipping service provider.
Shipping Gateway Description: Add a short description of the shipping gateway for reference purposes.
Status: Controls whether the shipping gateway is enabled or disabled.
Active: Enables the shipping gateway for order processing and makes it available for use on the storefront during checkout.
Inactive: Disables the shipping gateway, making it unavailable for customer orders.
Submit: Save any changes made to the shipping gateway configuration. A toast notification ‘Shipping Gateway Settings Updated’ will appear to confirm the update.
Cancel: Discard changes and return to the ‘Shipping Settings’ list.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Address Settings
The Address Settings page allows you to configure and update the store’s address details.
Person Name: Enter the name of the person responsible for the store.
Email ID: Enter the store’s official email address for communication purposes.
Phone: Enter the phone number along with the country code.
Address: Enter the physical address of the store.
Country: Displays the selected country. This field is non-editable.
Pincode: Enter the postal code of the store’s location.
State: Enter the name of the state where the store is located.
City: Enter the name of the city where the store is located.
Save Changes: Save all modifications made to the address details. A toast notification ‘Shipping Address Settings Updated’ will appear to confirm the update.
MANAGE COUPON
Trashed Coupons
Click this icon on the top right corner of the page to view, restore, or permanently delete coupons.
Coupon
Navigate to the top right corner to click this icon ‘+ Coupon’ to add new coupons.
Coupon Code: Enter a unique coupon code.
Coupon Type: Select from the available discount type.
Allow Free Shipping: Checkbox to allow free shipping with this coupon.
Allow Tax: Checkbox to allow tax to be included when using the coupon.
Coupon Value: Enter the numeric value of the discount.
Description: Optional rich-text field for internal notes or summary of the coupon.
From: Select the starting date from which the coupon will be valid.
To: End/expiry date of the coupon.
Minimum Spend: Minimum order amount required to use the coupon.
Maximum Spend: Maximum order amount allowed to use the coupon.
Include Products: Select specific products this coupon applies to.
Exclude Products: Select products to exclude from the coupon.
Include Product Categories: Restrict coupon to specific product categories.
Exclude Product Categories: Prevent coupons from applying to certain categories.
Include Users: Select specific users allowed to use the coupon.
Exclude Users: Select specific users not allowed to use the coupon.
Product Limit: Max number of products this coupon can be applied to in one order.
Per Coupon: Total times this coupon can be used across all users.
Per User: Limit how many times a user can use this coupon.
Status: Set the coupon status.
Draft: Coupon is saved but not active or visible to customers.
Publish: Coupon is active and can be used by customers.
Submit: Click to save the coupon details. A toast message ‘Coupon Added Successfully’ will confirm the action.
Cancel: Click to close the form and return to the list view without saving.
Per Page
It controls the number of coupon records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the coupon table.
The dropdown menu will show you options to display 10, 25, 50, or 100 coupons per page.
Choose the number of coupons you want to display per page.
The table will automatically refresh to show the selected number of coupons per page.
Search
You can search coupons by entering specific coupon details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the coupon table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret coupon data quickly and accurately. The columns are listed below:
S.No: Serial number of the entry.
Coupon Code: Unique identifier for the coupon.
Coupon Type: Type of discount.
Coupon Value: Numerical discount percentage.
From Date: Start date of the coupon validity.
Expiry Date: End date of the coupon validity.
Status: Displays the coupon’s current usability setting.
Coupon is live and usable by customers.
Coupon is inactive and cannot be used.
Action: Contains icons for performing quick actions:
Edit: The same fields in ‘Add Coupon’ are available to edit and update.
Delete: Deletes the category. A dialog box will appear with the text ‘Are you sure you wish to trash this Coupon?’ along with ‘Ok’ and ‘Cancel’ options. Canceling will remove the dialog box and clicking on ‘Ok’ will display this toast notification ’Coupon Deleted Successfully ’ to confirm deletion.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Tax Settings
Store Settings
General Settings
Defines the basic tax behavior and rules applied across the store.
Enable tax for the store: Enables the entire tax functionality.
Shipping is taxable: Determines whether tax should be applied to the shipping charges.
Exclude Tax in Product Price: When enabled, tax is calculated in addition to the product price.
Enable VAT: Turns on Value Added Tax support.
Save Changes: Save the changes. A toast notification ‘General Setting Updated Successfully’ will appear to confirm the update.
Tax Rate
+ Export
Click the Export icon located at the top-right corner of the Tax Rate tab to initiate the download process for all existing tax rate records. A modal dialog box ‘Select file format to Export’ will appear with the these two options:
CSV
Excel
Export: Choose either one to directly download the data to your system.
Cancel: Click to return to the tax rate list view.
Import
Tax rate
Tax-Settings
Navigate to the top right corner of the page and click this button to return to the General Settings tab.
Country: Pre-filled as India. Select the country where the tax applies.
Pincode: Enter the area-specific postal code.
State: Dropdown list to select a state.
City: Dropdown list to select the target city.
Percentage Rate: Enter the applicable tax rate as a percentage. Only numeric values are accepted.
Tax Name: Give the tax a name for identification purposes.
Cancel: Redirects to the General Settings tab.
Submit: A toast notification ‘Tax Rate Added Successfully’ will appear to confirm the addition.
Per Page
It controls the number of tax records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the tax table.
The dropdown menu will show you options to display 10, 25, 50, or 100 tax fields per page.
Choose the number of tax fields you want to display per page.
The table will automatically refresh to show the selected number of tax fields per page.
Search
You can search tax fields by entering specific tax details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the tax table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret tax rate data quickly and accurately. The columns are listed below:
Country Code: Code of the country where the tax is applicable.
State Code: Code of the applicable state or region.
Postal Code: Area PIN or ZIP where tax is enforced.
City Code: Specific city where the tax rule applies.
Rate of %: The tax rate as a percentage value.
Tax Name: Custom name for the tax.
Action: Icons for managing each tax rate:
Edit : The same fields in ‘Add Tax’ are available to edit and update.
Delete: Deletes the tax entry. A toast notification ‘Deleted Tax Rate’ will appear to confirm deletion. Modal dialog box is not coming
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
VAT
VAT rate
Vat Applicable Country: This field is pre-filled (e.g., India). It represents the country to which the VAT rate applies.
VAT Percentage: Enter the VAT rate as a percentage. This field only accepts numeric values.
Tax Name: Provide a custom name to identify the VAT rule. This helps in organizing and recognizing VAT entries easily.
Submit: Saves the changes. A toast notification ‘Tax Rate Added Successfully’ will appear to confirm the addition.
Tax-Settings
Navigate to the top right corner of the page and click this button to return to the General Settings tab.
Vat Applicable Country: Country code where VAT is applied.
VAT Percentage: VAT rate expressed in percentage.
Tax Name: Label used to identify the VAT rule.
Action:
Edit: Opens the same form used for adding VAT, allowing you to modify the selected entry.
Delete: Removes the VAT entry. A toast notification ‘Deleted VAT Tax’ will appear to confirm deletion. Modal form not appearing
Return Settings
Enable Refund: Enables or disables the refund feature.
Options: Yes / No
Include Tax: Decides whether the tax amount should be included in the refund.
Options: Yes / No
Partial Refund: Allows refunding part of the order amount instead of the full value.
Options: Yes / No
Minimum amount for refund: Enables the store to set a minimum value below which refunds cannot be initiated.
Options: Yes / No
Maximum number of days: Defines the maximum number of days from the purchase date within which the refund can be requested.
Include categories: Enter product categories to include in the refund policy.
Exclude categories: Enter product categories to exclude from refund eligibility.
Refund Description: Enables a text field where customers can describe the reason for the refund.
Options: Yes / No
Enable Reason: Allows users to select a reason for refund from predefined values.
Options: Yes / No
Enter Reasons: Tags representing pre-filled refund reasons that customers can choose from.
Enable Attachment: Allows customers to attach files to support their refund request.
Options: Yes / No
Attachment Limit: Sets the maximum number of attachments a user can upload.
Refund Policy Description: A rich-text editor to add a detailed description of your store’s refund policy. This will be visible to customers.
Submit: Saves the refund settings. A toast notification such as ‘Refund Settings Updated’ will appear to confirm the update.
Exchange Settings
Enable Exchange: Enables or disables the exchange feature.
Options: Yes / No
Include Tax: Decides whether the tax amount should be included in the exchange calculation.
Options: Yes / No
Partial Exchange: Allows exchanging part of the order instead of the entire order.
Options: Yes / No
Minimum Amount for Exchange: Enables the store to set a minimum value below which exchanges cannot be initiated.
Options: Yes / No
Maximum Number of Days: Defines the maximum number of days from the purchase date within which the exchange can be requested.
Include Categories: Enter product categories to include in the exchange policy.
Exclude Categories: Enter product categories to exclude from exchange eligibility.
Enable Stock Management: Enables inventory management for exchanged items.
Options: Yes / No
Enable Shipment Cost: Enables applying shipment costs for exchanges.
Options: Yes / No
Accept Exchange Reasons Exclude: Allows specifying reasons that should be excluded from acceptable exchange reasons.
Options: Yes / No
Exchange Description: Enables a text field where customers can describe the reason for the exchange.
Options: Yes / No
Enable Reason: Allows users to select a reason for exchange from predefined values.
Options: Yes / No
Enter Reasons: Tags representing pre-filled exchange reasons that customers can choose from.
Enable Attachment: Allows customers to attach files to support their exchange request.
Options: Yes / No
Attachment Limit: Sets the maximum number of attachments a user can upload.
Exchange Policy Description: Text editor to add a detailed description of your store’s exchange policy. This will be visible to customers.
Submit: Saves the exchange settings. A toast notification such as ‘Exchange Settings Updated’ will appear to confirm the update.
Cancel Order Settings
Enable Cancel: Enables or disables the order cancellation feature.
Options: Yes / No
Include Tax: Decides whether the tax amount should be included in the cancellation refund.
Options: Yes / No
Partial Cancel: Allows cancelling part of the order instead of the entire order.
Options: Yes / No
Minimum Amount for Cancel: Enables the store to set a minimum value below which cancellations cannot be initiated.
Options: Yes / No
Maximum Number of Days: Defines the maximum number of days from the purchase date within which the cancellation can be requested.
Include categories: Enter product categories to include in the cancellation policy.
Exclude categories: Enter product categories to exclude from cancellation eligibility.
Cancel Description: Enables a text field where customers can describe the reason for the cancellation.
Options: Yes / No
Before Pickup: Allows cancellation only before the item is picked up for delivery.
Options: Yes / No
Enable Reason: Allows users to select a reason for cancellation from predefined values.
Options: Yes / No
Enter Reasons: Tags representing pre-filled cancellation reasons that customers can choose from.
Cancel Policy Description: A rich-text editor to add a detailed description of your store’s cancellation policy. This will be visible to customers.
Submit: Saves the cancel order settings. A toast notification such as ‘Cancel Settings Updated’ will appear to confirm the update.
LOCALIZATION
The top navigation bar allows you to switch between managing Countries, States, Cities, and Pincodes under the Localization section. All four are explained below:
Upload
Click the Upload icon at the top-right corner to open the import functionality for bulk-adding countries via a CSV file.
+ Country
Click the + Country icon to open the ‘Add Country’ form.
Bulk Upload
Clicking Bulk Upload opens the ‘Import Countries From CSV File’ page, where you can upload a CSV to add multiple countries at once.
All-countries
Clicking All Countries redirects to the country list view, where all added countries are displayed in a table with options to edit or delete each entry.
Country Name: Enter the full name of the country.
Country Code: Enter the 2-letter ISO standard country code.
Country Phone Code: Provide the international dialing code for the country.
Country Shipping Status: Determines whether shipping is enabled for the selected country. There are two options, namely:
Active: Shipping is allowed to this country.
Inactive: Shipping is restricted or unavailable.
Submit: Saves the newly entered country. A confirmation toast message such as ‘Country Added Successfully’ will appear upon successful submission.
Per Page
It controls the number of country records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the country table.
The dropdown menu will show you options to display 10, 25, 50, or 100 countries per page.
Choose the number of countries you want to display per page.
The table will automatically refresh to show the selected number of countries per page.
Search
You can search countries by entering specific country details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the country table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to country data quickly and accurately. The columns are listed below:
S.No: Serial number indicating the order of entries in the list.
Country Name: Displays the name of the country added to the system.
Country Code: The standardized short code representing the country.
Phone Code: The international dialing code assigned to the country.
Status: Indicates whether the country is currently active or inactive for operations.
Action: Icons for managing each country entry:
Edit : The same fields in ‘Add Country’ are available to edit and update.
Delete: Deletes the country entry. A toast notification ‘Deleted Country’ will appear to confirm deletion. Modal dialog box is not coming
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
States
NOTE: It contains the same form sections and fields in the ‘Countries’ navigation tab. Except that the information is state oriented.
Cities
NOTE: It contains the same form sections and fields in the ‘Countries’ navigation tab. Except that the information is city oriented.
Pincode
Upload
Click the Upload icon to bulk upload pincodes.
+ Pincode
Click the + Pincode icon to add a single new pincode entry manually.
Bulk Upload
Clicking Upload opens the ‘Import Pincodes from CSV File’ page, allowing you to upload a CSV file to add multiple pincodes in bulk.
Pincode
Clicking Pincode redirects to the list view, where all added pincodes are displayed in a paginated table with options to edit or delete each entry.
Pincode: Enter the exact postal code that identifies a specific delivery area.
Pincode Status: Determines whether the store provides delivery services to this pincode. There are two options:
Active: Orders can be placed for this pincode, and delivery services are available.
Inactive: This pincode is currently non-serviceable; orders cannot be placed using this code.
Country: Choose the country to which this pincode belongs from the dropdown list.
State: Select the appropriate state from the dropdown list that falls under the selected country.
City: Choose the city corresponding to the pincode.
Delivery Days: Specify the expected number of delivery days for this pincode.
Pincode COD Status: Determines whether Cash on Delivery (COD) is supported for the given pincode. There are two options:
Active: COD is available for customers in this pincode.
Inactive: COD is disabled, and only prepaid methods can be used at checkout.
Submit: Clicking Submit saves the newly added pincode configuration. A confirmation toast message such as ‘Pincode Added Successfully’ will appear upon successful entry.
Per Page
It controls the number of pincode records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the pincode table.
The dropdown menu will show you options to display 10, 25, 50, or 100 pincodes per page.
Choose the number of pincodes you want to display per page.
The table will automatically refresh to show the selected number of pincodes per page.
Search
You can search pincodes by entering specific pincode details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the pincode table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret pincode data quickly and accurately. The columns are listed below:
S.No: Serial number of the record.
Pincode: Displays the actual postal code.
Status: Determines whether the store provides service to the specified pincode. There are two options, namely:
Active: Pincode is currently serviceable.
Inactive: Pincode is not serviceable.
Action: Icons for managing each pin code entry:
Edit : The same fields in ‘Add Pincode’ are available to edit and update.
Delete: Deletes the country entry. A toast notification ‘Deleted Pincode’ will appear to confirm deletion. Modal dialog box is not coming
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Downloadable Product Settings
Order Item Status to Enable Downloads: Select the order status at which customers are allowed to download their purchased digital products. Options include:
Pending: Allows customers to download the product as soon as the order is placed, even before payment or invoice generation.
Invoiced: Enables downloads only after the invoice is generated, ensuring payment has been processed.
Downloadable Business Type: Choose the relevant business type from the dropdown for categorizing downloadable products.
Add Business Type: Click to create a new category if the existing list doesn’t match your needs.
Business Type: Enter the name of the business type that categorizes downloadable products.
Status: Defines the current operational status of the business type. Options include:
Enable: The business type is active and available for selection in the dropdown.
Disable: The business type is inactive and will not appear in the downloadable settings.
Save: Saves the changes. A confirmation toast notification ‘Downloadable Product Business Type Added Successfully’ will appear to confirm the update.
Business Type List Table: Displays all added business types with the following columns:
S.No: Serial number indicating the order of the business type entries listed.
Business Type: Displays the name of the business type added to the system.
Status: Determines whether the store provides service to the specified pincode.Options include:
Enable: Business type will be available for selection when configuring downloadable product settings.
Disable: Business type will not appear in the selection list.
Action: Icons for managing each business type entry:
Edit: A dialog box titled ‘Edit Business Type’ will appear with the options to update ‘Business Type’ and ‘Status’ along with ‘Close’ and ‘Save’ options. Closing will remove the dialog box and clicking on ‘Save’ will display this toast notification 'Download Business Type Update Successful’ to confirm the update.
Delete: A dialog box titled ‘Remove Business Type’ will appear with the text ‘Are you sure you want to delete this Business Type?’ along with ‘Close’ and ‘Delete’ options. Closing will remove the dialog box and clicking on ‘Delete’ will display this toast notification ‘Deleted Store Location’ to confirm deletion.
Default Sample Title: Enter the title that should appear for downloadable sample files.
Default Link Title: Enter the text that appears as the download link title for the actual downloadable product.
Open Links in New Window: Determine whether download links should open in a new browser tab or in the same tab. Options include:
Yes: Clicking the link opens the download in a new tab, keeping the current page intact.
No: Downloads happen in the same tab, replacing the current page view.
Submit: Click Submit to save all the settings. A toast notification ‘Downloadable Product Settings Updated Successfully’ will appear to confirm the update.
Add Field in Downloadable Product
Add Field
Clicking the ‘+’ icon on the right will open a form to create a new downloadable business type field.
Business Type: Enter or select the associated downloadable business type for which the custom field is being created.
Field Type: Choose the type of input element the field should support. The options are mentioned below:
Text: Single-line text input.
Number: Only numbers can be entered.
Tel: Phone number input.
URL: Accepts website links.
Date: Allows date selection via calendar.
Email: Accepts valid email addresses.
Select: Dropdown with options.
Checkbox: For yes/no or multi-select choices.
Radio: For selecting one option from a group.
File: Lets users upload a file.
Field Name: Enter the internal name or identifier for the field.
Field Label: Specify the display name that will appear next to the input field in the form.
Placement Order: Define the order in which this field will appear in the form. Lower numbers appear first.
Field Required: Indicates whether this field must be filled in by the user:
Yes: Field is mandatory.
No: Field is optional.
Field Status: Controls the visibility of the field in the form:
Show: Field will appear in the form and can be interacted with.
Hidden: Field will be excluded from the form view.
Submit: Saves the changes. A confirmation toast notification ‘Field Created Successfully’ will appear to confirm the update.
Per Page
It controls the number of downloadable business type field records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the downloadable business type field table.
The dropdown menu will show you options to display 10, 25, 50, or 100 downloadable business type fields per page.
Choose the number of downloadable business type fields you want to display per page.
The table will automatically refresh to show the selected number of downloadable business type fields per page.
Search
You can search downloadable business type fields by entering specific details to quickly locate the information. To adjust this setting, follow the steps mentioned below:
To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the downloadable business type field table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret field downloadable business type data quickly and accurately. The columns are listed below:
S.No: Serial number of the field entry.
Field Name: Name or label of the field.
Field Type: Type of input element used.
Field Status: Defines whether the specific field should be visible and functional within the form where users input values.
Active: Field will be visible in the form and available for input.
Inactive: Field will not appear in the form.
Field Required: Specifies if the field is mandatory.
Status: Determines whether the entire field configuration is active in the system
Active: Field is enabled and considered by the system for product creation or editing.
Inactive: Field remains inactive across the platform, regardless of whether ‘Field Status’ is enabled.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Inventory Settings
Manage Stock
Enable Stock Management (Checkbox): If checked, the system tracks product stock quantities automatically.
Stock Display Format: Placeholder format to show remaining stock on the storefront.
Low Stock Notification
Enable Low Stock Notification (Checkbox):
When enabled: Notification Recipient textbox becomes visible.
When disabled: Notification Recipient textbox is hidden.
Notification Recipient (Textbox): Enter the email address(es) to receive alerts when stock drops below the defined limit.
Out of Stock Notification
Enable out of Stock Notification (Checkbox):
When enabled: Notification Recipient textbox becomes visible.
When disabled: Notification Recipient textbox is hidden.
Notification Recipient (Textbox): Enter the email address(es) to receive alerts when a product goes out of stock.
Low Stock Limit: A numeric field. Products with stock less than or equal to this number will trigger low stock notifications.
Out of Stock Visibility
Hide out of stock items from the catalog (Checkbox): If checked, out-of-stock products won’t appear to customers on the storefront.
Include Downloadable Product: Checkbox to decide whether stock settings also apply to downloadable products. If checked, downloadable products are included in stock tracking.
Save Changes: Saves the changes. A confirmation toast notification ‘Inventory Management Settings Updated’ will appear to confirm the update.
APPEARANCE
Themes
Each box represents a different theme layout.
Each card includes:
Theme Name: Title given to a specific website design layout.
Preview Image: Visual snapshot that shows the theme's appearance when applied to the storefront.
Choose Theme: Allows the selected theme to be applied to the storefront. A toast notification ‘Theme Selected Successfully’ will appear to confirm the selection.
Active: Appears only on the currently applied theme.
Catalog Settings
Catalog Setting
At the top of this section, you will find quick navigation tabs for streamlined access to the filter configuration pages:
Filters: Manage and configure all filter types used across product listings.
Product Box: Customize product box layout settings.
Shop & Category Page: Manage filters related to category pages.
Product Page: Define filters visible on individual product pages.
Cart Page: Manage filter relevance for the cart experience.
Checkout Page: Configure final filter settings relevant to checkout flow.
Add New Filter Type
Click + Filter Type open the ‘New Filter Type’ dialog box, to manually add a new filter to the catalog settings. This form allows input of key attributes required for configuring a product filter.
Filter Title: The name displayed on the storefront for this filter.
Filter Slug: URL-friendly, lowercase identifier without spaces, used for internal reference.
Filter Type Name: Internal name used by the system to identify and differentiate the filter. The available options are:
Filter Type: Dropdown list to choose the layout or format in which this filter will be rendered.
Sort: Reorders the entire product list based on a selected criterion, without removing any items from the list.
Filter: Narrows down the list of products by showing only those that meet specific conditions or attributes.
Input Type: Defines the method users will use to interact with the filter. The available input types are:
Checkbox: Allows users to select multiple values at once.
Radio: Allows users to select only one option from the list.
Select: Displays a dropdown menu of options from which users can select one.
Text: Displays a text input field where users can manually enter a value.
Status: Controls whether this filter is available in the system.
Active: Filter will be visible and functional on the storefront.
In-Active: Filter will remain hidden and non-functional.
Submit: Saves the changes. A confirmation toast notification ‘Filter Data Added Successfully’ will appear to confirm the update.
Close: Return to the ‘Filter Type’ list view section.
Per Page
It controls the number of filter type records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the filter type table.
The dropdown menu will show you options to display 10, 25, 50, or 100 filter types per page.
Choose the number of filter types you want to display per page.
The table will automatically refresh to show the selected number of filter types per page.
Search
You can search filter types by entering specific filter type details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the filter type table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret catalog filter data quickly and accurately. The columns are listed below:
S.No: Serial number of the filter entry in the current view.
Title: Display name of the filter shown to customers.
Slug: URL-friendly identifier used internally for the filter.
Type: Defines the functional classification of the filter.
Status: Indicates whether the filter is active and applied on the storefront.
Active: Filter is visible and usable by customers for refining product listings.
In-Active: Filter is hidden and not available on the storefront.
Action: Icons for managing each filter type entry in the catalog:
Settings:
Manage Filter Type
This section enables the admin to create, customize, and manage product sorting or filter options that are displayed on the front-end product listing pages.
Add Options
Click to open the ‘Add New Filter Options’ dialog box. Use this form to manually add a new filter option under an existing filter type in the catalog settings.
Option Label: The name displayed to customers on the storefront for this filter option.
Option Value: A URL-friendly, lowercase identifier (without spaces) used internally by the system to identify the option.
Option Status: Specifies the visibility status of the filter option:
Active: The option will be available on the storefront.
In Active: The option is hidden from customers but remains stored in the system for future use or testing.
Submit: Saves the changes. A confirmation toast notification ‘Filter Options Added Successfully’ will appear to confirm the update.
Close: Return to the ‘Filter Type’ list view section.
Warehouse
Clicking on this will redirect the page to the Warehouse List View.
Per Page
It controls the number of filter type records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the filter type table.
The dropdown menu will show you options to display 10, 25, 50, or 100 filter types per page.
Choose the number of filter types you want to display per page.
The table will automatically refresh to show the selected number of filter types per page.
Search
You can search orders by entering specific order details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the order table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls is a table that helps you review all option values for the selected filter type. The table columns include:
S.No: Serial number of the filter option in the current view.
Option Label: The label shown to customers as a selectable filter.
Option Value: The corresponding backend value used for filtering logic.
Status: Indicates whether the individual filter option is active and applied on the storefront.
Active: Option is visible and usable by customers to sort or filter product listings based on the corresponding value.
In-Active: Option is hidden and not available for customer interaction on the storefront.
Action: Icons for managing each filter option entry:
Edit: The same fields in ‘Add Options’ are available to edit and update.
Delete: A dialog box titled ‘Remove Business Type’ will appear with the text ‘Are you sure you want to delete this Business Type?’ along with ‘Close’ and ‘Delete’ options. Closing will remove the dialog box and clicking on ‘Delete’ will display this toast notification ‘Deleted Store Location’ to confirm deletion.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Edit : The same fields in ‘+ Filter Type’ are available to edit and update.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Product Box
Each box represents a different product card layout used to display individual products on the storefront.
Each card includes:
Product Box Name: Title assigned to a specific product display style.
Preview Image: Visual snapshot showing the product in that layout on the storefront.
Choose: Applies the selected product box layout to the storefront. A toast notification ‘Product Box Selected Successfully’ confirms the action.
Active: Label shown only on the currently active product box layout.
Shop & category Page
There are two panels on the page:
Left Panel is the Admin Settings Panel, used to configure layout, title alignment, and header content.
Right Panel is the Shop Frontend View, displaying the customer-facing version of the shop.
Left panel
Layout: Determines where the category filter will appear on the page.
Left Sidebar: The category filter appears on the left side of the page.
Right Sidebar: The category filter is placed on the right side of the page.
Pop up Sidebar: The filter appears as a slide-in panel or modal popup when triggered.
No Sidebar: Completely removes the category filter from the page.
Product List Style: Defines the layout in which products are presented on the shop page.
Grid View: Displays products in a multi-column layout.
List View: Displays products in a single-column list with more details.
Equal Image Height (Checkbox): Ensures all product images are the same height for a cleaner layout.
Products Per Page: Controls the number of products displayed per page.
Products Per Column: Controls the number of product cards. Each option defines the width a single product takes up out of 12 columns. Configure for:
Desktop
Tablet
Mobile
Show Title (Checkbox): Toggle visibility of the "Shop" page title.
Shop Title Image as Background: Use a custom image behind the shop title. Change image to upload or select another image.
Shop Title Background Color: Enter a hex color code to change the overlay color.
Title Alignment: Controls the horizontal alignment of the page title.
Left Align: Aligns the title to the left side of the section. Ideal for a formal or minimal layout.
Center Align: Places the title in the center of the section. Most commonly used for balance and emphasis.
Right Align: Aligns the title to the right side. Rare, but can be used for unique or modern layouts.
On Product Box Hover Settings
Show Quick View (Checkbox): Enables a hover action that shows a quick preview of the product.
Shop Page Header Content
HTML Content Box: Add custom HTML here to appear above the product listing.
Update: Save Your Changes. A toast notification ‘Settings Updated Successfully’ confirms the action.
Right Panel
It includes the following structured sections:
Header Section
Logo and Search Bar: Positioned at the top to help users identify the brand and search for products easily.
Navigation Menu: Offers quick access to various product categories like electronics, fashion, beauty, and more.
User Options: Includes icons for wishlist, shopping cart, and account login or sign-up, making user interaction convenient.
Banner Area: Large promotional banner showcasing an engaging image to visually attract users. It sets the tone of the shopping experience and often highlights deals or themes.
Breadcrumb Navigation: Located below the banner, this shows the user’s current location within the site hierarchy, improving navigation clarity.
Main Content Layout
Filter Sidebar (Left side of main content):
Allows users to filter products by categories and brands using checkboxes.
Helps narrow down search results based on preferences.
Product Display Area (Center):
Displays products in a grid layout.
Each product is shown with:
A clear image
Product name
Action buttons like ‘Add to Cart’ or ‘Select Options’
Stock availability indication
Sort Options:
A dropdown menu enables sorting products by criteria such as price or popularity.
Pagination
Located at the bottom of the product grid.
Allows users to browse through multiple pages of products using page numbers or next/previous controls.
Footer Section
Contact Details: Methods to reach customer support.
App Download Links: Buttons to download the mobile app from app stores.
Quick Links: Links to key pages like shipping policy, return policy, terms and conditions, privacy policy, and selling options.
Product Page
There are two panels on the page:
Left Panel is the Admin Settings Panel, used to configure the product page layout, gallery settings, text alignment, and custom HTML blocks.
Right Panel is the Product Frontend View, displaying the customer-facing version of the individual product page.
Left Panel
Product Layout
Gallery Section
Product Image Width: Controls how much horizontal space the product image section takes up out of 12 columns. Each option defines the width the image occupies relative to the total layout.
Product Image Style: Determines the position of the product image relative to the product details section.
Left side: The product image appears on the left side of the product details.
Bottom: The product image is positioned below the product details.
Right Top: The product image is shown on the top-right of the product details section.
Right Bottom: The product image is shown on the bottom-right of the product details section.
Product Summary
Text Align: Controls the alignment of the text in the product summary section.
Left Align: Aligns the product summary text to the left side.
Center Align: Centers the product summary text horizontally.
Right Align: Aligns the product summary text to the right side.
Sticky Add to Cart (Checkbox): Keeps the ‘Add to Cart’ button visible as users scroll down. Useful for long descriptions or reviews.
Show Review Count (Checkbox): Toggle the visibility of the number of reviews beside the product rating stars.
Show Meta / Categories (Checkbox): Show product categories below the product name, helping customers identify its classification.
Show Share Icons (Checkbox): Toggle visibility of social media share icons for quick sharing.
Custom HTML
HTML before Add To Cart button: Add custom HTML content above the ‘Add to Cart’ button.
Accepts shortcodes and basic HTML elements.
HTML after Add To Cart button: Add custom HTML content below the ‘Add to Cart’ button.
Product Page Header Content: Insert HTML content that appears at the very top of the product page, replacing the default header.
Update: Saves the changes. A toast message saying ‘Settings Updated Successfully’ will appear as confirmation.
Right Panel
Header & Navigation
Breadcrumbs: Display the product's category path for navigation.
Product Title: Prominently displayed.
Share Icon: Allows quick sharing via social platforms.
Product Gallery
A large central product image with a vertical thumbnail strip.
Clicking thumbnails updates the main display.
Reflects the layout configured in the Product Image Style section.
Product Pricing & Ratings
Price: Shows current and discounted prices with percentage off.
Rating: Star-based rating with review count (if enabled).
Quantity Selector: Allows customers to select the desired quantity before adding to cart.
Add to Cart Section
A prominent Add to Cart button, styled for user engagement.
Any inserted HTML content (before or after) will appear here as configured.
Product Meta: Shows associated categories if enabled.
Tabs for Additional Info
Description Tab: Contains a detailed product overview.
Reviews Tab: Displays customer reviews and ratings.
Cart Page
There are two panels on the page:
Left Panel is the Admin Settings Panel, used to configure the cart layout, step progress design, visibility toggles, and custom content blocks.
Right Panel is the Cart Frontend View, displaying the customer-facing version of the shopping cart.
Left Panel
Cart Layout: Choose the overall layout for the cart page.
Default: The standard layout with a balanced view of both the product list and cart summary.
Simple: A clean and minimal layout with fewer visual elements.
Focused: Emphasizes the cart summary and checkout call-to-action.
Flexible Cart Layout: Select from predefined layout templates to customize the arrangement of the cart components.
Sticky Sidebar (Checkbox): When enabled, keeps the cart summary sidebar fixed while scrolling.
Show Title (Checkbox): Toggles the visibility of the main cart page title.
Steps
Enable Stepper (Checkbox): Enables a step-by-step progress bar at the top.
Steps Size: Choose the size of the progress steps.
Default: Uses the standard size for the stepper elements.
Small: Slightly reduced size compared to the default.
Smaller: The most compact size for step indicators.
Steps Letter Case: Select the letter casing for step labels.
Uppercase: Converts all step text to all capital letters.
Normal: Uses standard sentence casing or as entered/styled by theme defaults.
Step Numbers (Checkbox): Toggle whether to show numerical indicators for each step.
Custom Content
Cart Sidebar Content (Text Area): Add custom HTML or shortcode-based content to appear inside the cart sidebar.
After Cart Content (Text Area): Insert custom content that will appear below the main cart area.
Update: Saves all configuration changes. A confirmation message like ‘Updated Cart Page Settings’ will appear after saving.
Right Panel
Header & Navigation
Breadcrumbs: Shows navigation path.
Cart Title: Displays prominently as ‘SHOPPING CART’.
Cart Item Section
Product Image: Placeholder or product image with item details next to it.
Product Title: Displays product name.
Rating: Star-based rating display under product title.
Quantity Selector: Allows quantity adjustments with ‘+’ and ‘−’ buttons.
Wishlist: Move item to wishlist.
Remove: Remove item from the cart.
Coupon and Pricing
Apply Coupon Button: Opens a field to input and apply discount codes.
Item Price: Displays individual item pricing.
Cart Summary Box
Subtotal: Shows total price before taxes and shipping.
Coupon Applied: Reflects any applied coupon discounts.
Shipping: Displays shipping charges.
Tax: Shows applied tax value and percentage.
Total Amount: Final payable amount including all charges.
Save and Proceed Button: Prominent button to move to the checkout step.
Checkout Page
There are two panels on the page:
Left Panel is the Admin Settings Panel, used to configure the checkout page layout, step behavior, privacy/terms links, and sidebar content.
Right Panel is the Customer Checkout View, displaying how the checkout form appears to the end user during order placement.
Left Panel
Checkout Layout: Choose from predefined layout options to structure the checkout page.
Default
The standard layout with all steps visible on the same page.
Typically shows address, shipping, and payment sections stacked vertically.
Good for stores that want transparency and full visibility of the checkout process at once.
Simple
A cleaner, more compact layout.
Likely hides or minimizes secondary elements.
Ideal for quick checkouts or mobile-first experiences.
Focused
Streamlined layout that emphasizes one step at a time.
May be used in combination with the Stepper option.
Good for reducing distraction and improving conversion rates by keeping users focused.
Highlight Required Fields with an Asterisk (Checkbox): Enables an asterisk marker for fields that are mandatory.
Steps
Enable Stepper (Checkbox): Activates a step-by-step interface for the checkout process.
Steps Size: Controls visual scale of step headings.
Default:
Uses the standard step size defined by the theme or platform.
Suitable for regular screens and general use.
Small
Reduces the size of the step indicators and possibly the step titles.
Helps save vertical space and creates a cleaner appearance.
Smaller
Makes the step components even more compact.
Best for minimalist interfaces or when space is limited.
Steps Letter Case: Choose the text style for the step labels in the checkout process.
Uppercase: Displays all step labels in uppercase letters for emphasis and uniformity.
Normal: Displays step labels with standard capitalization.
Step Numbers (Checkbox): Adds numerical labels before each checkout step for better guidance.
Privacy Policy Page: Specify the CMS page URL that contains your store’s privacy policy.
Privacy Policy Textbox: Text shown next to the privacy checkbox on the frontend to inform users and get consent for collecting and using their personal data.
Terms and Conditions Page: CMS page URL for the terms and conditions.
Terms and Conditions Textbox: Text displayed next to the checkbox on the frontend to inform users about the terms they must agree to and obtain their consent before completing an action.
Terms and conditions link style: Choose how the terms and conditions link behaves when clicked during checkout.
New Tab: Opens the terms and conditions page in a new browser tab, allowing users to keep their checkout session open.
Same Tab: Opens the terms and conditions page in the current tab, replacing the checkout page.
Sticky Sidebar (Checkbox): Keeps the order summary (right panel) visible while scrolling.
Checkout Sidebar Content: Add any custom HTML or message content to appear in the sidebar.
Update: Saves the settings. On successful save, a toast notification ‘Settings Updated Successfully’ appears.
Right Panel
Checkout Sections
Shipping Address: Collapsible panel where users enter their delivery address.
Gift Card/Voucher: Option to apply promo or gift card codes.
Payment: Section to select one of the available payment methods:
Cash On Delivery
Razorpay
Stripe
Order Summary Sidebar
Subtotal: Displays item total before taxes and shipping.
Shipping: Shows applicable shipping charges.
Default Tax: Displays the configured tax percentage and amount.
Total Amount: Sum total of subtotal + tax + shipping.
Terms Checkboxes
Two checkboxes are displayed for compliance:
Kindly check the {{privacy}}
Kindly check the {{terms}}
These must be checked before placing an order.
Place Order: Prominently highlighted in yellow. Completes the checkout process upon clicking, assuming all validations are passed.
Layout Settings
Header Settings
The page displays 10 pre-built header layouts. Each header style is visually previewed to help you decide which design suits your store best.
For Each Header:
Preview Image: Shows a real-time thumbnail of the header layout.
Header Number: Identifies each layout.
Choose Header Button: Click this to apply that header to your storefront. A toast notification ‘Header Selected Successfully’ will appear to confirm selection.
Active Label: Indicates the currently applied header layout.
Menu List
New
Clicking the ‘+ New’ opens the ‘Add New Menu’ dialog box. Use this form to manually create and configure a new menu under your store’s layout settings.
Menu Name: Enter the desired name for the menu.
Close: Closes the form without saving any input or changes and redirects to the Menu List view.
Submit: Saves the new menu configuration. Upon successful submission, a toast notification ‘Menu Added Successfully’ will appear confirming the update.
Per Page
It controls the number of menu records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the order table.
The dropdown menu will show you options to display 10, 25, 50, or 100 menus per page.
Choose the number of menus you want to display per page.
The table will automatically refresh to show the selected number of menu per page.
Search
You can search menus by entering specific menu details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the menu table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret menu list data quickly
and accurately. The columns are listed below:
S.No: Sequential numbering of the listed menus.
Name: Displays the name of each menu.
Action: Manage the menu entries.
Edit: Manage and customize the structure of an existing menu. Edit the following form fields:
Menu-List
Navigates back to the main Menu List page, where all available menus are listed.
Edit Menu List
Name: Displays the name of the currently selected menu.
Submit: Saves any name changes made to the menu.
Add New Menu Item
Use this form to add new items to the selected menu.
Title: Enter the name of the menu item.
Link: Enter the destination URL the menu item should point to.
Class: Provide a CSS class for styling or for applying custom logic.
Add Item: Add the new menu item to the existing list.
Customizing Your Product Category Menu
Customize for each product category, allowing for a high degree of flexibility and control over the menu's appearance and behavior with the below mentioned fields:
Navigation Label: This is what the user sees on the website.
Navigation URL: Defines where the menu item will lead the user.
Navigation Class: Allows applying a CSS class for styling or functional logic.
Remove: Deletes the menu item permanently.
Close: Collapses the item without deleting it.
Save Menu: Store all modifications made to the structure. A toast notification like ‘Menu Updated Successfully’ will appear to confirm the update.
Delete: Deletes the category. A dialog box will appear with the text ‘Are you sure you wish to delete this menu?’ along with ‘Ok’ and ‘Cancel’ options. Canceling will remove the dialog box and clicking on ‘Ok’ will display this toast notification ‘Menu List Data Deleted’ to confirm deletion.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Footer
Theme Name: This is the title given to a specific website design layout.
Preview Image: A visual snapshot that provides a quick glance at the theme's appearance when applied to the storefront.
Choose Theme: The selected theme will be applied immediately to the storefront. A toast notification ‘Footer Selected Successfully’ will appear to confirm that the new theme has been applied.
Active Indicator: This label or badge will only appear on the theme card that is currently applied and active on the storefront.
Font Settings
Global Font Settings
This section controls the primary fonts utilized across the entirety of the website.
Body Font:
Determines the default font for general body text.
Modification is performed by clicking the text field.
A dropdown or selection menu will appear, presenting available font options for selection.
Paragraph Font:
Specifically governs the font employed for paragraph text elements throughout the website.
Modification is similar to Body Font; the text field is clicked to select a new font.
H1 Font, H2 Font, H3 Font, H4 Font, H5 Font, H6 Font:
Manage the fonts for various heading levels (H1: largest, H6: smallest).
Essential for structuring content and enhancing readability.
For each level, the respective text field is clicked to select a desired font from the provided list, allowing for visual hierarchy differentiation.
Link Font:
Defines the font style for all hyperlinks (clickable text) on the website.
Modification involves clicking the text field to select the desired font for links.
Button Font:
Controls the font utilized for text displayed on buttons across the storefront.
Modification involves clicking the text field to select the font for buttons.
Submit: Saves the new font configuration. Upon successful submission, a toast notification ‘Global Font Settings Updated Successfully’ will appear confirming the update.
Website Fonts
Google Font
Clicking on this button will open the ‘Add Google Font’ modal dialog box to add a new Google Font to the website. The following fields will be available:
Font Name: Enter a descriptive name for the font. This name will be displayed in your font list.
Font Family: Enter the exact font family name as provided by Google Fonts.
Google link: Paste the URL provided by Google Fonts for embedding the chosen font.
Close: Clicking this button will close the ‘Add Google Font’ modal dialog box without saving any changes.
Submit: Clicking this button will save the new Google Font to the website's font list. A toast notification like 'Google Font Added Successfully' will appear to confirm the addition.
Custom Font
Clicking on this button will open the ‘Add Custom Font’ modal dialog box to upload and configure custom font files. The following fields will be available:
Font Name: Enter a descriptive name for your custom font.
Font Family: Enter the font family name that will be used in your CSS to refer to this font.
Font Style: Select the style of the font.
Font Weight: Enter the weight of the font.
Font Display: Select how the font will be displayed while loading.
Block: Renders text invisible until the custom font loads, then displays it, potentially causing a brief ‘flash of invisible text’ (FOIT).
Swap: Instantly displays text using a fallback font, then swaps to the custom font once loaded, which can lead to a ‘flash of unstyled text’ (FOUT) or minor layout shifts.
Upload WOFF: Click 'Choose File' to upload the .woff font file from your system.
Upload WOFF 2: Click 'Choose File' to upload the .woff2 font file from your system.
Upload SVG: Click 'Choose File' to upload the .svg font file from your system.
Upload EOT: Click 'Choose File' to upload the .eot font file from your system.
Close: Clicking this button will close the "Add Custom Font" modal dialog box without saving any changes.
Submit: Clicking this button will upload and add your custom font to your website's font list. A toast notification like 'Custom Font Added Successfully' will likely appear to confirm the addition.
Per Page
It controls the number of font records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the font table.
The dropdown menu will show you options to display 10, 25, 50, or 100 fonts per page.
Choose the number of fonts you want to display per page.
The table will automatically refresh to show the selected number of fonts per page.
Search
You can search fonts by entering specific font details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the font table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret font data quickly
and accurately. The columns are listed below:
Font Name: Displays the name given to the font.
Font Family: Displays the actual font family name.
Delete: Deletes the category. A dialog box will appear with the text ‘Are you sure you wish to delete this font?’ along with ‘Ok’ and ‘Cancel’ options. Canceling will remove the dialog box and clicking on ‘Ok’ will display this toast notification ‘Font deleted Successfully’ to confirm deletion.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Color Settings
Global Color Settings
Defines the primary color scheme for the website.
To adjust any color setting, follow these steps:
Navigate to the desired color field.
Click on the color swatch or the hexadecimal code input field to open the color palette.
Using the Color Palette:
Hexadecimal Input: Directly type the 6-digit hexadecimal code into the input field to set a precise color.
Color Slider: Drag the vertical slider on the right to select the desired hue.
Color Picker Area: Click and drag the circular selector within the main color square to adjust the saturation and brightness of the chosen hue.
Predefined Colors: Select from the row of common colors displayed at the bottom of the palette. Clicking one of these will immediately apply that color.
Once you have selected your preferred color, click outside the color palette or press Enter to apply the changes to that specific color field.
After configuring all desired color settings, click the ‘Submit’ button at the bottom of the page to save all your changes to the theme.
Below is a description of each color setting:
Global Color: Sets the overall dominant color for the website, influencing elements across the site.
Base Color: Defines a foundational color often used for background elements or text that needs to contrast with primary colors.
Primary Color: Specifies the main accent color used for key interactive elements like buttons, links, or highlighted sections.
Secondary Color: Provides an additional accent color, often used to complement the Primary Color or for less prominent interactive elements.
Info Color: Used to highlight informative messages or non-critical notifications.
Alert Color: Designates a color for urgent messages, alerts, or warnings requiring immediate attention.
Success Color: Represents successful actions or positive confirmations.
Warning Color: Indicates caution or potential issues that need review but are not critical alerts.
Link Color: Sets the default color for hyperlinks on the website.
Link Hover Color: Defines the color of hyperlinks when a user hovers their mouse cursor over them, providing visual feedback.
Divider Color: Specifies the color used for separating lines or borders between content sections.
Dark Color: A general-purpose dark color, often used for text or background elements in dark modes or dark sections of the site.
Submit: Clicking this button will apply the custom color to the website's theme/design. A toast notification like 'Global Color Updated Successfully.' will likely appear to confirm the selection.
Home Banners
Manage the banners displayed on the website's homepage.
Add Banner: Create and add a new banner to your website.
Banner Image: Click ‘Choose File’ to upload the main image for the banner from your system.
Banner Link: Enter the URL that users will be redirected to when they click on this banner.
Banner Image for Mobile Version: Click ‘Choose File’ to upload a separate, optimized image for the banner that will be displayed on mobile devices.
Banner Link for Mobile Version: Enter the URL for the mobile version of the banner.
Banner Place: Enter a numerical value to define the order or position of this banner if multiple banners are displayed in a sequence or specific sections.
Banner Status: Control the visibility and availability of the banner on your website. The two options are:
Enable: The banner is active and will be displayed on the website.
Disable: The banner is inactive and will not be shown on the website.
Add Banner: Clicking this button will save and add the banner to the list with the entered configurations. A toast notification ‘Home Banner Added Successfully’ will appear to confirm the addition.
Per Page
It controls the number of banner records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the banners table.
The dropdown menu will show you options to display 10, 25, 50, or 100 banners per page.
Choose the number of banners you want to display per page.
The table will automatically refresh to show the selected number of banners per page.
Search
You can search banners by entering specific banner details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the banner table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls, you will find a table with various columns to interpret banner data quickly and accurately. The columns are listed below:
S.No: Displays the serial number of the banner record in the table.
Image: Shows a thumbnail preview of the banner image.
Link: Displays the URL associated with the banner.
Status: Indicates whether the banner is active and displayed on the storefront.
Active: Banner is visible and actively displayed to customers on the website.
In-Active: Banner is hidden and not available for customer interaction on the storefront.
Place: Shows the numerical position or order assigned to the banner.
Action: Provides icons for quick actions related to each banner. The following icons are available under this column:
Edit: Opens the banner edit form similar to the 'Add Banner' form to update and manage the banner details.
Delete: Deletes the category. A dialog box will appear with the text ‘Do you really delete the banner?’ along with ‘Ok’ and ‘Cancel’ options. Canceling will remove the dialog box and clicking on ‘Ok’ will display this toast notification ‘Deleted Home Banner Successfully’ to confirm deletion.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Here is the user manual for "Social Sharing Medium," formatted as requested:
MANAGE SOCIAL SHARING MEDIUM
+ New
Navigate to the top right of the ‘Social Sharing Medium’ section and click the ‘+ New’ button to open a form or modal dialog box to add a new social sharing medium. The following fields will be available:
Social Media Name: Enter the name of the social media platform.
Icon: Enter or select the icon class or name that represents the social medium.
URL: Enter the base URL or sharing link for the social medium.
Close: Clicking this button will clear all entered information and close the modal without saving.
Submit: Clicking this button will save and add the new social sharing medium to the list with the entered configurations. A toast notification ‘Social Sharing Medium Added Successfully’ will appear to confirm the addition.
Per Page
It controls the number of social sharing medium records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the social sharing medium table.
The dropdown menu will show you options to display 10, 25, 50, or 100 entries per page.
Choose the number of entries you want to display per page.
The table will automatically refresh to show the selected number of entries per page.
Search
You can search social sharing mediums by entering specific details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the social sharing medium table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls, you will find a table with various columns to interpret social sharing medium data quickly and accurately. The columns are listed below:
S.No: Displays the serial number of the entry in the table.
Name: Displays the name of the social sharing medium (e.g., WhatsApp, Facebook).
Icon: Shows the icon code or name associated with the social medium.
URL: Displays the base URL or sharing link configured for the social medium.
Action: Provides icons for quick actions related to each social sharing medium. The following options are available under this column:
Edit: Opens the social sharing medium edit form similar to the '+New' form to update and manage the banner details.
Delete: Deletes the category. A dialog box will appear with the text 'Are you sure you wish to delete this Social link?’ along with ‘Ok’ and ‘Cancel’ options. Canceling will remove the dialog box and clicking on ‘Ok’ will display this toast notification ‘Social Sharing Medium Deleted ’ to confirm deletion.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
SEO Settings
Details website's search engine optimization configurations.
General SEO Settings
SEO Dashboard
Website Name: Enter the official name of your website.
Meta Separator: Enter a character or string that will be used to separate elements in your website's meta titles and descriptions.
Company or person: Enter the name of the company or the individual managing the website.
Company: Selecting this option indicates that the website is owned, operated, or primarily represents an organization, business, or a legal entity.
Person: Selecting this option indicates that the website is owned, operated, or primarily represents an individual.
Marketing Tools
Google Tag Manager:
Select 'Yes' to enable Google Tag Manager. An input field will appear below where you can enter your Google Tag Manager ID.
Select 'No' to disable Google Tag Manager integration.
Google Analytics:
Select 'Yes' to enable Google Analytics. An input field will appear below where you can enter your Google Analytics Tracking ID.
Select 'No' to disable Google Analytics integration.
Facebook Pixel Code:
Select 'Yes' to enable Facebook Pixel integration. An input field will appear below where you can enter your Facebook Pixel ID or code.
Select 'No' to disable Facebook Pixel integration.
Google Search Console: Enter the verification code or meta tag content provided by Google Search Console.
Bing Webmaster Tools: Enter the verification code or meta tag content provided by Bing Webmaster Tools.
Yandex Webmaster Tools: Enter the verification code or meta tag content provided by Yandex Webmaster Tools.
Save Changes: Click the button to apply your modifications. A toast notification ‘Updated SEO Dashboard Data’ will appear to confirm the update.
General Page SEO
MANAGE GENERAL PAGE SEO
1. + New Page
Navigate to the top right of the ‘General Page SEO’ section and click the ‘New Page’ button to open a modal dialog box to add a new page SEO. The following fields will be available:
Title: Enter the primary title for the page.
Seo Title: Enter the title that will appear in search engine results and browser tabs.
Seo Description: Enter a concise summary of the page's content.
Seo Keyword: Enter relevant keywords or phrases that describe the page's content, separated by commas.
Close: Clicking this button will close the "Add New Page SEO" modal dialog box without saving any changes.
Submit: Clicking this button will save and add the new page’s SEO configuration to the list with the entered details. A toast notification ‘Page SEO Added Successfully’) will appear to confirm the addition.
Per Page
It controls the number of page SEO records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the page SEO table.
The dropdown menu will show you options to display 10, 25, 50, or 100 entries per page.
Choose the number of entries you want to display per page.
The table will automatically refresh to show the selected number of entries per page.
Search
You can search page SEO records by entering specific details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the page SEO table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret page SEO data quickly and accurately. The columns are listed below:
S.No: Displays the serial number of the page SEO record.
Title: Displays the primary title of the page.
Meta Title: Displays the configured SEO title for the page, as it would appear in search engine results.
Status: Indicates the current publishing status of the page’s SEO configuration. There are two options:
Publish: The page’s SEO is active and applied on the storefront, making it visible and indexable by search engines.
Draft: The page’s SEO is saved but not yet active on the storefront. It is not visible to search engines and will not affect the page's appearance in search results.
Action: Provides an icon for quick actions related to each page SEO record. The following icon is available under this column:
Edit: Opens the page SEO edit form similar to the 'Add New Page SEO' modal to update and manage the page’s details. Additionally, you will find a back button titled ‘Gneral-Pages-Seo’ to return to the General Page SEO view list.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Permalink
Defines the base structure for product URLs, affecting their appearance to users and search engines.
Product Base: Enter the desired slug or keyword that will form the base of all your product URLs.
Save Changes: Clicking this button will apply the specified permalink base to the website's product URLs. A toast notification 'Updated Successfully' will appear to confirm the update.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Social Links
+ New Social Link
Navigate to the top right of the ‘Social Links’ section and click the ‘+ New Social Link’ button to open a modal dialog box to add a new social link. The following fields will be available:
Social Media Name: Enter the name of the social media platform.
Icon: Enter the icon class or name that represents the social medium.
URL: Enter the full URL for the social media profile or sharing link.
Close: Clicking this button will close the ‘Add New Social Link’ modal dialog box without saving any changes.
Submit: Clicking this button will save and add the new social link to the list with the entered details. A toast notification Social Link Added Successfully’ will appear to confirm the addition.
Per Page
It controls the number of social link records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the social links table.
The dropdown menu will show you options to display 10, 25, 50, or 100 entries per page.
Choose the number of entries you want to display per page.
The table will automatically refresh to show the selected number of entries per page.
Search
You can search social link records by entering specific details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the social links table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret social links data quickly and accurately. The columns are listed below:
S.No: Displays the serial number of the social link record.
Name: Displays the name of the social media platform (e.g., LinkedIn, Twitter).
Icon: Displays the icon class or name associated with the social medium.
URL: Displays the full URL for the social media profile.
Action: Provides icons for quick actions related to each social link record. The following options are available under this column:
Edit: Opens the social link edit form similar to the '+ New Social Link' modal to update and manage the social link’s details.
Delete: Deletes the category. A dialog box will appear with the text ‘Are you sure you wish to delete this Social link?’ along with ‘Ok’ and ‘Cancel’ options. Canceling will remove the dialog box and clicking on ‘Ok’ will display this toast notification 'Social Link Deleted’ to confirm deletion.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Code Snippet
Insert custom code snippets directly into different parts of the website's HTML structure.
Header link: Enter any code snippet or link that needs to be placed within the header section of the website's HTML.
Footer link: Enter any code snippet or link that needs to be placed before the closing tag of the website's HTML.
Below Footer: Enter any code snippet or link that needs to be placed directly after the main footer section of the website.
Submit: Clicking the ‘Submit’ button will save all the entered code snippets to their respective locations on your website. A toast notification, ‘Code Snippet Updated
Successfully’ will appear to confirm that the changes have been saved.
CSS Snippet
Apply custom CSS to enable advanced customization of appearance and layout.
All devices: This text area is for CSS rules that need to apply universally across all device types.
Tab: This text area is specifically for CSS rules that will only apply when the store is viewed on tablet devices.
Mobile: This text area is dedicated to CSS rules that will only apply when the store is viewed on mobile phones.
Submit: Clicking this button saves all the CSS code you have entered into the ‘All device’, ‘Tab’, and ‘Mobile’ input fields. A toast notification ‘CSS Snippet Updated Successfully’ will appear to confirm the update.
Contact Forms
+ Form
Navigate to the top right of the ‘All Forms’ section and click the ‘+ Form’ button to open a modal dialog box to add a new form. The following fields will be available:
Form Title: Enter the title for your new form.
Cancel: Clicking this button will close the ‘Add New Form’ modal dialog box without saving any changes.
Publish: Clicking this button will save and create the new form with the entered title. A toast notification ‘Form Added Successfully’ will appear to confirm the addition.
Per Page
It controls the number of form records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the forms table.
The dropdown menu will show you options to display 10 entries per page.
Choose the number of entries you want to display per page.
The table will automatically refresh to show the selected number of entries per page.
Search
You can search form records by entering specific details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the forms table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret form data quickly and accurately. The columns are listed below:
S.No: Displays the serial number of the form record.
Title: Displays the title of the form.
Status: Displays the current status of the form.
Action: Provides icons for quick actions related to each form record. The following options are available under this column:
Edit: Opens the form builder interface to allow visual creation and direct configuration of form fields and their settings. The fields are:
Adding New Form Fields
New forms are created by utilizing the ‘Add Input Field’ panel. This panel presents various field types organized into categories, allowing for flexible form construction. Follow the below mentioned steps to create:
Locate the plus symbol (+) icon at the bottom left of the form builder interface.
Click the plus symbol (+).
The ‘Add Input Field’ panel will open on the left side of the screen, displaying a selection of form element templates. They are as mentioned below:
Common Fields
Provides general-purpose input types suitable for a wide range of form requirements. The form element templates are described below:
Single Checkbox: Allows selection of a single, independent binary option.
Date: Enables input of a specific date.
Checkbox List: Presents multiple options, allowing selection of one or more choices.
Multi-select: Offers a list of options from which multiple items can be chosen, typically in a dropdown or scrollable list format.
Radio List: Presents a group of mutually exclusive options, where only one can be selected.
Select: Provides a dropdown menu for selecting a single option from a predefined list.
Submit: Button used to send the form data.
Paragraph Text: Allows for multi-line text input, suitable for longer messages or descriptions.
Single Line Text: Accepts a single line of text input, ideal for short answers or titles.
File Upload: Enables users to attach and upload files to the form.
User Information Fields
The Fields are designed for collecting standard personal and contact details. The form fields are described below:
Address: Captures complete address information, typically including street, city, state/province, postal code, and country.
Email: Input for an email address.
First Name: Input for an individual's given name.
Last Name: Input for an individual's last name.
Phone: Input for a telephone number.
Layout Fields
These elements assist in structuring and organizing the visual presentation of the form. The form fields are described below:
HTML: Allows for embedding custom HTML content directly within the form for advanced design or informational purposes.
Divider: Provides a visual line to separate sections of the form, improving readability.
Miscellaneous Fields
This category includes specialized fields for specific functionalities or data types. The form fields are described below:
Hidden: A field that stores data without being visible to the user on the form.
Number: Restricts input to numerical values.
Recaptcha: Integrates a security challenge to protect against spam and automated bots.
Apply: Click this button to apply the change to the form in the storefront. A toast notification, ‘Element Added Successfully’, will appear to confirm the update.
The selected form field will appear on the right side panel of the same page. Each form field you add will be displayed one below the other with each having its own edit and manage options. These are mentioned below:
Options
Presents a categorized library of available, pre-built components for form assembly. For all form element templates their respective customizable form fields are mentioned below:
Common Fields
Single Checkbox
Basic Details
Class name: Assign a CSS class to the HTML element of this checkbox field.
Label: Human-readable text that appears next to or above the checkbox on the actual form.
Label Position: Determines where the label will be placed relative to the checkbox. The options include:
Form Default: This option means the label's position will adhere to the global settings defined for the entire form.
Above Element: Label will appear directly above the checkbox.
Below Element: Label will be placed directly below the checkbox.
Left of Element: Label will be positioned to the left side of the checkbox.
Right of Element: Label will be positioned to the right side of the checkbox.
Hidden: Label will not be visible to the user on the form.
Default value: Pre-populate the checkbox with a specific value when the form initially loads if it is checked.
Required Field: Determines if checking this box is mandatory for form submission. There are two options:
Yes: Indicates that the checkbox must be checked by the user before submitting the form.
No: Indicates that the checkbox is optional. Users can leave it unchecked and still submit the form successfully.
Checked value: Specifies the value that will be submitted if the checkbox is checked by the user.
Unchecked value: Specifies the value that will be submitted if the checkbox is not checked by the user.
Restrictions
Disable input: This field controls whether the user can interact with the checkbox. There are two options:
Yes: Makes the checkbox unclickable and its state cannot be changed by the user.
No: Allows the user to freely check or uncheck the box.
Display
Width: This setting dictates the horizontal size of the checkbox element within its container.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the checkbox field.
Help Text: Text area to add short, inline instructions or hints that appear directly beneath or beside the checkbox for the user.
Description: Provides space for internal notes concerning the form element.
Administration
Admin label: Internal name for the field that is visible only to the user or other administrators in the form builder's backend.
Discard: Clicking will return to the form editor page without saving any changes.
Apply: Saves the changes made to the checkbox field's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
Date
Basic Details
Class name: Assign a CSS class to the HTML element of this date input field.
Label: Human-readable text that appears next to or above the date input field on the actual form.
Label Position: Determines where the label will be placed relative to the date input field.
Form Default: This option means the label's position will adhere to the global settings defined for the entire form.
Above Element: Label will appear directly above the date input field.
Below Element: Label will be placed directly below the date input field.
Left of Element: Label will be positioned to the left side of the date input field.
Right of Element: Label will be positioned to the right side of the date input field.
Hidden: Label will not be visible to the user on the form.
Required Field: Determines if user input is mandatory for form submission. There are two options:
Yes: Indicates that the date field must be completed by the user before submitting the form.
No: Indicates that the date field is optional. Users can leave it blank and still submit the form successfully.
Default to Current Date: This setting controls whether the date field is automatically populated with the current date when the form loads.
Yes: The field will display the current date by default.
No: The field will be empty by default.
Format: This dropdown allows you to choose the display format for the date.
Default: The date will be displayed in the standard format configured for the form or system.
DD/MM/YYYY: Displays the date as Day/Month/Year
DD-MM-YYYY: Displays the date as Day-Month-Year
DD.MM.YYYY: Displays the date as Day.Month.Year
MM/DD/YYYY: Displays the date as Month/Day/Year
MM-DD-YYYY: Displays the date as Month-Day-Year
MM.DD.YYYY: Displays the date as Month.Day.Year
YYYY-MM-DD: Displays the date as Year-Month-Day
YYYY/MM/DD: Displays the date as Year/Month/Day
YYYY.MM.DD: Displays the date as Year.Month.Day
Display
Width: This setting dictates the horizontal size of the date input field within its container.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the date field.
Help Text: Text area to add short, inline instructions or hints that appear directly beneath or beside the date input field for the user.
Description: Provides space for internal notes concerning the form element.
Advanced
Placeholder: Text appears inside the date input field itself, typically in a lighter color, before the user types or selects anything. This acts as a hint for the expected input.
Year Range: This section allows you to define a specific range of years that can be selected in the date picker.
Start Year: Enter the earliest year a user can select.
End Year: Enter the latest year a user can select.
Administration
Field Key: This is an internal, unique identifier for the date field, often used for data processing or backend integration.
Discard: Clicking will return to the form editor page without saving any changes.
Apply: Saves the changes made to the date field's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
Checkbox List
Basic Details
Class name: Assign a CSS class to the HTML element of this checkbox list field.
Label: Human-readable text that appears next to or above the checkbox list on the actual form.
Label Position: Determines where the label will be placed relative to the checkbox list.
Form Default: This option means the label's position will adhere to the global settings defined for the entire form.
Above Element: Label will appear directly above the checkbox list.
Below Element: Label will be placed directly below the checkbox list.
Left of Element: Label will be positioned to the left side of the checkbox list.
Right of Element: Label will be positioned to the right side of the checkbox list.
Hidden: Label will not be visible to the user on the form.
Required Field: Determines if checking at least one option in the list is mandatory for form submission. There are two options:
Yes: Indicates that at least one checkbox in the list must be selected by the user before submitting the form.
No: Indicates that the checkbox list is optional. Users can leave all options unchecked and still submit the form successfully.
Options: Define the individual checkboxes that will appear in the list. To add a new option to the checkbox list, click the floating action button in the top right corner titled ‘Add new’. Specify the following for each option:
Label: The text that will be displayed next to the checkbox on the form.
Value: The underlying data value that will be submitted if this checkbox is selected.
Remove: Delete an option by clicking the ‘x’ icon next to its label and value fields.
Display
Width: This setting dictates the horizontal size of the checkbox list within its container.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the checkbox list field.
Help Text: Text area to add short, inline instructions or hints that appear directly beneath or beside the checkbox list for the user.
Description: Provides space for internal notes concerning the form element.
Administration
Admin label: Internal name for the field that is visible only to the user or other administrators in the form builder's backend.
Discard: Clicking will return to the form editor page without saving any changes.
Apply: Saves the changes made to the checkbox list field's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
Multi-select
Basic Details
Class name: Assign a CSS class to the HTML element of this multi-select field.
Label: Human-readable text that appears next to or above the multi-select box on the actual form.
Label Position: Determines where the label will be placed relative to the multi-select box.
Form Default: This option means the label's position will adhere to the global settings defined for the entire form.
Above Element: Label will appear directly above the multi-select box.
Below Element: Label will be placed directly below the multi-select box.
Left of Element: Label will be positioned to the left side of the multi-select box.
Right of Element: Label will be positioned to the right side of the multi-select box.
Hidden: Label will not be visible to the user on the form.
Required Field: Determines if selecting at least one option in the multi-select list is mandatory for form submission. There are two options:
Yes: Indicates that at least one option in the multi-select box must be selected by the user before submitting the form.
No: Indicates that the multi-select field is optional. Users can leave all options unselected and still submit the form successfully.
Options: Define the individual choices that will appear within the multi-select list. To add a new selectable choice to the list, click the floating action button in the top right corner titled ‘Add new’. Specify the following for each option:
Label: The text that will be displayed for this specific choice within the multi-select box
Value: The underlying data that will be submitted when this particular choice is selected by the user.
Remove: Delete an option by clicking the ‘x’ icon next to its label and value fields.
Multi-select box size: This numerical input determines the number of options that are visible in the multi-select box at one time without needing to scroll.
Display
Width: This setting dictates the horizontal size of the multi-select field within its container.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the multi-select field.
Help Text: Text area to add short, inline instructions or hints that appear directly beneath or beside the multi-select field for the user.
Description: Provides space for internal notes concerning the form element.
Administration
Admin label: Internal name for the field that is visible only to the user or other administrators in the form builder's backend.
Discard: Clicking will return to the form editor page without saving any changes.
Apply: Saves the changes made to the multi-select field's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
NOTE: ‘Radio List’ form element template has the same form fields available in the ‘Multi-Select form element template.
NOTE: ‘Select’ form element template has the same form fields available in the ‘Radio List’ form element template. A key difference is that the ‘Multi-select box size’ form field will not be available in the ‘Select’ form element template section.
Submit
Basic Details
Class name: Assign a CSS class to the HTML element of this submit button.
Label: Human-readable text that appears on the button itself (e.g., "Submit") on the actual form.
Processing Label: Text that will temporarily replace the main button label while the form is being submitted or processed.
Display
Width: This setting dictates the horizontal size of the submit button within its container.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the submit button.
Administration
Field Key: This is an internal, unique identifier for the submit button, often used for data processing or backend integration.
Admin label: Internal name for the field that is visible only to the user or other administrators in the form builder's backend.
Discard: Clicking will return to the form editor page without saving any changes.
Apply: Saves the changes made to the submit button's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
Paragraph Text Field
Basic Details
Class name: Assign a CSS class to the HTML element of this paragraph text field (text area).
Label: Human-readable text that appears next to or above the paragraph text field on the actual form.
Label Position: Determines where the label will be placed relative to the paragraph text field.
Form Default: This option means the label's position will adhere to the global settings defined for the entire form.
Above Element: Label will appear directly above the paragraph text field.
Below Element: Label will be placed directly below the paragraph text field.
Left of Element: Label will be positioned to the left side of the paragraph text field.
Right of Element: Label will be positioned to the right side of the paragraph text field.
Hidden: Label will not be visible to the user on the form.
Required Field: Determines if user input is mandatory for form submission. There are two options:
Yes: Indicates that the field must be completed by the user before submitting the form.
No: Indicates that the field is optional. Users can leave it blank and still submit the form successfully.
Restrictions
Limit input to this number: This numerical input allows you to set a maximum number of characters that the user can type into this paragraph text field.
Disable Input: This field controls whether the user can type into the paragraph text area. There are two options:
Yes: Makes the text area uneditable; users cannot type or paste text into it.
No: Allows users to freely enter text into the field.
Disable Browser Autocomplete: This field controls if web browsers are prevented from automatically suggesting or filling in data for this field. There are two options:
Yes: Instructs web browsers not to automatically suggest or fill in previously entered data for this specific field.
No: Allows web browsers to automatically suggest or fill in previously entered data for this field, if applicable.
Display
Width: This setting dictates the horizontal size of the paragraph text field within its container.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the form field.
Help Text: Text area to add short, inline instructions or hints that appear directly beneath or beside the paragraph text field for the user.
Description: Provides space for internal notes concerning the form element.
Advanced
Default value: Pre-populate the paragraph text field with a specific text value when the form initially loads.
Placeholder: Text appears inside the paragraph text field itself, typically in a lighter color, before the user types anything. This acts as a hint for the expected input.
Administration
Admin label: Internal name for the field that is visible only to the user or other administrators in the form builder's backend.
Discard: Clicking will return to the form editor page without saving any changes.
Apply: Saves the changes made to the paragraph text field's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
NOTE: ‘Single Line Text’ form element template has the same form fields available in the ‘Paragraph Text’ form element template.
File Upload
Basic Details
Class name: Assign a CSS class to the HTML element of this file upload field.
Label: Human-readable text that appears next to or above the file upload field on the actual form.
Label Position: Determines where the label will be placed relative to the file upload field.
Form Default: This option means the label's position will adhere to the global settings defined for the entire form.
Above Element: Label will appear directly above the file upload field.
Below Element: Label will be placed directly below the file upload field.
Left of Element: Label will be positioned to the left side of the file upload field.
Right of Element: Label will be positioned to the right side of the file upload field.
Hidden: Label will not be visible to the user on the form.
Required Field: Determines if uploading a file is mandatory for form submission. There are two options:
Yes: Indicates that a file must be uploaded by the user before submitting the form.
No: Indicates that the file upload field is optional. Users can leave it blank and still submit the form successfully.
Save to Server: This option controls whether the uploaded file will be stored on the server.
Yes: The uploaded file will be saved to the configured server location.
No: The uploaded file will not be saved to the server.
Rename Uploaded File: Allows you to specify how uploaded files are named when saved. This field is likely for entering a naming convention or a specific name.
Restrictions
File Limit: This numerical input allows you to set the maximum number of files a user can upload using this field.
Allowed File Types: Enter a comma-separated list of file extensions.
Maximum File Size: Specify the largest size that an individual uploaded file can be.
Minimum File Size: Specify the smallest size that an individual uploaded file must be to be considered valid.
Display
Width: This setting dictates the horizontal size of the file upload field within its container.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the form field.
Help Text: Text area to add short, inline instructions or hints that appear directly beneath or beside the file upload field for the user.
Description: Provides space for internal notes concerning the form element.
Select Files Button Text: The text that will appear on the button users click to browse and select files for upload.
Cancel Fileupload Button Text: The text that will appear on the button used to cancel an ongoing file upload or clear a selected file.
Advanced
Default value: This field typically pre-populates the input area with a specific value. For file upload fields, this might be used to pre-display a file name or path if a server-side default is desired.
Placeholder: Text appears inside the input field associated with the file upload, typically in a lighter color, before the user selects a file.
Administration
Admin label: Internal name for the field that is visible only to the user or other administrators in the form builder's backend.
Discard: Clicking will return to the form editor page without saving any changes.
Apply: Saves the changes made to the file upload field's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
User Information Fields
Address
Basic Details
Class name: Assign a CSS class to the HTML element of this address input field.
Label: Human-readable text that appears next to or above the address input field on the actual form.
Label Position: Determines where the label will be placed relative to the address input field.
Form Default: This option means the label's position will adhere to the global settings defined for the entire form.
Above Element: Label will appear directly above the address input field.
Below Element: Label will be placed directly below the address input field.
Left of Element: Label will be positioned to the left side of the address input field.
Right of Element: Label will be positioned to the right side of the address input field.
Hidden: Label will not be visible to the user on the form.
Required Field: Determines if user input is mandatory for form submission. There are two options:
Yes: Indicates that the address field must be completed by the user before submitting the form.
No: Indicates that the address field is optional. Users can leave it blank and still submit the form successfully.
Restrictions
Disable Browser Autocomplete: This field controls if web browsers are prevented from automatically suggesting or filling in data for this field. There are two options:
Yes: Instructs web browsers not to automatically suggest or fill in previously entered data for this specific field.
No: Allows web browsers to automatically suggest or fill in previously entered data for this field, if applicable.
Display
Width: This setting dictates the horizontal size of the address input field within its container.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the form field.
Help Text: Text area to add short, inline instructions or hints that appear directly beneath or beside the address input field for the user.
Description: Provides space for internal notes concerning the form element.
Advanced
Default value: Pre-populate the address input field with a specific value when the form initially loads.
Placeholder: Text appears inside the address input field itself, typically in a lighter color, before the user types anything.
Administration
Admin label: Internal name for the field that is visible only to the user or other administrators in the form builder's backend.
Discard: Clicking will return to the form editor page without saving any changes.
Apply: Saves the changes made to the address field's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
NOTE: ‘Email’, ‘First Name’, and ‘Last Name’ form element templates have the same form fields available in the ‘Address’ form element template.
Phone
Phone Field
Basic Details
Class name: Assign a CSS class to the HTML element of this phone number input field.
Label: Human-readable text that appears next to or above the phone number input field on the actual form.
Label Position: Determines where the label will be placed relative to the phone number input field.
Form Default: This option means the label's position will adhere to the global settings defined for the entire form.
Above Element: Label will appear directly above the phone number input field.
Below Element: Label will be placed directly below the phone number input field.
Left of Element: Label will be positioned to the left side of the phone number input field.
Right of Element: Label will be positioned to the right side of the phone number input field.
Hidden: Label will not be visible to the user on the form.
Required Field: Determines if user input is mandatory for form submission. There are two options:
Yes: Indicates that the phone number field must be completed by the user before submitting the form.
No: Indicates that the phone number field is optional. Users can leave it blank and still submit the form successfully.
Restrictions
Limit input to this number: This numerical input allows you to set a maximum number of characters (digits) that the user can type into this phone number field.
Disable Input: This field controls whether the user can type into the phone number input field. There are two options:
Yes: Makes the phone number input field uneditable; users cannot type or paste numbers into it.
No: Allows users to freely enter numbers into the field.
Disable Browser Autocomplete: This field controls if web browsers are prevented from automatically suggesting or filling in data for this field. There are two options:
Yes: Instructs web browsers not to automatically suggest or fill in previously entered data for this specific field.
No: Allows web browsers to automatically suggest or fill in previously entered data for this field, if applicable.
Input mask: Dropdown allows you to define a specific format or pattern for the phone number input.
Display
Width: This setting dictates the horizontal size of the phone number input field within its container.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the form field.
Advanced
Default value: Pre-populate the phone number input field with a specific value when the form initially loads.
Placeholder: Text appears inside the phone number input field itself, typically in a lighter color, before the user types anything.
Administration
Admin label: Internal name for the field that is visible only to the user or other administrators in the form builder's backend.
Discard: Clicking will return to the form editor page without saving any changes.
Apply: Saves the changes made to the phone field's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
Layout Fields
HTML
Basic details
Class name: Assign a CSS class to the HTML element of this component.
Label: Human-readable text that appears next to or above the HTML component on the actual form.
Default value: open editor
Display
Width: This setting dictates the horizontal size of the HTML component within its container. Options are typically presented as a fraction (e.g., "12/12" meaning full width).
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the HTML component. Values are typically in pixels (px).
Admin label: An internal name for the field that is visible only to the user or other administrators in the form builder's backend. In this case, it's currently set to "HTML".
Discard: Clicking this button will abandon any changes you've made to the HTML component's settings and return to the form editor page.
Apply: Clicking this button saves the changes you've made to the HTML component's settings. A toast notification ’Updated Input Details Successfully’ will appear to confirm the update.
Divider
Basic Details
Class name: Assign a CSS class to the HTML element of this divider. This is useful for custom styling, such as changing its color or thickness.
Display
Width: This setting dictates the horizontal size of the divider within its container. Options are typically presented as a fraction.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the Divider.
Admin label: An internal name for the divider that is visible only to you or other administrators in the form builder's backend.
Discard: Clicking this button will abandon any changes you've made to the Divider component's settings and return to the form editor page.
Apply: Clicking this button saves the changes you've made to the Divider component's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
Miscellaneous Fields
Hidden
Basic Details
Class name: Assign a CSS class to the HTML element of this hidden field. This is typically used for internal referencing or specific scripting needs, as the field itself is not visible.
Label: A human-readable internal name for the hidden field. This label is not displayed to the user on the form but helps in identifying the purpose of the hidden field within the form builder or when reviewing submitted data. In this case, it's currently set to "Hidden".
Default value: Pre-populate this hidden field with a specific value when the form initially loads. This value will be submitted along with other form data if not otherwise changed by scripting.
Discard: Clicking this button will abandon any changes you've made to the Hidden component's settings and return to the form editor page.
Apply: Clicking this button saves the changes you've made to the Hidden component's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
Number
Basic Details
Class name: Assign a CSS class to the HTML element of this input field.
Label: Human-readable text that appears next to or above the input field on the actual form. In this case, it's currently set to "Number".
Label Position: Determines where the label will be placed relative to the input field.
Form Default: This option means the label's position will adhere to the global settings defined for the entire form.
Above Element: Label will appear directly above the input field.
Below Element: Label will be placed directly below the input field.
Left of Element: Label will be positioned to the left side of the input field.
Right of Element: Label will be positioned to the right side of the input field.
Hidden: Label will not be visible to the user on the form.
Required Field: Determines if user input is mandatory for form submission. There are two options:
Yes: Indicates that the field must be completed by the user before submitting the form.
No: Indicates that the field is optional. Users can leave it blank and still submit the form successfully.
Minimum: Sets the lowest acceptable numerical value a user can enter into this field.
Maximum: Sets the highest acceptable numerical value a user can enter into this field.
Step: Defines the increment or decrement value when a user uses the up/down arrows (spin buttons) often associated with number input fields.
Display
Width: This setting dictates the horizontal size of the input field within its container. Options are typically presented as a fraction.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the form field.
Help Text: Text area to add short, inline instructions or hints that appear directly beneath or beside the input field for the user.
Description: Provides space for internal notes concerning the form element. This text is not visible to the user.
Advanced
Default value: Pre-populate the input field with a specific numerical value when the form initially loads.
Placeholder: Text appears inside the input field itself, typically in a lighter color, before the user types anything.
Administration
Admin label: Internal name for the field that is visible only to the user or other administrators in the form builder's backend..
Discard: Clicking this button will abandon any changes you've made to the Number input field's settings and return to the form editor page.
Apply: Clicking this button saves the changes you've made to the Number input field's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
Recaptcha
Basic Details
Class name: Assign a CSS class to the HTML element of this Recaptcha component. This can be used for custom styling if needed.
Label: A human-readable label for the Recaptcha field. This label will be displayed next to or above the Recaptcha challenge on the actual form. In this case, it's currently set to "Recaptcha".
Visible: Controls whether the reCAPTCHA element is displayed on your form. The two options are:
Visible: The reCAPTCHA challenge will be clearly shown to the user on the form. Users will need to interact with it to proceed.
Invisible: The reCAPTCHA element will not be directly visible to the user.It runs in the background, analyzing user behavior to determine if they are a bot without requiring explicit interaction from a human user.
Type: Determines which version or type of reCAPTCHA technology is used.
Challenge (v2): This refers to reCAPTCHA v2. With this type, users are typically presented with a visible challenge to prove they are not a robot.
Score based (v3): This refers to reCAPTCHA v3. This version runs entirely in the background, without interrupting the user. It assigns a score to each user interaction based on their behavior on the site.
Validate requests with: Specifies the particular user interaction method for the reCAPTCHA challenge, especially relevant for reCAPTCHA v2.
"I'm not a robot" Checkbox: Classic reCAPTCHA v2 experience. Users must click a checkbox. If reCAPTCHA detects suspicious behavior, it may then present a more complex image-based challenge.
Invisible reCAPTCHA badge: Part of reCAPTCHA v2. Instead of a checkbox, a small reCAPTCHA badge appears, usually in the corner of the screen. The reCAPTCHA system runs silently in the background. If it suspects bot behavior, it might still present a visual challenge to the user, but only when necessary.
Display
Width: This setting dictates the horizontal size of the Recaptcha component within its container. Options are typically presented as a fraction.
Margin: These input fields (for top, right, bottom, left) allow you to specify the amount of empty space (margin) around the Recaptcha component. Admin label: An internal name for the Recaptcha field that is visible only to you or other administrators in the form builder's backend.
Discard: Clicking this button will abandon any changes you've made to the Recaptcha component's settings and return to the form editor page.
Apply: Clicking this button saves the changes you've made to the Recaptcha component's settings. A toast notification ‘Updated Input Details Successfully’ will appear to confirm the update.
The above forms fields are for all the form element templates in the form editor page. Apart from ‘Options’, there are two other options, they are mentioned below:
Delete: Deletes the category. A dialog box ‘Confirm’ will appear with the text ‘Are you sure you want to delete this Component? along with ‘Cancel’ and ‘Delete’ options. Canceling will remove the dialog box and clicking on ‘Delete’ will display this toast notification ‘Removed Element Successfully’ to confirm deletion.
Duplicate: Clicking on this will create an exact copy of the selected field. A toast notification ‘Element Duplicated Successfully’ will appear to confirm duplication.
Here ends the form configuration options for form building. To find additional options, navigate to the top right corner and find the below-mentioned options:
Preview: The forms you add can be previewed. Add the input text as per the form fields and click submit.
Publish: A dialog box ‘Update Form’ will appear with the form field ‘Form Title’. Enter the required input. ‘Cancel’ and ‘Publish’ are the other two options. Canceling will remove the dialog box, and clicking on ‘Publish’ will display the toast notification ‘Form Updated Successfully’ to confirm publication.
Settings
Return to the ‘Manage Forms’ list view, click on settings icon under ‘Action’ as this section of ‘Contact Form’ settings allows to define the post-submission actions. Enable or disable various actions and configure their specific behaviors. This is the Email and Actions navigation bar of the page from among two others namely Settings and Submissions.
The table contains the following columns headers:
Toggle Switch: Controls whether the corresponding message will be displayed to the user upon performing specific actions. There are two options:
Red (ON): Message is active and will be sent/executed.
Gray (OFF): Message is inactive and will not be sent/executed.
Name: Descriptive name of the action. The names are mentioned below:
Success Message
Store Submission
Admin Email
User Email
Webhook
Redirection URL
Type: Category of the action. The categories are mentioned below:
Success Message
Store Submission
Webhook Connection
Redirect after form submit
Action: Edit the messages. For each type of message the modal dialog box with their respective Name as the title will appear, additionally each one will differ in form fields to suit the specific requirement to edit each of the different messages. All of them are mentioned below:
Success Message
Action Name: Modify the name of the specific message.
Message: Draft the actual message with various formatting options.
Cancel: Click to return to the previous page.
Submit: Saves the update. A toast notification ‘Updated Success Message Settings Successfully’ will appear to confirm the update.
Admin Email
Action Name: Displays the name for the specific email configuration.
Title: Specify the title for the email.
Subject: Defines the actual subject line of the email that the recipient will see in their inbox.
To: Represents the recipient's email address.
Recipient: Represents an additional recipient's email address, it includes CC (Carbon Copy) or BCC (Blind Carbon Copy).
Email Message: Compose the body of the email with various formatting options.
Cancel: Click to close the editor and return to the previous page without saving any changes.
Submit: Saves the update. A toast notification ‘Updated Admin Email Settings Successfully’ will appear to confirm the update.
User Email
Action Name: Displays the name for the specific email configuration.
Title: SpecifIes the title for the email.
Reply To: Specifies the email address for email replies from users.
Subject: Defines the actual subject line of the email that the recipients will see in their inbox.
Email Message: Compose the body of the email that the user will receive.
Cancel: Click to close the editor and return to the previous page without saving any changes.
Submit: Saves the update. A toast notification ‘Updated User Email Settings Successfully’ will appear to confirm the update.
Webhook
Webhook URL: Enter the unique URL provided by the external application that will receive data from the system.
Cancel: Click to close the editor and return to the previous page without saving any changes.
Submit: Save the update. A toast notification ‘Updated Webhook Settings Successfully’ will appear to confirm the update.
Redirection URL
Redirection URL: Enter the target URL for user redirection upon action completion.
Cancel: Click to close the editor and return to the previous page without saving any changes.
Submit: Saves the update. A toast notification ‘Updated Redirection Settings Successfully’ will appear to confirm the update.
Settings
Form Title: Displays the current title of your contact form.
Display Form Title (Toggle Switch): Controls whether the ‘Form Title’ set will be visible to users on the actual form.
Red (ON): The form title will be displayed on the contact form.
Gray (OFF): The form title will not be displayed on the contact form.
Clear Successfully completed Form? (Toggle Switch): Determines if the form fields should be cleared after a user successfully submits the form.
Red (ON): After a successful submission, all fields in the form will be cleared, allowing for a new entry.
Gray (OFF): After a successful submission, the form fields will retain their submitted values.
Hide Successfully completed Form? (Toggle Switch): Controls whether the entire form is hidden after a successful submission.
Red (ON): After a successful submission, the entire contact form will be hidden.
Gray (OFF): After a successful submission, the contact form will remain visible.
Update: Save the update. A toast notification ‘Updated Form Settings Successfully’ will appear to confirm the update.
Submissions
Presents a table for viewing all contact form submission details, with each row representing a single entry. The static fields are mentioned below:
Page URL: URL of the page on the website where the contact form was submitted.
IP Address: IP address of the device from which the submission was made.
Browser: Information about the web browser and operating system used by the submitter.
Based on the fields entered while configuring the form, the submission section will reflect the data.
Status
Active: It will be visible within the page editor interface, allowing for modification.
Inactive: It will be hidden from the page editor's view, preventing modification.
Clone
Click the copy icon to clone the existing form to make it appear in the same table. It will be cloned as the form name and ‘Copy’.
Delete
Deletes the form. A dialog box will appear with the text ‘Are you sure you wish to delete this form?’ along with ‘Ok’ and ‘Cancel’ options. Canceling will remove the dialog box and clicking on ‘Ok’ will display this toast notification 'Form Deleted Successfully’ to confirm deletion.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Form Submissions
Contact Forms
View and manage all submissions received through the contact forms configured.
Per Page
It controls the number of form submission records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the form submissions table.
The dropdown menu will show you options to display 10 entries per page.
Choose the number of entries you want to display per page.
The table will automatically refresh to show the selected number of entries per page.
Search
You can search form submission records by entering specific details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the form submissions table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret form submission data quickly and accurately. The columns are listed below:
S.No: Displays the serial number of the form submission record.
Name: Displays the name provided by the submitter.
Email: Displays the email address provided by the submitter.
Company: Displays the company name provided by the submitter.
Phone Number: Displays the phone number provided by the submitter.
Message: Displays the message content submitted by the user.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Roles & Permissions
Manage Staffs
+ New Staff
Navigate to the top right of the ‘Manage Staffs’ section and click the ‘+ New Staff’ button to open a modal dialog box to add a new staff member. The following fields will be available:
User Name: Enter the full name or username for the new staff member.
Email: Enter the email address for the staff member.
Profile Image: Click ‘Choose File’ to upload an optional profile image for the staff member.
Role: Select the role/permissions level for this staff member from the dropdown menu.
Password: Enter a password for the staff member’s account.
Status: Select the initial status of the staff member’s account. The available options are:
Active: Staff member's account is fully functional and can log in and perform their assigned duties.
Disabled: Staff member's account is temporarily inactive. They cannot log in or access the admin panel, but their account details are retained for future re-activation.
Blocked: Staff member's account is permanently blocked. They cannot log in, and this status is typically used for security reasons or permanent removal.
Close: Clicking this button will close the ‘Add Staff’ modal dialog box without saving any changes.
Submit: Clicking this button will save and add the new staff member to the list with the entered details. A toast notification ‘New Staff Added Successfully’ will appear to confirm the addition.
Per Page
It controls the number of staff records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the staff table.
The dropdown menu will show you options to display 10 entries per page.
Choose the number of entries you want to display per page.
The table will automatically refresh to show the selected number of entries per page.
Search
You can search staff records by entering specific details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the staff table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret staff data quickly and accurately. The columns are listed below:
S.No: Displays the serial number of the staff record.
Name: Displays the name of the staff member.
Email: Displays the email address of the staff member.
Role: Displays the assigned role of the staff member.
Action: Provides icons for quick actions related to each staff record. The following options are available under this column:
Edit: Edit the details of existing staff members with the following field inputs:
Navigate to the top right of the ‘Update Staffs’ section and click the ‘+ New Staff’ button to open a modal dialog box to add a new staff member. The same fields available in the ‘+ New Staff’ in the ‘Manage Staffs’ list view will appear.
Navigate to the top right of the ‘Update Staffs’ section and Click on ‘Change Password’ to create a new password. The following fields will be available:
New Password: Enter the new password for the staff member's account.
Confirm Password: Re-enter the new password.
Close: Discards any password changes entered and closes the ‘Change Password’ modal dialog box without saving.
Change Password Button: Saves the new password entered. A toast notification ‘Password Updated Successfully’ will appear to confirm the update.
Delete: Deletes the staff member. A dialog box will appear with the text ‘Are you sure you wish to delete this staff?’ along with ‘Ok’ and ‘Cancel’ options. Canceling will remove the dialog box and clicking on ‘Ok’ will display this toast notification 'Removed Staff Successfully’ to confirm deletion.
The following fields are available to be edited:
Name: The full name of the staff member.
Role: The designated role of the staff member, which determines their access and permissions within the platform.
Email: The email address associated with the staff member's account.
Profile Image: Allows you to upload a profile picture for the staff member.
Status: Indicates the current state of the staff member's account.
Active: Staff member's account is fully functional and they can log in.
Disabled: Staff member's account is temporarily inactive.
Blocked: Staff member's account is permanently blocked.
Cancel: Discards any changes made to the staff member's profile and returns to the previous page.
Update: Saves all the changes made to the staff member's profile. A toast notification ‘Staff Details Updated Successfully’ will appear to confirm the update.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Return to the ‘Manage Staff’ list view and find the paging controls as mentioned below:
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Roles & Permissions
+ Add Role
Navigate to the top right of the ‘Manage Roles’ section and click the ‘+ Add Role’ button to open a modal dialog box to add a new role. The following fields will typically be available:
Role Name: Enter the desired name for the new role in this text field.
Cancel: Clicking this button will close the ‘Add Role’ modal dialog box without saving any changes.
Submit: Clicking this button will save and add the new role with the entered 'Role Name' to the list. A toast notification 'New Role Added Successfully’ will appear to confirm the addition.
Per Page
It controls the number of role records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the roles table.
The dropdown menu will show you options to display 10, 25, 50, or 100 entries per page.
Choose the number of entries you want to display per page.
The table will automatically refresh to show the selected number of entries per page.
Search
You can search role records by entering specific details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the roles table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret role data quickly and accurately. The columns are listed below:
S.No: Displays the serial number of the role record.
Role Name: Displays the name of the role.
Action: Provides icons for quick actions related to each role record. The following options are available under this column:
Edit:
Allow granular control over each permission associated with a specific role.
Navigate to the top right of the ‘Update Role’ section and click the ‘Add New Role’ button to open a modal dialog box to add a new role. The same fields available in the ‘Add Role’ in the ‘Manage Roles’ list view will appear.
Role Name: Enter a unique name for the new role to identify the staff’s access level or function.
The table below allows to define and customize role-based access by selecting specific permissions for each module in the system. It contains the below mention column headers:
S.No: Displays the serial number for reference and ordering of permissions.
Permission: Lists all the modules and features available in the system that can be controlled through permissions.
All: A master checkbox that, when selected, automatically enables View, Create, Edit, and Delete for the respective module.
View: Grants the ability to view content within the selected module.
Create: Grants the ability to add or create new entries in that module.
Edit: Grants the ability to make changes to existing entries.
Delete: Grants the ability to permanently remove entries from the system.
Cancel: Clicking this button will close the modal dialog without saving the role or assigned permissions.
Submit Permissions: Clicking this button will save and assign the new role with the selected permissions. A toast notification ‘Role Setting Updated Successfully’ will confirm the addition.
Return to the ‘Manage Roles’ list view and find the paging controls as mentioned below:
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Manage Permissions
List of Permissions
View all distinct permissions. These detailed controls determine the actions users can perform based on their assigned roles.
Per Page
It controls the number of permission records displayed on a single page. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Per Page’ label at the top left corner of the permissions table.
The dropdown menu will show you options to display 10, 25, 50, or 100 entries per page.
Choose the number of entries you want to display per page.
The table will automatically refresh to show the selected number of entries per page.
Search
You can search permission records by entering specific details to quickly locate the needed information. To adjust this setting, follow the steps mentioned below:
Navigate to the ‘Search’ box on the top right corner of the permissions table.
The system will automatically filter the table based on matching values from your input in any column.
The table will automatically filter and show only the matching records.
Below these controls you will find a table with various columns to interpret permissions data quickly and accurately. The columns are listed below:
Permissions Table: The core of the page is the table displaying the permissions, with the following columns:
S.No: Sequential numbering for the permissions listed on the current page.
Permission Name: States the name of each permission.
Pagination Controls
Showing Entries: Indicates the starting and ending index of currently displayed items and the total count. ‘Showing 1 to 1 of 1 entries’ means only one record is available and shown.
Navigation buttons for moving between multiple pages of entries:
Previous: Moves to the page before the current one (disabled on the first page).
1: Indicates the current page number.
Next: Moves to the next page (disabled if there are no more pages).
Account
Profile
Displays user account details.
Name: Text field for the user's name.
Role: Displays the user's administrative permissions.
Email: Text field for the user's email address.
Profile Image: Image container for the user's profile picture.
Edit profile
Navigate to the top right of the ‘Update Profile’ section and click the ‘Edit Profile’ button, the page will redirect to ‘Manage Staffs’ section. Edits to the profile details can be saved.