Customizing Your Theme:
A Visual Guide
A walkthrough of every customization option available in your Buddi designer.
This guide accompanies the Buddi theme customization video and covers every option available in the designer in written form. Use it alongside the video for a complete walkthrough, or refer back to it whenever you want a quick reminder of what a specific setting does.
The designer is a live editor, meaning any changes you make are reflected in a preview of your store in real time. You can experiment freely and see exactly how your site will look before saving anything.
How to access the designer: Log into your Buddi admin, navigate to Buddi Sites, and open the Designer. Your store preview will load on the right side of the screen. Each section of your site has its own set of controls in the panel on the left. |
Theme Colours
Theme colours are the foundation of your store’s visual identity. Setting these correctly ensures your website feels consistent and on-brand from the moment a customer lands on it.
Primary Colour
This is your brand’s main colour. It appears on buttons, links, highlights, and other key interactive elements throughout your site. Choose a colour that matches your logo or brand guidelines. Most retailers use their primary brand colour here.
Surface Colour
This is the background colour for your site’s content areas. Most stores will use white or a very light neutral here to keep the focus on products and text. If your brand leans toward a darker aesthetic, you can experiment with a darker surface colour.
Tip: Your primary and surface colours work together. If you choose a dark surface colour, make sure your primary colour still provides enough contrast to be readable on top of it. The designer will automatically adjust certain text colours to maintain readability. |
Navigation and Header
The header is the first thing customers see when they arrive on your site. It contains your logo and the main navigation for your store. Keeping it clean and on-brand builds immediate trust.
Logo
Store Logo
Upload your store’s logo here. This will appear in the top navigation bar across every page of your site. Use a version of your logo with a transparent background (PNG format) so it sits cleanly against your header colour. If your logo includes your store name, you may not need to add any additional text.
Tip: If your logo is very wide, it may appear small at the height the navigation allows. A square or stacked version of your logo often works better in this space than a wide horizontal one. |
Message Banner
The message banner is a full-width strip that appears at the very top of your site, above the navigation. It is ideal for time-sensitive announcements, promotions, or store-wide notices.
Show Banner
Toggle this on to make the banner visible on your site, or off to hide it. When you have nothing to announce, turning it off keeps your header clean.
Message
The text that appears in the banner. Keep it short and direct since space is limited. Examples: “Free in-store pickup on all orders” or “Now open Sundays 10am – 6pm.”
Background Colour
The colour of the banner strip. Use a colour that stands out from your main header so the banner draws attention without clashing with the rest of your design.
Text Colour
The colour of the text inside the banner. Make sure it has strong contrast against your background colour so it is easy to read.
Allow Customers to Close the Banner
When this is turned on, a small close button appears on the banner so customers can dismiss it. This is a good option when your message is informational but not critical. If the banner contains important information (such as a change in hours), you may want to keep this turned off so it stays visible.
Homepage
Your homepage is made up of several individual sections, each of which can be turned on or off and customized independently. This gives you a lot of flexibility in how your store presents itself to first-time visitors.
Each section in the designer has a visibility toggle that lets you show or hide it on your live site. You can rearrange certain sections to change the order in which they appear on the page.
Hero Carousel
The hero carousel is the large banner area near the top of your homepage. It is the first thing most visitors look at and one of your best opportunities to make a strong first impression or highlight something important.
The carousel can contain multiple slides that cycle automatically. Each slide can either be a static image with a link, or a featured promotion pulled from your Buddi system.
Adding and managing slides
- Click the settings icon on the Hero Carousel section in the designer panel.
- Click “Add Slide” to create a new slide.
- Choose the slide type: “Static” for a custom image you upload, or “Featured” to display one of your active promotions.
- For a static slide, upload your banner image and set the link destination so clicking the banner takes customers somewhere useful (such as a product category page).
- For a featured slide, select which promotion you want to display. The slide will pull the promotion’s details automatically.
- Repeat to add as many slides as you need. Most stores perform best with two to four slides rather than a long carousel.
Image tip: Use high-resolution images sized for wide screens (recommended: 1920 x 700 pixels or similar). Avoid putting important text directly on banner images since it may be cropped on mobile devices. |
Featured Products
The featured products section displays a curated selection of products on your homepage. This is a great way to highlight new arrivals, staff picks, or seasonal items without customers having to browse the full menu.
Show Section
Toggle on to display this section on your homepage, or off to hide it.
Section Title
The heading that appears above the featured products. Examples: “Staff Picks,” “New Arrivals,” or “This Week’s Highlights.”
Section Subtitle
A short line of supporting text below the title. Optional, but can add context. Example: “Hand-picked by our team, updated weekly.”
Collection
Select which product collection to pull from. Any collection you have set up in Buddi can be used here. If you haven’t created a dedicated collection yet, this is a good reason to do so.
Maximum Number of Products
Set how many products appear in this section. Most layouts display best with four to eight products.
Shop by Category
The category links section displays visual shortcut tiles that help customers jump directly to a product category. It reduces the number of clicks a customer needs to find what they’re looking for.
Show Section
Toggle on to display this section, or off to hide it.
Section Title
The heading above the category tiles. “Shop by Category” is a straightforward default, but you can customize it to match your store’s voice.
Section Subtitle
Optional supporting text below the title.
Category Visibility
Each product category can be individually shown or hidden within this section. If you don’t carry products in a particular category, hide it so customers aren’t directed to an empty page. The order in which categories appear here also determines their order in your navigation menu.
Tip: Only show categories you actively carry. A customer who clicks a category and finds nothing loses confidence in your store. Hiding empty categories keeps the experience clean. |
FAQ Section
The FAQ section lets you add a list of frequently asked questions directly on your homepage. This is useful for addressing common questions about your store, your products, or the ordering process before customers have to reach out.
From an SEO standpoint, FAQ content is also valuable. Google sometimes pulls FAQ answers directly into search results, which can give your store additional visibility.
Show Section
Toggle on to display the FAQ section, or off to hide it.
Section Title
The heading above the FAQ list. “Frequently Asked Questions” is standard, but you can customize it.
Section Subtitle
Optional supporting text. Can be used to invite customers to reach out if their question isn’t listed.
Adding FAQ items
Click “Add FAQ Item” to add a new question and answer pair. For each item, enter the question as customers would ask it, and provide a clear, direct answer. You can add as many items as needed.
Some questions worth including: your store’s hours and location, whether you offer online ordering or in-store pickup, your ID policy, whether you have a loyalty program, and how to reach customer support.
Custom Block
The custom block is a flexible section that lets you add any content you like to your homepage using HTML. This is an advanced option intended for retailers who are comfortable with basic web markup or who have a developer helping them.
Show Section
Toggle on to display the custom block, or off to hide it.
HTML Content
Paste or write your custom HTML here. This could be anything from a simple promotional message to an embedded map, a newsletter sign-up form, or custom-styled content. The content is sanitized before being displayed, so standard HTML works as expected.
Note: If you are not comfortable with HTML, leave this section hidden or reach out to Buddi support for guidance. Incorrectly formatted HTML can affect how other parts of your page display. |
Promotions
The promotional modal is a pop-up window that appears to visitors on your site. It is a powerful tool for capturing attention, growing your email list, promoting a sale, or sharing important information with customers as soon as they arrive.
Enable Promotional Modal
Toggle this on to activate the modal. When active, it will appear to visitors based on the trigger you configure below. Toggle it off when you don’t have an active promotion.
Heading
The title of the modal. This is the first thing customers read, so make it compelling and relevant to what you are promoting. Examples: “Join Our Loyalty Program,” “20% Off This Weekend Only,” or “Welcome to Our New Website.”
Content Type
Choose how you want to display the body of the modal:
HTML
Write or paste custom HTML content into the modal body. This gives you full control over the layout and content, including text, images, links, and sign-up forms.
Link to a PDF file (such as a menu or promotional flyer) that will be displayed inside the modal. Enter the URL of the PDF in the field provided.
Trigger
The trigger controls when the modal appears to a visitor. Choose the option that best fits your goal:
On Load
The modal appears immediately when a customer lands on your site. Use this when your message is urgent or time-sensitive and you want every visitor to see it right away.
Timed Delay
The modal appears after a set number of seconds. This gives customers a moment to get oriented on your page before the modal interrupts them. A delay of five to ten seconds is a good starting point.
Exit Intent
The modal appears when the system detects that a customer is about to leave your site (for example, moving their cursor toward the browser’s close button). This is a less intrusive option that catches customers at the point they might otherwise leave.
Tip: Modals that appear immediately on every visit can feel intrusive. Consider using a timed delay or exit intent trigger, and only keeping the modal active for the duration of a specific promotion rather than leaving it on permanently. |
Footer
The footer appears at the bottom of every page on your site. It typically contains contact details, navigation links, social media links, and any legal or compliance information your store is required to display. A well-configured footer gives customers easy access to important information no matter which page they are on.
Social Links
Add links to your store’s social media profiles so customers can follow you. The following platforms are supported:
- X (formerly Twitter)
- YouTube
- TikTok
- Bluesky
- Threads
For each platform you want to display, enter your profile URL and toggle its visibility on. Hide any platforms you don’t use so your footer doesn’t show broken or empty links.
Section Title
The label that appears above your social links in the footer. The default is “Follow Us” but you can change it to anything that fits your brand.
Quick Links
The quick links section lets you add a column of custom links in your footer. This is typically used for links to pages like About Us, Blog, Contact, or any other page you want to make easy to find.
Section Title
The label that appears above your quick links. The default is “About Us” but you can change it to something like “Explore” or “Quick Links.”
For each link, enter the text that will appear (the label) and the destination it should point to. You can link to pages within your Buddi site or to external URLs.
Store Information
The store information section displays your contact details and any compliance information your store is required to show. Each item can be individually shown or hidden.
Section Title
The label above this section in the footer. The default is “Customer Service.”
Phone Number
Enter your store’s phone number. Toggle it on to display it in the footer, or off to hide it. If you operate multiple locations, this will display the number associated with the store location being browsed.
Address
Toggle on to display your store’s address in the footer. The address is pulled from your store details, so make sure those are accurate and up to date.
Contact Us Link
Toggle on to display a “Contact Us” link in the footer that directs customers to your contact page. Only turn this on if you have your contact page set up and active.
License Badge
Upload the official license badge required by your provincial or regional regulator. In Ontario, for example, retailers are required to display their license badge on their website. Toggle on to make it visible in the footer.
License Number
Enter your store’s license number as issued by your regulator. This will appear in the footer below the license badge. Toggle on to display it. This is a requirement in some provinces, including Ontario.
Questions? Contact your Buddi account manager or visit our support centre.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article