[intro]In this Guide, you’ll learn how to customise the settings of the Aerial Theme on your EKM online shop.[/intro]

[summary]

[/summary]

[caution]This Guide is intended for use with the Aerial Theme. If you are using a different Theme or your EKM online shop is in Custom Mode, click here for the correct Guide. [/caution]

Locating the Theme Settings

1. From the Dashboard, click the Design tab:

2. Click the Editor button towards the top right-hand side:

3. Now you need to click the Theme Settings tab in the top left-hand corner:

Site Settings

4. You’ll now see six tabs where you can edit the different details of your EKM online shop. Click Site Settings:

5. Here you can add a Lazy Loading Image. This is a placeholder image that can be loaded before your EKM online shop's Product and Category Images. This is ideal for when your customer is using a mobile device that perhaps doesn't have the best signal - the Lazy Loading Image will load first, and once the Product and Category Images have loaded, they will replace the Lazy Loading Image. 

With this in mind, it's a good idea to create a version of your branding with a 'loading' message of sorts to use as your Lazy Loading Image universally across your EKM online shop. This will let your customers know that the images are indeed loading and minimise the risk of them clicking elsewhere instead of waiting for the page to load. 

The benefit of a Lazy Loading Image is that the system only loads this single image for the initial page load, keeping the page structure intact and decreasing the Cumulative Layout Shift (CLS) score. A lower result here is what you're aiming for, and this method of loading also ensures that the page content displays quickly for your visitor as Product and Category Images are loaded in the background; your EKM online shop will display a 'loading state' which is better for the end user as it indicates that 'content is coming'. 

[remember]Your Lazy Loading Image should ideally be no larger than 500 pixels square. You can use a .gif, a .jpg or a .png file for this, but ensure that you keep the file size as small as possible - as a large Lazy Loading Image can defeat the purpose of the Lazy Loading Image! [/remember]

6. Beneath the Lazy Loading Image, you can add the Copyright Year into the field provided and it's recommended to click the switch to ensure that this is updated automatically. Finally, you can use the Border Radius Slider to select the curvature of the buttons on your EKM online shop; reducing the radius here will give sharp corners to the buttons, but increasing it will add a rounder edge. 

When you have finished amending your Site Settings, you need to click the X in the top right-hand corner of the menu:

Fonts

7. Click Fonts:

8. You’ll then see a drop-down menu where you can select the font you’d like to use for the primary font across your EKM online shop. The fonts here are universal fonts so these will translate across Apple, Windows and Android devices:

[tips]To see what the font looks like, scroll down the preview pane on the right-hand side and look for some Homepage text or a description for a Category or Product. When the page has been updated, you can see the new font there. [/tips]

9. When you have selected your font and the page has updated, click the cross at the top:

[remember]The fonts on this menu are basic and are intended to be used for all text throughout your EKM online shop, including text on the Homepage, any Webpages and of course your Product and Category descriptions. These fonts are clear and easy to read, which ensures that your EKM online shop is accessible and easy to read for your visitors, regardless of which font you select from the list. If you want to use any excessively detailed or 'fancy' fonts on your EKM online shop, you can still use these by adding them to Design Images. This will ensure that they display correctly for your visitors, regardless of what device they are using to browse your EKM online shop, as they will be part of an image and not a text area.[/remember]

Navigation

10. Click Navigation:

11. Here you can click the switch to show your Navigation images. This means that if you have assigned Category Images to your Categories when visitors view your EKM online shop on mobile devices, they will see the Category Images listed in the menu. 

Below this is a switch for View All. By turning this on, you can have a View All link displaying at the top of main Category pages, which when clicked, will display all products within that main Category and any Subcategories within. Finally, you can use the slider to designate how many items are displayed on the Category Pages. As you move this slider, you'll notice a numb appears to represent the number of items which will display on a single Category Page:

12. When you have finished configuring these settings, click the X:

Info Bar

13. Click Info Bar:

14. Here, you can tick the boxes to determine which contact details remain in the header of your EKM online shop:

[remember]Ideally, all of these switches should be turned on - contact details within the header and footer are trust signals and having them visible can encourage sales. [/remember]

15. Click the X to move on to the next section:

Product Settings

16. Click Product Settings:

17. Here you can configure your Product Settings universally across your EKM online shop.  If you have installed the Product Summary feature to display Short Descriptions on your Products, you need to click the switch here to ensure that these display. 

You can also use the fields within the Product Stock Settings to configure what default text is displayed on your products, and if you need to, click the switch to ensure that stock levels are displayed next to each item:

18. When you have finished configuring this section, click the X on the top right-hand side of the menu:

Theme Colours

19. Click Theme Colours:

20. Here, you have sections related to each different part of your EKM online shop. Click the down arrow symbols for each of these to reveal the areas that can be configured. 

21. In each section you have a series of Colour Picker boxes, where you can designate the colours for the different parts of your Theme: 

22. When you click a colour field, this opens the Colour Picker Tool. You can drag the circle in the largest window to select a shade, and use the slider to the right to select a base colour. There’s also a field for you to add in a specific hex code if you know it. When you have finished selecting your colour, simply press the Enter key on your keyboard to apply that colour, and click the screen off the window to close it down:

23. When you have finished amending the colours of your Theme, simply click the X:

24. Then you need to save all of your changes by clicking the green Save button in the bottom left-hand corner:

[tips]If you're not sure which of the elements you're amending the colour for, simply make the element a random colour, like bright pink or lime green or anything that really clashes with the rest of your colour scheme. Then use the preview pane on the right-hand side to search for the bright colour, which you can then amend to the colour you want it to be. [/tips]

[more]

[/more]

[contact] If you need our help with your EKM online shop, contact your Ecommerce Expert or the Customer Support Team, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm 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. If you have a non-account-specific question to ask the EKM Team, join us in the EKM Community. [/contact]