Oddle's white labelled platform allows you to customise the look and feel of the shop without the need for any code or design expertise. The look and feel of your Oddle Shop is an important factor which affects your customer's purchase journey. Create a strong first impression by giving your customers an unforgettable shopping experience that is coherent with your brand.
1. Getting Started
You can customise your Oddle Shop by using the Oddle Shop Editor. You can access the editor from your Oddle Web Dashboard by going to the "Editor" Page.
In the Web Dashboard, select a brand from the dropdown.
Scroll down and under Channels, click Editor.
The customiser comes with a preview mode which allows you to view your Oddle Shop in desktop or mobile mode and a toolbar on the left which allows you to make changes.
The toolbar is organised into the 2 following categories: Section and General Settings.
Section contains editable components in a page and determines the layout. When you first open the customiser, you will be shown the sections for the Menu page. To navigate to other pages, simply select a page from the drop-down on the top right.
General Settings are settings that apply throughout your Oddle Shop.
2. General Settings
2.1 Editing colours
Changing the colours of your Oddle Shop greatly affect the look and feel. Pick colours that express your brand. You can choose to change the following 6 colours by using the colour picker:
Section headings font - refers to the colour of text used as section titles
Headings font - refers to the colour of all headings text
Body font - refers to the colour of all body text
Lines and borders - refers to the colour of lines or borders used in elements
Container - refers to the background colour of elements or components
Background - refers to the background colour of a page
💡 For web accessibility, we strongly recommend choosing a Headings and Bodyfont colour that stands out against the container colour. For example, pairing a White Headings and Body font colour against a Black containerworks well.
2.2 Editing typography
Choose a serif font for a modern look or a cursive font to add a touch of elegance.
2.3 Editing buttons
2.4 Choosing a preset
3. Section Settings
3.1 Adding a section
You can easily add a dynamic section to your menu page by clicking on "Add new section" in the toolbar and then selecting a section from the list. The newly added section will appear at the bottom of your menu page.
3.2 Removing a section
To remove a dynamic section, simply click on the section you wish to remove and click on the "Remove section" button.
3.3 Rearranging a section
Dynamic sections can easily be rearranged to your desired layout. To rearrange a dynamic section, simply look for the "drag" icon next to the section's name and drag it to a different location. Your page layout will follow the arrangement of sections in the toolbar.
3.4 Hiding a section
3.5 Editing Buttons in Sections
Buttons in Oddle Shop are highly configurable. There are 2 kinds of configuration for buttons: the color and style, which can be configured at the general settings level, and the button label and button link, which will be configured within selected sections. Button labels and Button Links can only be configured for buttons in wide banner and slideshow only.
Button label
The button label refers to the text that appears on the button. You can set the desired text by typing the text in the ‘Button Label’ field. If left blank, the button will not show up on your Oddle Shop.
Button Link
The button link refers to the event that happens when your customer clicks on the button. There are 2 types of events that can be configured on the buttons:
External Link - redirects user to another site (e.g corporate landing page, survey, etc)
Internal Redirection - accessed by clicking on the Button Link field
Redirect to page - direct your customer to another page in your Oddle Shop (Pages > Reservation, Privacy policy, Terms and Conditions etc)
Action - allows your customer to start the online ordering process (Actions > Select Dining preferences)
4. Editing the Header Section
In the header section, you can add your brand's logo, add a shop name, add a homepage URL, change the header background colour and change the navigation link font colour.
Logo
To add a logo:
Click on the "Upload" button.
Choose a file from your computer or drag an image to the image picker.
After selecting an image, use the image picker tool to crop the image to what you require and click on "Done".
We recommend uploading a logo that is at least 150x150px in dimension and using a .png file with a transparent background. If you wish not to show a logo, you can use the "Show logo" toggle to hide your logo.
Homepage URL
By default, your logo and your shop name will link to your Oddle Shop's URL. If you wish to, however, link it to another website (i.e. your official brand website), simply paste the link in the text box.
Shop name
Header colours
5. Editing the footer section
In the footer section, you can change the footer background colour and change the navigation link font colour and add up to 4 content blocks.
6. Editing the Wide Banner Section
The wide banner section allows you to create a modern, attention-grabbing section for your Oddle Shop and helps you to direct customers to desired call-to-actions such as ‘Order Now’ or ‘Find A Table’.
Here’s how to make the best of your wide banner section:
Image Settings
Upload Image
The image for the wide banner is first thing that captures the visitor's attention. Make sure to upload a beautiful photo that showcases your restaurant.
Click on the ‘Upload Image’ button
Choose a file from your computer or drag an image to the image picker
After selecting an image, use the image picker tool to crop the image to what you require and click on ‘Done’.
Ensure that your images do not contain too much text or important details near the edges as it might be cropped out due to dynamic rendering of image depending on screen size.
Image Layout
Image layout lets you determine how much height the uploaded image takes up. There are 3 options to choose from:
Small - banner will fill up about half of the screen, suitable for separating section, header or brand quotes
Large - banner will fill up entire screen, suitable for creating a modern landing page for your restaurant with call-to-action buttons included.
Medium - an intersection between small and large option, can be interchangeably used as landing banner or section header.
Overlay Colour
Overlay colour allows you to cover the image with a light layer of colour, allowing your text to stand out more or to emphasise your brand colour. Ensure that you test a variety of overlay colours to see what works best with your uploaded image. When selecting the overlay colours, do also keep your desired text colour in mind.
If your image colour is too vibrant, you can set the overlay to black and text colour to white to ensure that the text stands out.
Customise your banner message
Type in your desired text in the text boxes labelled headings text and subheadings text under Text settings. You can also customise the text colour to better suit the image and overlay that you’ve selected. Ensure that the text colour is compatible with the overlay colour.
Include Call-to-action Buttons
Direct you customers to make a reservation or kickstart their order process via call-to-action buttons. Call-to-action buttons follow the standard configuration of all buttons in Oddle Shop. You can learn how to set up buttons here.
7. Editing the Slideshow Section
Slideshows are a great way to showcase or tell customers about your brand and the types of services that you offer (i.e You could use the slideshow to tell your customers where you deliver to and about your delivery fees). In the slideshow section, you can:
Setting auto-scroll interval
Create slides
Setting auto-scroll Interval
You can choose to have the slides in your slideshow auto-rotate by toggling the ‘Auto-scroll’ switch. To choose the auto-scroll interval, simply select your desired preference from the drop-down list.
Creating Slides
To add a slide, click on ''Add new slide'. You may add up to a maximum of 5 slides. In a slide, you can upload an image, add text descriptions as well as include call-to-action buttons.
Upload Image
Click on the ‘Upload Image’ button
Choose a file from your computer or drag an image to the image picker
After selecting an image, use the image picker tool to crop the image to what you require and click on ‘Done’.
If you do not have a graphic designer to help you with banner designs, you may wish to consult your account manager about our free templates banner.
Customise Text and Buttons
You can add accompanying text and buttons to the slide but toggling the 'Enable text & button' switch. If it is enabled, you will be able to customise your text, overlay color & position as well as include call-to-action buttons.
Text
Customise the text to be displayed by typing in your desired text in the text boxes labelled 'Headings text' and 'Subheadings text'.
Call-to-action Buttons
Call-to-action buttons follow the standard configuration of all buttons in Oddle Shop. You can learn how to set up buttons here.
Setting Color
The text and button configured above will render on an overlay in the picture. You can set the colour and transparency of overlay to match your branding or to make the text and buttons more visible. Ensure that you test a variety of overlay colours to see what works best for you. A different overlay colour can be set for smaller devices, ensure that your Oddle Shop is customisable to your different needs.
Besides overlay colour, text colours can be configured as well. Just like overlay colour, a different text colour can be set for smaller devices.
Position
Besides colour and transparency, you can also choose the position where the overlay appears. There are 3 options to choose from:
Right
Center
left
8. Editing the Products Section
In the products section, you can change the layout of how your products and product categories are displayed. Choose an appropriate layout based on your menu.
Product layouts available:
Grid - Great for menus that place a strong emphasis on visuals and product images.
List - Great for menus that have long product descriptions.
Product category layouts available:
Side - Great for showcasing all categories at once.
Top - Great for menus with a large number of categories.
The product category layout only applies to the desktop view of yourOddle Shop. On mobile, the categories are displayed as a top sticky dropdown bar.
By default, all products without images will have a default image in its place. You may wish to turn off all images in your products section if you do not have images on hand or if your brand concept does not use images. To do this, toggle off the "Show product image" switch. Additionally, if "List" is selected as the product layout, you will be able to turn off the default image if there are no product images. - Use this option when you only have product images for the minority of your products.
If you need to edit your product listing, you can simply click on the "Edit products" hyperlink.
9. Editing the Product Page Section
In the product page section, you can choose to display images for your product options. Settings selected here apply to all product pages. To edit the product page settings, simply click on a product or use the drop-down on the top right of the editor to navigate to a product page.
Images for options
Images for options are a great way to show your customers what the options for your product look like. To turn on images for options, toggle on the "Show images for options" switch. You can also choose to toggle on the "Use default image if no image for options" switch if you do not have images for all of your options.
10. Editing the Reservation Section
This section is only available in your shop editor if you have Reservations enabled on the new merchant admin. To sign up for reservations, you can contact your account manager or click on 'Sign up for reservations' below. To learn more about enabling reservations, click on 'Learn more about reservations' instead.
To allow your customers to make reservations while browsing your Oddle Shop, you can add a Reservation section. Add a reservation section to your menu page by clicking on ‘Add new section’ in the toolbar and then selecting “Reservation” from the list.
By default, once reservations have been enabled on your Oddle Shop via your Merchant Admin, a separate reservations page housing a reservations section will be added to your Oddle Shop. To access and edit the page, simply click on the page navigation dropdown beside the ‘Publish’ button on the top right and click ‘Reservations’.
Customise your reservation section to make it relevant to your visitors through the following methods:
Add an Image
The image serves as a background for the reservation section. Upload an image that fits in with your restaurant's theme and beautify your reservation section.
Upload Image
Click on the ‘Upload Image’ button
Choose a file from your computer or drag an image to the image picker
After selecting an image, use the image picker tool to crop the image to what you require and click on ‘Done’.
Ensure that your images do not contain too much text or important details near the edges as it might be cropped out due to dynamic rendering of image depending on screen size.
Image Layout
There are 2 different image layout options available, each resulting in a different look. Choose between 2 different styles to create a look that best suits your Oddle Shop. For example, choosing cover better showcases wider photos. (aspect ratio 16:9 and above)
Options available are:
Cover
Background
Overlay Colour
The overlay colour allows you to change the colour of your image slightly, allowing your text to stand out more or to emphasise your brand colour. Ensure that you test a variety of overlay colours to see what works best with your uploaded image. When selecting the overlay colours, do also keep your desired text colour in mind.
If your image colour is too vibrant, you can set the overlay to black and text colour to white to ensure that the text stands out.
Customise your message
Type in your desired text in the text boxes labelled headings text and subheadings text under the Primary text settings. You can also customise the text colour to better suit the image and overlay that you've selected. Ensure that the text colour is compatible with the overlay colour.
Include Additional Details
You can add text under the reservation form by typing the details in the text boxes labelled headings text and subheadings text under the Secondary text settings. We suggest using this section to inform your customers about promotional announcements or notices. You can use the rich text editor to format the information to better suit your customers.
11. Editing the Image with Text Section
12. Editing the Custom HTML Section
Use of this section requires familiarity of web languages such as HTMLand JavaScript. Adding custom code to your site falls outside the scope of our support. Oddle reserves the right to revoke use of this section if any abuse or non-intended usage is found.
13. Editing the Marketing Popup Section
The marketing popup with newsletter signup is a useful tool to help you obtain the email addresses of website visitors for future email marketing.
Adding Marketing Popup and Newsletter Signup
You can add a marketing popup to your menu page by clicking on "Add new section" in the toolbar and then select Marketing popup from the list. The newly added section will appear under the Header section in the toolbar, and it is ready for use right away!
Editing Marketing Popup and Newsletter Signup
You can offer a promotion code after newsletter signup to reward your subscribers!
Showing the right message at the right time can yield a proper response from your visitors. There are 3 popup trigger types to control when your popup should appear.
Remember to publish your marketing popup once you are done, or your changes made will not be reflected! You can then view or download your list of newsletter subscribers under the Customers tab.
The marketing popup feature can also be used for announcement purposes without the newsletter signup section. The newsletter signup section is turned on by default when the marketing popup section is added. You can go to the Newsletter Signup section and toggle off the "Enable Newsletter Signup". This removes the newsletter signup email address input box in the marketing popup, and the popup shown after newsletter signup.
For more information regarding Advanced Marketing Popup Settings, click here.
14. Editing the Promotion Filmstrip Section
To display your promotions on your menu page, you can add a Promotion Filmstrip. Ensure that "Show on shopping cart" under your promotion settings has been ticked. For more information regarding the promotion settings, click here.
To add headings text, type your desired text in the text box labelled "Headings Text".
You can also choose to align your text to the left, center or right using the text alignment drop-down.
Toggle on "Show images for promotion" if you wish to display your promotion name.
15. Editing the Instagram Feed section
Adding an Instagram feed to your Oddle Shop is a great way to showcase your mouth watering food photos from your Instagram account. Give your customers alternative ways to interact with your brand and grow your social media following.
To connect your Instagram account:
Simply click on the "Connect Instagram Account" link
Login to your Instagram account and authorise the application
Copy and paste the generated access token to the "Instagram Access Token" field
Your Instagram feed will now be displayed!
You can also change the headings and subheadings to your liking and set the number of posts to be displayed at any one time.
16. Publishing your Oddle Shop
Once you are happy with the styling of your Oddle Shop, you can publish your Oddle Shop by clicking on the Publish button located at the top right of the editor. Voila, your Oddle Shop is now live! ✨
For merchants who are switching over from the classic shopping cart, donote that once you publish your new Oddle Shop, you will be unable to switchback to your Classic Shopping cart. Do check out our FAQ here on upgradingto the new Oddle Shop.
💭 Have more questions? Contact our support team at [email protected] or chat with us by clicking on the speech bubble at the bottom-right corner of the page.