Global Branding

if you make changes to your brand settings (colors, fonts, etc ) you may affect your menu's accessibility docid\ mm6fbipniaxgkpxw6tvo3 to access global branding navigate to organization > design > branding logos light mode the full logo is used on the web + tablet breakpoints of your menu and in your emails upload a png file with either a transparent or a white/light background this will be displayed in your email communications with customers we recommend an image with a max height of 300 pixels the square logo is used on the mobile breakpoint of your menu and in the aiq ecommerce app header we recommend an image with a max height of 300 pixels use a png with a transparent or white background dark mode the full logo is used on the web + tablet breakpoints of your menu and in your emails upload a png file with either a transparent or a black background this will be displayed in your email communications with customers we recommend an image with a max height of 300 pixels the square logo is used on the mobile breakpoint of your menu and in the aiq ecommerce app header we recommend an image with a max height of 300 pixels use a png with a transparent or black background favicon the favicon appears in the browser tabs of your menu use a 32 x 32 pixel image for your favicon if your favicon is larger then this, it will not work uploading logos to upload logo, choose 'select image' when your native file picker opens, select logo and click 'open ' to remove image, select 'remove image ' colors brand color will apply to many callouts throughout your website, including links, add button (+) on the product card, selected radio buttons, selected checkboxes, and icons on the user's account page error / danger color is used to for error text, discount text and tag (on product card when you see a discounted price) and error toast notifications on the menu success color is used for discounted totals and success toast notifications on the menu primary text color is used anywhere there is primary text on your website, such as headers, product names, pricing, etc secondary text color is used anywhere there is secondary text on your website, such as subheaders, secondary information, etc primary background color is used anywhere there is primary background color on your website, such as product tiles/cards background, header backgrounds, etc secondary background color is used anywhere there is secondary background on your website change colors to change brand colors, manually enter hex code in the appropriate field alternately, click on color swatch to open the color picker select appropriate color and click anywhere outside the color picker to close examples on the menu buttons primary buttons are used across the menu, carousels buttons, and cart total bubble secondary buttons are used throughout the menu note the "+" add to cart buttons on the product cards follow the secondary button styling except for the text color the + icon uses your brand color loyalty button is visible on the checkout screen change button colors to change button colors, manually enter hex code in the appropriate field alternately, click on color swatch to open the color picker select appropriate color and click anywhere outside the color picker to close form fields use border color and border radius color inputs to adjust the design of form fields on your website form field colors also apply to checkbox borders and radio button border colors change form field colors to change form field colors, manually enter hex code in the appropriate field alternately, click on color swatch to open the color picker select appropriate color and click anywhere outside the color picker to close fonts see custom fonts docid\ ksatownfp7aoj2qvobf6a instructions custom header see custom header docid\ cdp1fmxzvshccwrhpkd v instructions head code see custom head code docid\ f6pekunevvspcwbw j0rf instructions custom files upload your own js, css, and image ( svg, png, jpg) files to use in the "head code" field you can also upload images if you need them in your custom header code