Branding Setup

in this section, you will learn how to personalise your store’s look from updating logos and adjusting colors to adding the links of your social media pages in the header and footer, these tools help you create a consistent, professional, and branded experience for your customers logo setting your brand's identity from the logo section, you can easily change your site logo, admin logo, and favicon to align with your brand's identity desktop site logo you can upload your business logo for branding recommended size 512x512 pixels mobile site logo this is the logo that appears in the header when your site is viewed on a mobile device screen recommended size 512x512 pixels favicon logo it is the small icon displayed in the browser tab when users visit your store recommended size 50x50 pixels footer image this is the logo that will be displayed in the footer (the section at the very bottom of every page) recommended size 512x512 pixels admin logo your admin logo will now display on the login screen for invited users or merchants recommended size 512x512 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 the header and the footer are two of the most important parts of your website you can utilize it for important announcements and key business information 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 essential buttons to enhance user navigation for example, include buttons for custom forms like merchant/ driver signup, merchant panel login button 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 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 footer 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 to your footer menu adding mobile app links this is where you connect the "download on the app store" and "get it on google play" buttons in your footer to your actual apps elements & animations the "elements & animations" section is where you can fine tune the small visual details that make your website feel more dynamic, modern, and delightful for your customers order success animation customize or use the default splash animation that appears after orders are placed on the ordering apps custom code for advanced customization 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 global code placed in the global section will be applied everywhere , on your website, your mobile apps, and across all pages 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 experience it contains essential buttons like home, reorder, cart, and account, giving users quick access to vital features bottom navigation bar text 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 hide title on navigation bar when unchecked switch to the discovery page, both the icon and its text label (e g , "home") will be visible when checked only the icons will be displayed in the navigation bar, without any text underneath them this can create a sleeker look, especially if your icons are universally understood add social media links use the social media section in the theme editor to add clickable icons that link directly to your social media pages this makes it easy for customers to follow you, stay updated, and engage with your brand add links this is where you will provide the actual web addresses (urls) for each of your social media pages copy the full url of your social media page (e g , facebook, instagram) and paste it into the corresponding field in the theme editor to connect your accounts default icon style you have the option to make use of the default icons, if they align with your brand upload custom icons you also have the option to upload your own custom designed icon images for each social media platform frequently asked questions (faqs) i still have the hyperzod favicon where can i change it? you can change all your logos (admin panel > settings > theme) in the settings section on the left panel click the settings icon in the far left vertical bar go to the logo section here you can update your desktop site logo , mobile site logo , and favicon logo (the small icon in the browser tab) can i enter my own "hex code" in the colors section? a hex code is a 6 character code that represents a very specific color (e g , #000000 for pure black or #ffffff for pure white) it's the most accurate way to use your exact brand colors on the web if you have a brand style guide from a designer, your hex codes will be in it you can copy and paste them directly into the color fields for perfect brand consistency i've added my social media links, but the icons are not showing up in the footer this usually has a two part solution first, double check that your links are correctly pasted and saved in the theme > settings section > social media section next, go to settings > header and footer > footer tab, scroll down and make sure the toggle switch for "social media icons" is turned on this switch allows you to quickly show or hide the icons without deleting your links why is the bottom navigation bar not showing on my mobile site? the bottom navigation bar is designed to appear only on specific pages, such as the discovery page in the marketplace model if you are a single store or on another page type, it will not be visible when configuring the bottom navigation bar, make sure you select discovery page , if you’re currently on the home page , the navigation bar will not display what is the "custom header notice" best used for? the custom header notice is your most valuable spot for short, urgent announcements because it appears at the very top of every page, it's perfect for things that every single visitor should see you can make use of it by navigating to the settings (last option on the left panel) > "header & footer" and then type in the text of your choice accordingly use cases flash sales "24 hour flash sale on all t shirts!" shipping promotions "free shipping on all orders over $50 this week!" how can i add a custom message at the top of the homepage? to display a custom message on the homepage, go to theme settings (admin panel > settings > theme) and select homepage from the top left dropdown then, navigate to the settings section (last option in the left panel) under header & footer , you’ll find the option to add and style a custom notice, which will appear at the top of the homepage how can i apply advanced customizations to my store? you can use custom html and css to go beyond the default options and tailor layouts, styles, or elements as needed to do this, go to the left panel, click add elements , then select custom code from there, you can add and apply your custom html or css