Customising your online shop

Your online shop is where your customers can order directly from you, 24/7. Create a beautiful online shop that represents your brand with our powerful and flexible online shop editor.

Oddle's online ordering platform allows you to customise the look and feel of your 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.

With Oddle's powerful and flexible customisation tools, you can build a unique and professional looking Oddle Shop that converts in no time! For ideas on what you can create, checkout our demo store here.

No time to customise? Just select from one of our 8 beautifully designed presets✨.

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 "Customise" Page.

  1. In the Web Dashboard, navigate to a Menu

  2. Click on "Customise" to customise the Oddle Shop for the selected menu

The editor 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 editor, 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.

Oddle Shop Editor

2. General settings

​

​

You can edit your shop's colours, typography and buttons from General Settings. Changes made here affect the entire Oddle Shop. You can also choose from one of our presets to instantly style your Oddle Shop.

​gen-setting.jpg​

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 Body font colour that stands out against the container colour. For example, pairing a White Headings and Body font colour against a Black container works well.

2.2 Editing typography

​

​

Changing the font of can also significantly alter the look and feel of your Oddle Shop. You can change the font types for both Headings and Body fonts.

​typography-2.jpg​

Choose a serif font for a modern look or a cursive font to add a touch of elegance.

2.3 Editing buttons

​

​

Buttons on your Oddle Shop can also be customised and play a large part in the design of your Oddle Shop. They draw a customer's attention and are the main call-to-action in your Oddle Shop. Choose from 3 different button styles and 3 different button shapes to create a unique look. For example, choosing a solid square-shaped button gives your Oddle Shop a sleek look while a raised pill-shaped button helps to create a friendly look. Select a button style or shape simply by choosing from the drop-down options.

Button styles available:

  • Solid

  • Raised

  • Outline

Button shapes available:

  • Round

  • Pill

  • Square

You can also choose the colour of the button as well as the button text colour. We strongly encourage choosing a text colour that is visible against the button colour.

​buttons-2.jpg​

2.4 Choosing a preset

​

​

​

If you prefer to make minimal styling changes to Oddle Shop, you may also choose from 8 of our beautifully designed presets. Once chosen, you can go live immediately by hitting the publish button or make the necessary modifications to it. To select a preset, simply choose a preset from the drop-down list.

​

You can also view our presets in action through the following demo shops:

  1. Coffee

  2. ​Contrast​

  3. Dark

  4. Earth

  5. ​Marine​

  6. ​Minimalist​

  7. ​Modern​

  8. ​Pastel​

​

​Presets-2.jpg​

3. Section settings

​

​

​

Similar to Lego blocks, sections are the building blocks of your Oddle Shop. Pick and choose from different sections to create the layout of your Oddle Shop.

Sections are categorised into 2 types, namely Fixed sections and Dynamic sections. Fixed sections are fixed in position and generally appears on all pages. They can be edited but cannot be removed or rearranged. Dynamic sections can be added, removed, rearranged or hidden. Currently, dynamic sections can only be added to your menu page.

​

Fixed Sections:

Dynamic Sections:

​section-setting.jpg​

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.

Adding a section

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.

Removing a section

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

​

​

Use the hide feature to hide sections that are unfinished or do not wish to publish yet. For example, you may wish to hide a slideshow which showcases seasonal items and unhide it when you launch your seasonal items.

Click on the "eye" icon to hide a section. To unhide a section, simply click on the eye icon again.

​Screen_Shot_2018-07-31_at_12.59.26_PM.png​

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 the navigation link font colour.

To add a logo:

  1. Click on the "Upload" button.

  2. Choose a file from your computer or drag an image to the image picker.

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

​

​

To add a shop name:

1. Type your shop's name in the text box labelled "Shop name". Though there is no character limit for your shop name, we recommend keeping it short.

2. Choose a font type which represents your brand from the drop-down list (Optional)

​Store-Name-2.jpg​

Header colours

​

​

To change the colour of either the background colour or the navigation link font colour, simply click on the colour you wish to change and use the colour picker. We recommend using a navigation link font colour that stands out against the header font colour.

​header-setting.jpg​

5. Editing the footer section

​

​

In the footer section, you can change the footer background colour and change the navigation link font colour.

