How the editor works
Within the Embed section of the dashboard, you can update and style your Online Ordering site using the style settings provided below. You'll want to have your site available on a new browser tab so that when you make changes and save the work, you can refresh your online ordering site and see the changes applied. Under your domain settings, copy the Default shop URL or if setup, your custom URL listed like below.
Next go to the Layout section and confirm the that version number you are editing is the Design Version 2.
How the Designer works
The designer is structured so that you set up to up to ten colour schemes and fonts, then on each area within your site, you assign those colours to each specific area.
Pro tip
The most aesthetically looking sites uses 2-3 colour groups with the concept that less is more. Styling points include:
Make the Navbar and the Action bar Primary button the same colour
Set the text fonts to be standard bold colour which could be the same colour as your logo
Make the Action bar Secondary button outline the same colour as the primary. The button "Add" is the primary, with the "Go Back" the secondary.
Clicking the colour squares will display the colour selector which you can use the droplet tool to select your own custom colours.
Tip
For example, the 'first' colour may be used as your main background colour, with the 'third' colour being your primary button text colour.
Once you have added your colours, scroll down to select your font groups.
To add a custom font from Google fonts, click the link provided and import the font by copying the code and pasting it into your Import Fonts section.
When you paste the code in, you will need to remove <style> characters at the front and end of the code.
Click save and head to your site, refresh the browser to action the change.
Lastly, set the main background colour for your online order site by selecting the App container background
Styling the site sections
To style the navbar, action bar and action buttons, menu page, product page, cart page and checkout page you will need to designer Layout to assign theme colours. Below is how each area of the site can be styled.
To style each section, you can select an area from the drop down box which will take you to the respective setting options. Here's how the sections are broken down:
Navbar
The Navbar is at the top of each screen an includes the logo, menu and login buttons.
Action bar
Is where the action buttons are located for navigating the customer through the site.
Menu page
Is the main menu page which display all menu products under the category banner
Product page
Is the page for the product only and displays all of the options applicable to that product.
Cart page
This is the cart where all products that have been added and available to the customer for a final view before proceeding to the checkout page.
Checkout page
This is the final page before checking out and includes the payment gateway where customers add payment details to place the order.
What next
From here you can select colours, upload logo images and specify font sizes. Again, click save and review your styling changes on the customer facing products like Kiosk or online ordering.
If you need help or make changes that you're not sure how to correct, please feel free to contact the Host support team.