Branding Setup
In this section, you'll learn how to personalize your store’s look by adjusting logos, colors, app navigation icons, order success animations, and more. These settings help create a consistent and branded experience across your website and app.
From the left-side panel, click on the Branding section to access the customization options.
From the Logo section, you can easily change your site logo, admin logo, and favicon to align with your brand's identity.
You can upload your business logo for branding.
Recommended Size: 512 x 512 pixels
It is the small icon displayed in the browser tab when users visit your store.
Recommended Size: 50 x 50 pixels
Your admin logo will now display on the login screen for invited users or merchants.
Recommended Size: 512 x 512 pixels
Customize the appearance of your store by adjusting key color elements, including the skin colors, button states, and navigation backgrounds for both the header and footer.
For more advanced color changes, custom CSS styling can be applied to all existing elements.
This feature enables you to showcase important messages at the top of your website or ordering apps, ensuring customers are informed about key updates. For example, you can use this section to communicate a message such as "Orders placed after 10:00 pm will be delivered the following day."
In this section, incorporate crucial buttons for improved user navigation. For example, include buttons for custom forms like Merchant/ Driver Signup, Merchant Panel Login through their links, and other custom pages created through Page Settings such as About Us and Contact Us.
- Click on "Add" to create a new button for the Header Menu Sidebar.
- Enter the name for the button, which will be visible to customers in the Header Menu.
- Provide the link for the button, specifying the destination to which customers will be redirected upon clicking.
- Finally, click "Add" to include the button. Similarly, you can add more buttons in your Header Menu Sidebar.
Now move to "Footer"
Add a custom copyright message, such as "Powered by [Your Company Name]," to display in the footer of your website.
Input your business address or any other custom text to include it on the website's footer.
In the Footer, add important links for easy navigation. For example, include links for Store Signup, Merchant Panel Login, and additional pages generated through Page Settings, such as About Us, Contact Us, or Privacy Policy in the website's footer.
- Click on "Add" to create a new button for the Footer Menu.
- Enter the name for the button, which will be visible to customers in the Header Menu.
- Provide the link for the button, specifying the destination to which customers will be redirected upon clicking.
- Finally, click "Add" to include the button. Similarly, you can add more buttons in your Footer Menu.
Customize or use the default splash animation that appears after orders are placed on the ordering apps.
The Custom Code feature enables you to enhance your store's functionality and appearance by adding custom HTML, CSS, and scripts like Live Chat or Google Analytics. You can customize specific elements on your website and app, applying changes globally, to web pages, or app screens. This feature is especially useful for advanced customizations beyond the sections available in the Builder, such as styling the checkout page, the add-to-cart page, or injecting custom scripts into the footer.
In the Global section, you can apply changes that affect your entire store, including both the website and app.
- HTML Head Add custom meta tags, tracking codes, or other HTML content to the head of your website.
- HTML Footer Inject custom HTML code into the footer section of your website, such as Live Chat, social media links, or scripts.
- CSS Apply global styles using custom CSS, affecting all pages and app screens.
In the Web section, you can customize elements specifically for the website.
- HTML Head: Add custom HTML content for your website’s head, including additional scripts or styles.
- HTML Footer: Inject custom HTML code into the footer of your website, such as analytics or third-party tools.
- CSS: Apply custom CSS to style the website elements according to your preferences.
The Apps section allows you to add custom code specifically for the app.
- HTML Head: Add custom HTML code to the head of your app to implement tracking or app-specific features.
- HTML Footer: Customize the footer of your app with HTML code, such as adding app-specific content or scripts.
- CSS: Use custom CSS to adjust the appearance of your app, including styling app-specific elements.
The Bottom Navigation Bar is a key part of your store’s mobile experience, appearing in the mobile browser and mobile apps. It contains essential buttons like Home, Reorder, Cart, and Account, giving users quick access to vital features. You can fully customize this bar to align with your brand’s identity.
Begin by zooming in on the Bottom Navigation Bar section for a clear view
Select a background color that complements your brand’s theme.
Adjust the text color of the button labels to ensure readability and visual appeal.
Decide whether to use the Default Icons for buttons such as Home, Reorder, Cart, and Account, or upload your Custom Icons to personalize the navigation bar.
- Click on each button to start customizing.
- Enter Icon Label: Add a descriptive label for each button.
- Upload Active State Icon: Select an icon to represent the button when it is active.
- Upload Inactive State Icon: Choose an icon to represent the button in its inactive state.
- Once you’ve made all your customizations, click Save to apply them.
Once you’ve made overall your customizations, click Save from the top to apply them.