To change the colour of either the background colour or the navigation link font colour, simply click on the colour you wish to change and use the colour picker. We recommend using a navigation link font colour that stands out against the header font colour.

​Footer-2.jpg​

6. 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 delivery to and about your delivery fees). In the slideshow section, you can set the auto-scroll interval and add up to 5 different slides.

You can choose to have the slides in your slideshow auto-rotate by toggling on the "Auto-scroll" switch. To choose the auto-scroll interval, simply select your desired preference from the drop-down list.

​interval-2.jpg​

Adding slides and uploading images

To add a slide, click on "Add new slide". You may add up to a maximum of 5 slides. Slides can also be easily removed by clicking on the "Remove slide" text link. By default, each slide comes with a placeholder image. To upload your own image:

  1. Click on the "Upload" button.

  2. Choose a file from your computer or drag an image to the image picker.

  3. After selecting an image, use the image picker tool to crop the image to what you require and click on "Done".

We recommend using images that are at least 2400x1000px in dimensions. After uploading an image you can also replace, edit or delete by clicking on the replace, edit or delete icons respectively.

adding-slideshow.gif

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.

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

Grid Layout

List Layout

​grid-layout.jpg​

​list-layout.jpg​

Product category layouts available:

  • Side - Great for showcasing all categories at once.

  • Top - Great for menus with a large number of categories.

Note

The product category layout only applies to the desktop view of your Oddle Shop. On mobile, the categories are displayed as a top sticky drop down bar.

​

​

Side Layout

​side-layout.jpg​

Top Layout

​top-layout.jpg​

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.

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

9. Editing the Image with text section

​

​

The image with text section is a great way to share information with your customers. You can describe featured dishes, add instructions on how to order or simply welcome customers to your shop. Pair your message with images to grab attention.

To add an image:

  1. Click on the "Upload" button.

  2. Choose a file from your computer or drag an image to the image picker.

  3. After selecting an image, use the image picker tool to crop the image to what you require and click on "Done".

You can also choose to position your image to the left or right of the text using the "Image position" drop-down or hide the image altogether by toggling off the "Show image" toggle.

​image_text01.jpg​

To add header text or body text:

  1. Type your desired text in the text boxes labelled "Header text" and "Body text" respectively.

You can also choose to align your text to the left, center or right using the text alignment drop-down

​image_text02.jpg​

10. Editing the custom HTML section

Use of this section requires familiarity of web languages such as HTML and 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.

​

​

​

Oddle Shop provides you with great flexibility through the Custom HTML section. If you are familiar with web languages, you can easily style text with HTML, embed videos, or even install custom widgets in your shop!

To add Custom HTML:

  1. Simply paste the HTML code in the "HTML content" text box

​custom-html.jpg​

11. Editing the marketing popup section ✨NEW✨

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 customise your popup to make it more enticing to your visitors through the following methods:

Add an image

  1. Click on the "Upload Image" button.

  2. Choose a file from your computer or drag an image to the image picker.

  3. After selecting an image, use the image picker tool to crop the image to what you require and click on "Done".

This image will be shown on all popups.

​Add-an-Image.jpg​

Customise your message

Type your desired message in the text boxes labelled:

  1. "Header text"

  2. "Body text"

  3. "Close button text"

You can adjust the body text alignment or make it bold, italic, or underlinewith the body text toolbar.

The same can be done for the popup shown after Newsletter Signup. To do this, scroll to the bottom of the Marketing Popup toolbar and click on the Newsletter Signup section.

​Customise-your-Message.jpg​

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.

​

​

​

Time your message

Under Popup trigger type, select one of the following trigger types and their respective trigger settings:

  1. Page scroll - popup appears when a visitor scrolls to a certain length of the page.

  2. Time delay - popup appears after a certain time.

  3. On exit intent - popup appears when a visitor displays an intention to leave the page (only available on desktop web browser).

Next, select the popup frequency of how often the popup should be shown to the same visitor.

​Time-your-Message.jpg​

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.

12. Editing the Instagram feed section ✨NEW✨

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:

  1. Simply click on the "Generate Access Token" link

  2. Login to your Instagram account and authorize the application

  3. Copy and paste the generated access token to the "Instagram Access Token" field

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

13. 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! ✨