Styling your Online Menu with Custom Branding

What is Custom Branding?

Buddi's Custom Branding tool lets you personalize your online menu to match your retail brand. You can change colors, logos, button styles, and more — no coding required.

Why use it?

• Build brand consistency across platforms

• Stand out from competitors

• Improve customer trust and recognition

Featuring the online menu of Buddi's demo store brand. buddi-licious is a flavour-forward cannabis brand crafted for the bold, the mindful, and the connoisseurs. Whether a curious newcomer or a seasoned explorer, our customers value quality, diversity, and purposeful products that go beyond the high.

Video Tutorial: How to Apply Custom Branding to your Online Menu

This video walks you through the process of Custom Branding an online menu, using Buddi's demo store brand as an example. You'll learn how to match your Buddi menu to your brand colors, including tips for managing Hex codes, uploading logos, and styling menu buttons and filters.

How to Apply Custom Branding

1. Log into the Admin Portal

   • Go to app.buddi.io and sign into your Admin Account.
      

2. Navigate to Custom Branding

   • From the left menu, select Custom Branding > Online Menu: Custom Branding.
      

3. Prepare Your Brand Colors

   • Use exact color codes (Hex codes) for perfect visual matching.

   • No codes? Extract them from your logo using imagecolorpicker.com.

   • Email support@buddi.io if you would like a BRANDING KIT TEMPLATE (PDF) to store your Hex codes.
      

4. Paste Colors into the Branding Tool

   • Enter Hex codes in the corresponding fields (colors for links, button backgrounds, borders, text, etc.)

   • Use the built-in preview to see live changes.
      

5. Upload Your Logo (Optional)

   • Under Custom Header, upload a logo and enter a clickable URL (e.g. your homepage).
      

6. Customize Buttons + Filters

   • Style Primary Buttons, Secondary Buttons, Filter Buttons, and Product Tags to match your palette. You can use the logo in the Custom Header as a guide.

   • Adjust border radius for rounded or square styles.
     
     

7. Show Store Selector (Optional)
   
   • This feature shows your store address and hours at the top of the menu. Multi-store chains can change locations by clicking on it.
   • We recommend having this function enabled, especially if you have multiple locations.
     
     

8. Hit Save

   • Always click 'Save' at the top right before exiting.

   • We recommend saving your work along the way.
     

   • Refresh your live menu in a second tab to confirm changes.
       

Best Practice

✅   DO:

• Always click Save after customizing (top-right corner)
  • Use consistent Hex codes from your branding kit or extract from your logo
  • Use imagecolorpicker.com to upload an image containing your branding colours if you do not have Hex codes
    
    
• Use Buddi’s BRANDING KIT TEMPLATE (PDF) to store your Hex codes, or add them to an Excel doc for easy copy+paste
  
  
• Preview all three views (desktop, tablet, mobile) before finalizing
  
  
• Check your live menu as updates are made → refresh your browser
  
  
• Test your logo link → it should redirect to your homepage or a relevant page
  
  
• Use high-resolution PNG logos with transparent backgrounds if possible
  
  
• Reach out to support@buddi.io if you have menu formatting issues
  
  
• Want to make advanced style changes or working with a web dev?
  • Apply CSS coding in the Admin Portal > Store Settings > Online Menu: Tags. Use the ‘Inspect’ tool in your browser to preview changes before saving it in Buddi
    
    
  • You may need to create an additional account (in Admin Portal > Staff Management) for him/her to access Store Settings
    

❌  DON’T:

• Don’t assume the preview = saved
  
  
• Don’t skip branding the ‘Tablet App’ if you're using in-store kiosks → it’s a separate setting
  
  
• Don’t make hover and active button colors the exact same color → they affect the user experience
  
  
• Don’t paste full URLs as Hex codes → copy just the 6-digit color code
   

⚠️ Common Pitfalls to Avoid