[intro] When you have completed this Guide, you will have set up and configured the Mobile Theme of your EKM online shop. It is recommended however that you click here and follow the Guide for applying a responsive Theme instead, which means that the finished design will display the same on mobile phones, tablets, desktops and laptops. [/intro]
Some of our older Themes on the EKM online shop platform have what we call Mobile Templates. This is where the mobile view of the shop is different from the design on the desktop view. Having a separate Mobile Template ensures that your EKM online shop will load quickly for customers viewing it using mobile phones and tablet devices. This also means that when you apply one of these older Themes, you will need to customise your Mobile Template too.
How do I know if a Theme has a Mobile Template?
On the Themes page where you can select a Theme from your EKM online shop, the most recently released Themes are displayed first by default. However, if you click All Themes on the bottom left-hand side, this will list all of the available Themes on the EKM shop platform:
You can then scroll down the page and look at each different Theme. Any Theme with a mobile phone included in the image is a responsive Theme, which means that it’s one of the more modern Themes and the design that you see on the desktop view is the same design you’ll see if you view your shop with a mobile phone or tablet device.
However, if the Theme isn’t displayed with a mobile phone, this is one of the old Themes and this will have a separate Mobile Template:
Why should I customise my Mobile Template?
If you are using one of the older Themes with a Mobile Template, it is essential that you customise the Mobile Template as much as possible to match the design and Theme of your EKM online shop. This is to ensure that customers who visit your shop using different devices - laptops, desktops, mobile phones and tablet devices, for example - are able to recognise that the different ‘versions’ of your EKM online shop are one and the same.
Configuring the Mobile Template
1. Click the Settings tab:
2. Then scroll down the page and click Mobile Shop on the bottom left-hand side:
On this page, you need to ensure that the top box is checked, which ensure that the Mobile Template displays to customers using mobile devices. The boxes for Categories and Products should also be checked, and Special Offer is optional, as this dictates whether you would like your Featured Products to display on the homepage of the Mobile Template as well as the desktop view of your EKM online shop.
3. When you have finished checking the relevant boxes, click the green Save button on the bottom right-hand side:
Customising your Mobile Template
4. Now you need to click the Design tab:
5. Click ‘Mobile’ on the red navigation bar:
6. Click the Edit button next to the Theme image, and select ‘Edit Logo’ from the drop-down menu:
7. In the window that appears, un-tick the box for ‘Use the logo from my desktop shop’:
8. This will update the window, revealing the option for you to upload a different version of your Logo. You will need to create a smaller version of your logo especially for use on your Mobile Theme, which should be a maximum of 800 pixels wide by up to 250 pixels high. Click the ‘Upload Logo’ button:
9. When you have uploaded your Logo, click the Save Changes button:
10. When you have uploaded and saved your logo onto your Mobile Theme, you then need to change the colours to match the branding used on your Desktop Theme. Click the Edit button again, and this time, select, Change Colours:
11. On this page, you can customise the different colours that are used on your Mobile Theme:
It’s highly recommended to ensure that the colour codes match those that are used on your Desktop Theme. If you’re not sure how to find out the hex codes for each of the colours you want to use, this Guide will be able to help you.
[tips] Whilst you are setting the colours on your Mobile Template, it’s really useful to have your mobile phone handy so that you can view your EKM online shop when the cache has cleared to ensure that your colours are displaying as you’d like them to. [/tips]
12. To change the colours on your Mobile Theme, simply select each colour box in turn:
You can select the colour by dragging the circle in the large window and dragging the arrows in the column, or if you already know the hex code for the colour you want to add, paste this into the # field and click the green arrow.
13. When you have amended the colours of your Mobile Theme, click the green Save Changes button on the bottom right of the page:
14. You can then preview either by using your own mobile phone or clicking the Edit button for your Mobile Theme and selecting Mobile Preview:
15. This will then reveal a preview of your Mobile Template. You can close this preview down by clicking the top right-hand corner of the window:
You’ll notice in the example that some of the Categories displayed in the preview are missing Category Images. It’s essential if you are using a Theme with a separate Mobile Template that you ensure that every Category has been assigned a Category Image. You can read more about creating and assigning Category Images within this Guide.
- Identifying and using Colours on your EKM online shop
- Adding a Theme to your EKM online shop
- Using Incognito/In-private Browsing
- Copying text from elsewhere
[contact] If you need our help with your EKM online shop, contact your Account Manager or Customer Support, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm on the weekends. If you'd like to suggest a feature or an upgrade on any of the EKM platforms, please let us know on the EKM Suggestions board. [/contact]