Skip to main content

Global Branding

Global Branding allows you to control your organization’s logos, colors, buttons, form styles, and other design elements across your AIQ Ecommerce experience.

Updated today

If you make changes to your brand settings (colors, fonts, etc.) you may affect your menu's Accessibility.

Access Global Branding

Navigate to Organization > Design > Branding

Note: While we recommend setting your branding at the organizational/global level, you can also further customize your branding per store, see Branding.

Logos

Light Mode

Full Logo

  • 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.

Square Logo

  • 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

Full Logo

  • 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.

Square Logo

  • 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

  1. Select Select Image.

  2. When your native file picker opens, select logo and click Open.

  3. To remove image, select Remove image.

Colors

Color Definitions

Brand Color


Applies to many callouts throughout your website, including:

  • Links

  • Add button (+) on the product card

  • Selected radio buttons

  • Selected checkboxes

  • Icons on the user's account page

Error / Danger Color
Used for:

  • Error text

  • Discount text and tag (on product card when you see a discounted price)

  • Error toast notifications on the menu

Success Color
Used for:

  • Discounted totals

  • Success toast notifications on the menu

Primary Text Color
Used anywhere there is primary text on your website, such as:

  • Headers

  • Product names

  • Pricing

Secondary Text Color
Used anywhere there is secondary text on your website, such as:

  • Subheaders

  • Secondary information

Primary Background Color
Used anywhere there is primary background color on your website, such as:

  • Product tiles/cards background

  • Header backgrounds

Secondary Background Color

  • Used anywhere there is secondary background on your website.

Menu Note Background Color

  • Used as the background for the  that appears on the home screen of your menu.
    This is light blue by default.

Menu Note Text Color

  • Same as above but for the text that is on the menu note.

Change Colors

To change brand colors:

  • Manually enter a hex code in the appropriate field
    ​OR

  • Click on the color swatch to open the color picker

  • Select appropriate color

  • Click anywhere outside the color picker to close

Examples on Menu

Buttons

Primary Buttons

  • Used across the menu, carousel buttons, and cart total bubble.

Secondary Buttons

  • 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

  • Visible on the checkout screen.

Change Button Colors

To change button colors:

  • Manually enter a hex code in the appropriate field
    ​OR

  • Click on the color swatch to open the color picker

  • Select appropriate color

  • 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

  • Radio button border colors

Change Form Field Colors

To change form field colors:

  • Manually enter a hex code in the appropriate field
    ​OR

  • Click on the color swatch to open the color picker

  • Select appropriate color

  • Click anywhere outside the color picker to close

Fonts

See Custom Fonts instructions.

Custom Header

See Custom Header instructions.

Head Code

See Custom Head Code 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.

FAQ

Can I use custom CSS or scripts to further style my AIQ Ecommerce menu?

We love seeing retailers make their menus their own! That said, please note that custom CSS added in the Head Code field is subject to break. Our platform evolves frequently, and changes we make may override or break custom code.

To keep your menu stable, we recommend using the built-in customization options for colors, fonts, and layouts. AIQ cannot take responsibility for bugs or display issues caused by unsupported custom code.

If you want further customization than what our out-of-the-box menus offer, you can use our API to build a custom menu, see .

Can I customize my branding per store?

Yes, see Branding.

Need Help?

If you need assistance, reach out to AIQ Support anytime via chat widget within your AIQ Dashboard.

Did this answer your question?