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 logo from the logo section, you can easily change your site logo, admin logo, and favicon to align with your brand's identity site logo you can upload your business logo for branding recommended size 512 x 512 pixels favicon it is the small icon displayed in the browser tab when users visit your store recommended size 50 x 50 pixels admin logo your admin logo will now display on the login screen for invited users or merchants recommended size 512 x 512 pixels colors 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 header and footer custom header notice 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 " header menu 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" copyright text add a custom copyright message, such as "powered by \[your company name]," to display in the footer of your website footer custom text input your business address or any other custom text to include it on the website's footer footer menu 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 elements and animations order success animation customize or use the default splash animation that appears after orders are placed on the ordering apps custom code 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 global 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 web 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 app 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 bottom navigation bar 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 bottom navigation bar background color select a background color that complements your brand’s theme bottom navigation bar background color adjust the text color of the button labels to ensure readability and visual appeal customize icons 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