Two ways to style your online menu


1. *Newest Method*
 
Admin Portal > Custom Branding > Online Menu: Custom Branding > the right sidebar allows for color customizations using our color selector or specific Hex codes. Changes can be previewed before hitting Save.

How to find Hex codes:

  1. Locate an element on your website that's using the desired color. Right-click to use 'Inspect'. This will reveal the Hex code, which is usually 6 digits long (containing letters and numbers). Copy and paste the code into a list somewhere.
    or
  2. If you are using the in-store Tablet App, you can access the Kiosk: Custom Branding screen to get your Hex codes.

 
 

2. *Original Method*
 
Admin Portal > Store Settings > Online Menu: Tags


How it works: Once the menu has loaded, right-click to use 'Inspect' on the internet browser to find the ID / Class name of the elements to be targeted and changed. Changes can be entered and previewed from the internet browser. If you are happy with the change, highlight the changes to copy and paste it into 'Store Settings > Online Menu: Tags' of the Admin Portal.


See below for quick styling tips using this method.




Quick styling tips for a better customer experience





Download Graphics for Your Collections and Featured Products:

https://drive.google.com/drive/folders/1EXLicZhpIqLE8r4BGHkaHNc9lyXg4yMN?usp=sharing



Some IDs you can target with CSS:

#bdi-change-store {
// Sample code here. I.e display: none; to hide this section. 
}

#buddi-online-menu-nav {
// This is wrapping the navbar could be used for fix it's position or make it sticky. 
}

#bdi-nav-button {
// This targets the hamburger icon menu. 
}

#bdi-cart-button {
// This targets the cart button. 
}

#buddi-online-menu-filters {
// This targets the filters section. 
}

#menu-content {
// This targets the area where product tiles are shown. 
}

#buddi-online-menu {
// This is wrapping the entire menu
}