--- title: Branding Setup slug: branding-setup docTags: createdAt: 2025-09-01T18:00:40.861Z --- ::Image[]{src="https://api.archbee.com/api/optimize/vi9PxF1_dwBHYhSh7U1Da-vzXy6K3YeUF_laYuOY20y-20250910-153409.png" size="82" width="1920" height="1080" position="center" darkWidth="1920" darkHeight="1080" showCaption="false"} 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. *** ## Accessing Branding Setup To access the Branding settings, go to Admin Panel > Theme Builder. Then, click the Settings icon in the left panel to access the available options for customizing and personalizing your store’s appearance. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/ueGiJmOCErRgazorVQjHr_image.png" size="52" width="1264" height="793" position="center" darkWidth="1264" darkHeight="793" showCaption="false"} *** ## Logo: Setting Your Brand's Identity ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/xwttJNbII11IwoaeCYWuQ_image.png" size="52" width="628" height="442" position="center" darkWidth="628" darkHeight="442" showCaption="false"} 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. :::hint{type="info"} **Recommended size:** 512x512 pixels ::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/FH4qWEl3ROjqjs0MJ8z-Y_image.png" size="52" width="517" height="364" position="center" darkWidth="517" darkHeight="364" showCaption="false"} ::: :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Qy541fNs0yHBdAgKW8YsJ_image.png" size="52" width="1218" height="733" position="center" darkWidth="1218" darkHeight="733" showCaption="false"} ::: :::: *** ### Mobile Site Logo This is the logo that appears in the header when your site is viewed on a mobile device screen. :::hint{type="info"} **Recommended size:** 512x512 pixels ::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/I3IaoZeOOR-GuHBSL-sNh_image.png" size="52" width="506" height="528" position="center" darkWidth="506" darkHeight="528" showCaption="false"} ::: :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/IYcAoQIwoJS7-FYsXYR6K_image.png" size="52" width="734" height="858" position="center" darkWidth="734" darkHeight="858" showCaption="false"} ::: :::: *** ### Favicon Logo It is the small icon displayed in the browser tab when users visit your store. :::hint{type="info"} **Recommended size:** 50x50 pixels ::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/kniHVIWAEktMQ8aTuQDUV_image.png" size="52" width="321" height="472" position="center" darkWidth="321" darkHeight="472" showCaption="false"} ::: :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/mvRu4idU-nDxc3o6yu_aT_image.png" size="52" width="566" height="658" position="center" darkWidth="566" darkHeight="658" showCaption="false"} ::: :::: *** ### Footer Image This is the logo that will be displayed in the footer (the section at the very bottom of every page). :::hint{type="info"} **Recommended size: **512x512 pixels ::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/yT1KtLY-62gMxOoiAMj8N_image.png" size="52" width="322" height="455" position="center" darkWidth="322" darkHeight="455" showCaption="false"} ::: :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/c1s2UqTqtMSgJpjJarCGx_image.png" size="52" width="1169" height="791" position="center" darkWidth="1169" darkHeight="791" showCaption="false"} ::: :::: *** ### Admin Logo Your admin logo will now display on the login screen for invited users or merchants. :::hint{type="info"} **Recommended size:** 512x512 pixels ::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/DTszyLIFE5fuJmzrj9PaF_image.png" size="52" width="1105" height="893" position="center" darkWidth="1105" darkHeight="893" showCaption="false"} ::: :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/a3JsHE90jAgcE3H_494s6_image.png" size="52" width="800" height="358" position="center" darkWidth="800" darkHeight="358" showCaption="false"} ::: :::: *** ## Color Schemes Customize the look and feel of your website and apps by creating and applying **Color Schemes**. You can define colors for different elements, such as the background, text, buttons, and other interface elements, allowing you to create a consistent look that matches your brand. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/onFUAeuK9MjrxJ3UUkWOc_image.png" size="50" isUploading="false" width="516" height="424" darkWidth="516" darkHeight="424" showCaption="false"} ### Create Multiple Color Schemes You can create multiple color schemes and use them for different sections of your website. This allows you to experiment with different color combinations while keeping each scheme separately configurable. :::hint{type="warning"} **Note: **Colour schemes apply only after you choose a default one. Until then, your storefront looks exactly as it does today. Sections can override the default scheme from their own settings ::: :::hint{type="info"} **Note:** Once you have selected a Color Scheme, you can go to different sections, such as the Header, Footer, and others, and apply the selected color scheme accordingly. ::: ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/7czxENbYZU7MDIhTZxhKT_image.png" size="50" isUploading="false" width="652" height="793" darkWidth="652" darkHeight="793" showCaption="false"} ### Customize Your Website Appearance Within a color scheme, you can customize options such as: - **Background:** Sets the background color used across applicable sections. - **Text:** Defines the color of text displayed within the scheme. - **Solid Button Background:** Sets the background color for solid buttons. - **Solid Button Text: **Sets the text color displayed on solid buttons. This gives you greater control over your website's overall appearance and makes it easy to create a design that aligns with your brand. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/o7IivpNlzXZk3ttoHw-hR_image.png" size="50" isUploading="false" width="389" height="458" darkWidth="389" darkHeight="458" showCaption="false"} ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/vXdBkY8XwqMsrmP2AmaUd_image.png) *** ## Colors Customize the overall look and feel of your storefront by configuring colors for the theme, buttons, header, footer, and navigation menus. These settings help you match your storefront's appearance with your brand identity. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/1zLm-fuQedxpTwMvgOKvS_image.png" size="52" width="542" height="410" position="center" darkWidth="542" darkHeight="410" showCaption="false"} :::hint{type="warning"} For more advanced color changes, custom CSS styling can be applied to all existing elements. ::: ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/sUvFHpRXOxa6xNeNyc3co_image.png" size="52" width="740" height="833" position="center" darkWidth="740" darkHeight="833" showCaption="false"} *** ## 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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/DwPJTAG9I2QAcJhc3oRj1_image.png" size="52" width="327" height="420" position="center" darkWidth="327" darkHeight="420" showCaption="false"} ### 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." ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/zHoLxrzu4TWaW65JXSfAm_image.png" size="52" width="629" height="598" position="center" darkWidth="629" darkHeight="598" showCaption="false"} ### 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](https://help.hyperzod.com/page), such as About Us and Contact Us. :::hint{type="info"} You can add links to your **custom pages**, such as **Terms of Use, Privacy Policy**, **Contact Us,** etc in the **header** and **footer** of your website and mobile apps by following the steps demonstrated below. ::: - Click on "Add" to create a new button for the Header Menu Sidebar. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/0Ewche63A9jOmEWiYd-St_image.png" size="52" width="509" height="562" position="center" darkWidth="509" darkHeight="562" showCaption="false"} - Enter the name for the button, which will be visible to customers in the Header Menu. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/ipqp2nYy8MkQllKQW4GEf_image.png" size="52" width="526" height="364" position="center" darkWidth="526" darkHeight="364" showCaption="false"} - Provide the link for the button, specifying the destination to which customers will be redirected upon clicking. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/UT7Vawu0dZ3YebiEfftrF_image.png" size="52" width="547" height="393" position="center" darkWidth="547" darkHeight="393" showCaption="false"} - Finally, click "Add" to include the button. Similarly, you can add more buttons in your Header Menu Sidebar. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/qeJ6Bqf5j2ESwANOqwV62_image.png" size="52" width="519" height="372" position="center" darkWidth="519" darkHeight="372" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/lWpY-_wfofILfT12s_9IQ_image.png" size="52" width="846" height="545" position="center" darkWidth="846" darkHeight="545" showCaption="false"} *** ### Copyright Text Add a custom copyright message, such as "Powered by \[Your Company Name]," to display in the footer of your website. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/iBEK-b2UQD1zfP763p_56_image.png" size="52" width="502" height="489" position="center" darkWidth="502" darkHeight="489" showCaption="false"} *** ### Footer Custom Text Input your business address or any other custom text to include it on the website's footer. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/DvTdk3KeKIeuS_fIubHUj_image.png" size="52" width="430" height="544" position="center" darkWidth="430" darkHeight="544" showCaption="false"} ::: :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/4lRUizKeCevlZJJULs7ZY_image.png" size="52" width="1166" height="782" position="center" darkWidth="1166" darkHeight="782" showCaption="false"} ::: :::: *** ### 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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/3ChwV3XH4APA8WrQ_P-86_image.png" size="52" width="468" height="597" position="center" darkWidth="468" darkHeight="597" showCaption="false"} - Enter the name for the button, which will be visible to customers in the Footer Menu. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/qYLQq-N-c-8Pm0X9yG1WH_image.png" size="52" width="509" height="378" position="center" darkWidth="509" darkHeight="378" showCaption="false"} - Provide the link for the button, specifying the destination to which customers will be redirected upon clicking. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/rjnxQM52iWEd8N8EkqMlz_image.png" size="52" width="512" height="394" position="center" darkWidth="512" darkHeight="394" showCaption="false"} - Finally, click "Add" to include the button. Similarly, you can add more buttons to your Footer Menu. :::hint{type="warning"} **Note: **To customize the footer, target the appropriate CSS selector and apply your desired styling using the [Custom Code section](https://help.hyperzod.com/branding-setup#custom-code-for-advanced-customization). ::: ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/nPzC_FHE1zGxlVTGgSJ6V_image.png" size="52" width="521" height="348" position="center" darkWidth="521" darkHeight="348" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/m4lFXDSrZ3MxRPqP0xhHL_image.png" size="52" width="1845" height="890" position="center" darkWidth="1845" darkHeight="890" showCaption="false"} *** ## 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. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/AL8rBHPn_N__ckgdNijmZ_image.png" size="52" width="570" height="890" position="center" darkWidth="570" darkHeight="890" showCaption="false"} ::: :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/ZEYt1LIOu1q0DJ3VcJ01q_image.png" size="52" width="1255" height="900" position="center" darkWidth="1255" darkHeight="900" showCaption="false"} ::: :::: *** ## 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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/imzesfRrfyn2IgbonELMW_image.png" size="52" width="497" height="359" position="center" darkWidth="497" darkHeight="359" showCaption="false"} ### Order Success Animation Customize or use the default splash animation that appears after orders are placed on the ordering apps. ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/e6h2xCKIBoDe1A6f-hwTh_image.png) *** ## 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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/DFCS2UczaC8W5eH2X4wtq_image.png" size="52" width="662" height="457" position="center" darkWidth="662" darkHeight="457" showCaption="false"} ### 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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/wfbj98LVmDtsqf5vM46qz_image.png" size="52" width="471" height="471" position="center" darkWidth="471" darkHeight="471" showCaption="false"} - **HTML Footer: **Inject custom HTML code into the footer section of your website, such as Live Chat, social media links, or scripts. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/jGjPOwW-nqtSdYYXgPpyf_image.png" size="52" width="521" height="470" position="center" darkWidth="521" darkHeight="470" showCaption="false"} - **CSS: **Apply global styles using custom CSS, affecting all pages and app screens. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/0bdM6jwYMChCvF6ZBS21P_image.png" size="52" width="545" height="464" position="center" darkWidth="545" darkHeight="464" showCaption="false"} ### 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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/cNJJPXx7dkZJHArTjjjcI_image.png" size="52" width="615" height="587" position="center" darkWidth="615" darkHeight="587" showCaption="false"} ### 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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/V_xg-lHjnVeMGFAIslZcW_image.png" size="52" width="671" height="895" position="center" darkWidth="671" darkHeight="895" showCaption="false"} *** ## 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. Choose a **Floating **style and **Frosted Glass **background for a modern, high-end feel, or keep it **Classic **and solid. By customizing the icons and labels, you create a seamless and exciting browsing experience. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/bezJBgYLxNU3HblYNHpEs_image.png) ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/NaVJUkh0TX1qrLWzblfpX_image.png) ::: :::: ### Navigation Style (The Overall Look) This section determines how the menu bar is positioned on the screen. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/NjOLP_9VPcB6gT0eqSDJj_image.png" size="50" width="460" height="427" position="center" darkWidth="460" darkHeight="427" showCaption="false"} ### Navigation Types - **Floating:** This creates a detached navigation bar that sits slightly above the bottom edge of the screen with rounded edges, providing a spacious and contemporary feel. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/xL2zq6EDpEEuq0BVHMliL_image.png" size="60" width="508" height="849" position="center" caption="Floating" darkWidth="508" darkHeight="849" showCaption="true"} - **Classic:** This creates a full-width navigation bar docked at the bottom of the screen, providing a solid, grounded appearance. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/bQPqEgA8kV4h_VXS0o2LH_image.png" size="60" width="452" height="847" position="center" caption="Classic" darkWidth="452" darkHeight="847" showCaption="true"} ### Background Types - **Opaque:** This applies a solid, non-transparent background color to the bar, ensuring high contrast and consistent visibility for all navigation icons. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/Lt7cF1j5Q-DSg5qvkrnIi_image.png" size="60" width="444" height="846" position="center" caption="Opaque" darkWidth="444" darkHeight="846" showCaption="true"} - **Frosted Glass:** This applies a semi-transparent, blurred effect that allows the colors of the underlying content to show through while maintaining text readability ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/sc7b7ZdOi58qJ3p8UvQUT_image.png" size="60" width="449" height="840" position="center" caption="Frosted Glass" darkWidth="449" darkHeight="840" showCaption="true"} ### 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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/6vuB0uE-Kj9bbV09P-VeR_image.png" size="50" width="475" height="810" position="center" darkWidth="475" darkHeight="810" showCaption="false"} - Click on each button to start customizing. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/e97WkdVETifdlGQ6eThPN_image.png" size="50" width="456" height="646" position="center" darkWidth="456" darkHeight="646" showCaption="false"} - **Upload Active State Icon: **Select an icon to represent the button when it is active. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/DIvojnMSIVOp0tIDlibPi_image.png" size="50" width="452" height="670" position="center" darkWidth="452" darkHeight="670" showCaption="false"} - **Upload Inactive State Icon:** Choose an icon to represent the button in its inactive state. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/PTMs4okp6-pvnwu8exAou_image.png" size="50" width="452" height="670" position="center" darkWidth="452" darkHeight="670" showCaption="false"} ### Icon Label Icon Labels add clear text descriptions under each icon. Use the **Hide all labels **toggle to create an icon-only look, and adjust the **Label color **to ensure the text remains sharp and easy to read against your background. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/WkOPYOROfpOdULjXXlFe5_image.png" size="50" width="457" height="657" position="center" darkWidth="457" darkHeight="657" showCaption="false"} ### Hide All Labels This toggle controls the visibility of the text beneath your icons. When switched on, the text descriptions are removed. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/SkRtacCoRVVt0aUtiKjAX_image.png" size="50" width="438" height="839" position="center" caption="Hide all Labels" darkWidth="438" darkHeight="839" showCaption="true"} ### Label Color This allows you to set a specific color for the navigation text. ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/cUX5HuzF_RB5Mic9aAMd1_image.png "Label Color") Once you’ve made all your customizations, click **Save** to apply them. ![](https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/WZWdB4KfA2hiviVq4Vek3_image.png) *** ## 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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/uoACDWBqNYCauxskMKEn__image.png" size="52" width="322" height="442" position="center" darkWidth="322" darkHeight="442" showCaption="false"} - **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. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/qw3HA8rrZLOcaaHROEbjh_image.png" size="52" width="483" height="595" position="center" darkWidth="483" darkHeight="595" showCaption="false"} - **Default** **Icon Style: **You have the option to make use of the default icons, if they align with your brand. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/b12Mulc6tuaOYnpiSsmxZ_image.png" size="52" width="424" height="594" position="center" darkWidth="424" darkHeight="594" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/2p23wDB45cMSX6JYMY-oK_image.png" size="52" width="1239" height="402" position="center" darkWidth="1239" darkHeight="402" showCaption="false"} - **Upload Custom Icons:** You also have the option to upload your own custom-designed icon images for each social media platform. ::Image[]{src="https://api.archbee.com/api/optimize/A6k4A417O1V2DGm4H5kN0/94QG7VXUoBglOFPMdI4dk_image.png" size="52" width="386" height="606" position="center" darkWidth="386" darkHeight="606" showCaption="false"} *** ### Frequently Asked Questions (FAQs) :::ExpandableHeading **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). ::: *** :::ExpandableHeading **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. ::: *** :::ExpandableHeading **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. ::: *** :::ExpandableHeading **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. ::: *** :::ExpandableHeading **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!"* ::: *** :::ExpandableHeading **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. ::: *** :::ExpandableHeading **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. :::