Configuring the NEW Arch UI

The NEW UI in currently in Beta, with a view to start launching this on the 5th of April to other sites.

If you cannot wait that long in order to turn on the NEW UI you must first request this from the Eposability Support desk ([e-mail])

Before we start you are going to need to understand your Brands "Hex" colours as Arch only deals with "Hex" when we want to change colours ie. (#FFFFFF) We have included 2 websites below that really help you when designing the "New UI".

This website converts your "Pantones" into "Hex Codes"

https://www.pantone.com/uk/en/color-finder

This website is a "colour picker" so if you upload a picture of your website it will show you the closest "Hex" match in its database.

https://www.printkick.com/tools/image-colour-match

Step 1) Once enabled the first thing you need to do is change your logo.

This is because the move to the NEW UI gets rid of your "Description" and "Side Image" and replaces it with a new style banner that consists of a "Logo". The NEW UI is completely reactive so depending on the size the "banner" will amend the positioning of the "Logo" as well as the size and shape.

To change your Logo you must go to "Setup" > "Look & Feel - Web" > Scroll down to "Web Ordering Styles" > "Banner Logo"

If you don't have this tab you must request this from the Eposability Support desk ([e-mail])

Once you have selected your "Banner" the change is instant so you can check and amend, If you are not happy with the "Size" of the banner you can amend the "Height" below using a px height ie. 50px or 70px

Step 2) Customizing your Banner

The "Banner" is the most important change as its the thing that customers will see first, it's important that you design something that is "to style / on brand", you can change all aspects of your "Banner" see our Banner here. We have annotated inline with the "Arch CMS" so that now you understand what you are changing and when.

Here is how you can amend the "Banner" using your Hex codes in the CMS

1) The Banner Logo can be amended using the "Choose File" and the size can be rectified using the "px" size

2) Banner Background color can be amended using a "Hex" Code, see picture above for clarification

3) Banner Font color can also be changed to "On brand" using a "Hex Code, see picture

4 and 5) We are able to different Title and Subtitle font for both "Web" and "Mobile" which really helps with the reactive sizing!

Step 3) Customizing your "Web Order" mainframe

Now once you have completed your "Banner" its time to choose your general look and feel

1) Primary Color, this is a generic change that gives the whole styling a lift, it amends things such as the "My Profile" Color, Basket Background color. If you want these all to be "different" then we recommend that you leave this blank. Enter a hex code to dictate this change

       

2) Font Color is the general font color of the "Web Ordering" so this is the product name and description, given that we are unable to change the "Product Box" we recommend this being a "Darker Color". Enter a hex code to dictate this change

3, 4, 5 and 6) This change is for the "Multi Site Clients" where we change the "Header" on the Main page, shown below

Then we have the next section which is more to do with the "Mid Section" of the Ordering Page.

7) Link Colour, this changes all the colors of the "Hyperlinks" on the "My Profile" and the "Category Selection Tool"

8) Button Background color changes the "Basket Color"

9 and 10) Points Earned and Points spent come into play at the "End" of the "Order"

11) Background Color and Background Image dictate the "Color" of the Main screen where the products are based upon.

12) Footer Background Color dictates the Color of the "Arch" Footer and can be seen below.

13) Favicon is a great addition to really finish off the "Look and Feel"

If you have any further questions regarding the New Arch UI and what customization is available then please contact our support desk at the following address: ([e-mail])