There are mainly 2 types of component:

1. Common Component - which is common in all the pages, any changes make effect in all the pages.
2. Individual Component - which is individual for different pages, any changes doesn’t make any effect in another component.

Common Component mainly have 2 components:

• • Default Header
    • • Three Row Navbar
    • • Choose Payment Methods: Look for the list of available payment methods within your app settings. This is where you manage the different payment options that your application supports.
    • • Select PhonePe: Within the payment options, locate and select the PhonePe option. This step ensures that your application is configured to accept payments through the PhonePe digital payment platform.
    • • Enter Connection Details: Fill out the required details, which typically include the key ID, salt key, and secret. Ensure that you accurately input this sensitive information to establish a secure connection between your application and PhonePe.
    • • Initiate Connection: After entering the necessary details, click on the "Connect" or equivalent button to initiate the connection process. This action signals your application to establish a connection with the PhonePe platform using the provided key ID, salt key, and secret.

1. Home: Landing page showcasing various products, categories, and promotions.

2. Shop: Page displaying the catalog of products for users to browse and purchase.

3. Detail: Detailed product information page, providing specifications, reviews, and images.

4. Cart: Page where users can view and manage items they've added to their shopping cart.

5. Checkout: Process page for users to complete their purchase, including address and payment details.

6. Payment: Page for users to make payments securely.

7. My Account: User profile and account management page.

8. Manage Address: Page for users to add, edit, or delete their shipping addresses.

9. Orders: Page displaying the history and status of user orders.

10. Sign In: Page for users to log into their accounts.

11. Sign Up: Page for new users to create an account.

12. Change Password: Page allowing users to change their account password.

13. Reset Password: Page for users to reset their forgotten passwords.

14. About Us: Information about the company or website.

15. Privacy Policy: Document outlining the privacy practices and policies of the website.

16. Refund Policy: Information about the procedures and conditions for product refunds.

17. Shipping Policy: Details about the shipping methods, costs, and delivery times.

18. Terms of Service: Legal terms and conditions users must agree to when using the website.

1. Component:

• • Definition: A component refers to a modular and reusable part of a website or web application. In the context of a website builder, components are pre-built elements or modules that users can add to their web pages. Examples include headers, footers, sliders, and forms.

2. Editor:

• • Definition: The editor is the interface or tool provided by the website builder where users can create and modify the content of their website. It allows users to add, edit, and arrange elements on web pages.

3. Variations:

• • Definition: Variations are different versions or styles of a specific component or element. Website builders often provide users with multiple variations for components like buttons, headers, or sections. Users can choose the variation that best suits their design preferences.

4. Elements:

• • Definition: Elements are the individual building blocks that make up a web page. This includes text boxes, images, buttons, and other interactive or static content. Users can manipulate these elements within the editor to create the desired layout.

5. Properties:

• • Definition: Properties are the characteristics or attributes of a component or element that users can customize. This includes options such as image, text, category. Adjusting properties allows users to tailor the appearance and behavior of elements.

6. Style Manager:

• • Definition: The Style Manager is a tool within the website builder that allows users to manage and customize the overall styles of their website. This includes settings for colors, fonts, and other design elements. It provides a way to control the visual aspects of the site.

7. Navigation:

• • Definition: The structure and organization of blocks, divs and sections that allow users to select or modify the structure of component within a specific version. An effective navigation system enhances the user experience by providing easy access to information and improving overall usability.

8. Theme Setting:

• • Definition: Theme settings involve configuring the overall design and appearance of a website. This includes choices related to color schemes, and other visual elements that contribute to the overall theme or style of the site.

9. Device Manager:

• • Definition: The Device Manager is a feature that helps users optimize the design and layout of their website for different devices, such as desktops, tablets, and mobile phones. It allows customization of how the site appears on various screen sizes.

10. Pages:

• • Definition: Pages refer to distinct sections of a website that contain specific content or serve a particular purpose. Each page typically has a unique URL and is designed to present specific information or functionality to visitors.

What is Custom Field?

Steps to enable it?

1. Go to Apps: Access the application and go to apps where you can manage custom fields.

2. Select Custom Field: Navigate to the custom field.

3. Add New Custom Field: Initiate the process of creating a new custom field. This involves defining a unique field name and selecting the type of custom field, it should be (images, description, etc).
   • This typically includes:
     • Field Type: Select the Field Type from the drop down.
     • Field Label: Enter the Field Label in the input box.

How to use it?

1. Go To Listing: Move to the section where the listings are managed within the application.

2. Select Listing: Choose a specific listing which you want to associate the custom field.

3. Select Custom Field Tab: Access the tab that specifically deals with custom fields within the context of a particular listing. Where, You see the list of custom fields.

4. Add Data To Custom Field: Populate the custom field with relevant data. For example, if the custom field is designed for images, you might upload an image to associate with the selected listing.

5. Click Upload: Upload the changes made to the custom field data for the specific listing.

6. Create or Customize the template: Create or customize the template that want to view.

7. Go To Detail Page: Navigate to the detail page in builder side.

8. Drop Custom Field: Include the custom field in the layout of the detail page by dragging and dropping it into the desired section.

9. Select Value from Drop Down: Choose the specific value that you want to display from the drop down menu associated with the custom field. This selection will be rendered on the detail page for the listing in view version or published version.

Use cases

• E-commerce platforms can utilize custom fields to add detailed specifications to product listings, such as dimensions, materials, and compatibility information. This helps customers make more informed purchasing decisions.
• E-commerce businesses can create custom fields to highlight ongoing promotions, discounts, or special offers associated with specific products. This information can be prominently displayed on product pages to attract customers.

FAQs

A custom field in e-commerce refers to a user-defined data attribute associated with a product listing. It allows businesses to include specific information beyond standard product details, enhancing the presentation and functionality of their online store.

Custom fields enhance the customer shopping experience by providing detailed and relevant information. For example, they can display stock availability, highlight promotions, suggest related products, and offer personalized options such as gift wrapping.

After adding custom fields to your products, customize the product templates in your e-commerce platform’s admin panel. Drag and drop the custom fields into the desired sections of the product detail page to ensure they are displayed correctly.