[intro]In this Guide, you’ll learn how to customise the Homepage of your EKM online shop by using the Theme Editor.

[/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]

[tips]Before you begin, it’s a good idea to create your Categories, Subcategories, Webpages and at least one Product beforehand. This is because you can link to these pages within some of the Sections on your Homepage.[/tips]

Locating the Theme Editor

1. From the Dashboard, click the Design tab:

2. On the Design page, click Editor on the top right-hand side:

3. This will launch the Theme Editor of your EKM online shop. In the top middle of the page, you can click between the desktop, tablet and mobile symbols to see how your EKM online shop will display on different devices. If you get stuck, you can click the Tutorial button on the far right-hand side:

Hiding Sections

On the left-hand side, you’ll see a list of all the different Sections that make up the current design of your Homepage. To hide a Section, simply click the eye symbol:

Changing the order of Sections

You can change the order of these Sections by dragging and dropping them, using the burger symbol for each on the left-hand side:

Editing existing Sections

The Sections that make up the default design of your EKM online shop can all be edited, and each is set to display a specific type of content. 

Header

1. Click the Edit symbol to edit the Header:

2. The Header is this area of your Homepage, which typically displays your logo, search bar and links to your Webpages:

3. When it comes to editing the Header, you can select whether or not you want the telephone number and email address of your EKM online shop to display - it’s best practice to leave these visible. Your logo can be amended by following the steps in this Guide. When you have ticked the box, click the X symbol to move onto the next Section:

[tips]Use a landline number as the telephone number for your EKM online shop, as opposed to a mobile number. This is a trust signal and will encourage potential customers to purchase from you. [/tips]

Image Banner

1. Click the Edit symbol to edit the Image Banner:

2. The Image Banner is towards the top of your Homepage, and consists of two images, two buttons, some text and a Banner Colour - which is the coloured overlay on the larger image:

3. To edit the Main Heading and the Heading text, simply amend the text in the relevant fields:

4. Scroll further down the left-hand side menu, and you can edit the Primary and Secondary buttons on the Image Banner. You can change the text on the buttons by amending the fields provided, and change the visibility by ticking or unticking the boxes:

5. You can amend where the buttons link to by clicking on the Edit symbol:

6. The folder symbols that appear represent the different Categories, Subcategories, Product Pages and Webpages of your EKM online shop. Click the green cross symbol to access Subcategories, and when you have located the place you want your button to link to, click the title to select it:

7. Scrolling further down the left-hand side menu, you can edit the Images. To change either the Product Image or the Background Image, simply click the Select Image button. For this section, ideally, you should use an image measuring 1920 x 600 pixels for the Background Image, and for the Product Image, a .png file image with a translucent background measuring 500 x 400 pixels work best:

8. There’s two images on the default Image banner - the Product Image is that of the television, and the Background Image is of the room with the television and the pot plant, which is behind the blue Banner Colour:

9. To remove the Product Image, simply untick the box provided:

10. To change either the Product Image or the Background Image, simply click the Select Image button:

[tips]If you want to upload an image with a transparent background as the Product Image, it needs to be a .png file type. [/tips]

11. In the window that appears, click the Upload Image button in the top right-hand corner:

12. In the second window, click Select File to choose an image from your computer:

13. When you have selected an image, click the green Upload File button on the right-hand side:

Click the file to highlight it and use the image in the Section:

14. Now the image is within the Section, you can change the banner colour by clicking the colour picker window, or reduce the banner colour by sliding down the banner opacity, or simply untick the box to turn the overlay colour off completely. Finally, you can remove the entire Image Banner simply by clicking the red Remove Section button right at the bottom of the menu:

[remember]You can save your design at any point by clicking the green Save button on the bottom left-hand side:

 [/remember]

USP

1. USP stands for Unique Selling Point, and these should ideally list short, snappy reasons for visitors to purchase from your EKM online shop. Click the Edit symbol to edit the USP:

2. On the default design, the USP is the grey bar with the icons:

3. The USP is made up of four identical Sections. Each one includes a box for you to amend the text, a Select Image button for you to change the icon, and a tickbox for you to hide the Section. For the icons here, .png images with transparent backgrounds work best. It's recommended that these measure 40 x 40 pixels square:

4. You can also remove the entire USP Section by clicking the red Remove Section button on the bottom left-hand side. When you have finished editing the USP Sections, simply click the cross symbol at the top of the USP menu:

Promo 3UP

1. Click the Edit symbol to edit the Promo 3UP Section:

2. The Promo 3UP Section consists of three Promotional Boxes:

3. Each Promo Box allows you to amend the headline, content text and button text by amending the fields provided:

4. You can amend where the button links to by clicking on the Edit symbol:

5. The folder symbols that appear represent the different Categories, Subcategories, Product Pages and Webpages of your EKM online shop. Click the green cross symbol to access Subcategories, and when you have located the place you want your button to link to, click the title to select it:

6. You can also untick the box to remove the button from the Promotional Box entirely:

7. Scroll further down and you can edit the Promo Image which sits in front of the Promo Background. Change the Image by clicking the Select Image button. For this area, images with a transparent background (.png files) measuring 250 x 250 pixels square work best here:

8. In the window that appears, you can either select an existing image from the File Manager of your EKM online shop or alternatively, upload a new one by clicking the button in the top right-hand corner:

9. Click the Select File button:

10. Now click the green Upload File button:

11. Click the name of the image to apply it as a Promo Image:

12. You can then amend the colour of the Background and the Text by clicking the Colour Picker boxes:

13. You can select the colour you’d like by using the slider and dragging your cursor in the box, or alternatively, paste the hex code of the colour you’d like to use in the Hex field provided:

14. You can, of course, remove the entire Section by clicking the red Remove Section button at the bottom of the menu, or alternatively, when you’ve finished editing your Promo Boxes, click the X at the top:

Special Offers

1. Click the Edit symbol to edit the Special Offers Section:

2. On the default design, the Special Offers Section is indicated by the plain grey banner. It’s empty if you have not yet allocated any Featured Products on your EKM online shop yet:

3. Within the Section, you can edit the name of the area displaying your Featured Products by amending the text in the field provided. You can remove the Section entirely by clicking the red button, and as always, once you’ve finished editing, click the cross on the top:

Category Promo Grid

1. Click the Edit symbol to edit the Category Promo Grid Section:

2. On the default design, the Category Promo Grid is the six blue-tinted images that can be linked to your individual Category Pages:

3. At the top, you can edit the name of this Section by amending the text in the field provided:

4. Scrolling further down, each image within the Section and the button can have their text amended by typing in the fields provided. The link to each Category can be set by clicking the Edit symbol, or alternatively, you can untick the box to remove the button entirely. Finally, you can change the image by clicking the Select Image button and choosing an image from your File Manager or alternatively by uploading it from your computer. 

For these areas, the Large Promo Block measures 700 x 300 pixels, whilst the Small Promo Blocks measure 350 x 250. These images do 'flex' and change shape, according to the device being used to view your EKM online shop. With this in mind, it's important that you do not include any text within the images themselves, but instead use the separate text fields to ensure that text can be read, regardless of the size of the browser being used to view your EKM online shop.  

You can remove this Section from the Homepage entirely by clicking the red Remove Section button at the bottom of the menu, and when you have finished editing your Section, simply click the cross at the top:

Text With Image

1. Click the Edit symbol to edit the Text With Image Section:

2. In the default design, the Text With Image Section looks like this:

3. You can edit this Section by selecting the alignment of the Image, adjusting the heading, title and content text and uploading an image of your own. The best size for the image in this section is 900 x 400 pixels:

4. Scroll further down, and you can select whether to show or hide the button on the Section, amend the Button Text and select what page the button links to by clicking the Edit symbol. You can delete the entire Section by clicking the red Remove Section button, and finally, when you’ve finished editing this Section, click the cross at the top:

Our Brands

1. Click the Edit symbol to edit the Section:

2. In the default design, Our Brand is the Section that lists the different glyphs and logos. For this area, the images should ideally be .png image files with translucent backgrounds, and measure 150 x 150 pixels square:

[remember]The menu on the left-hand row will affect how Sections display. Remember to regularly save your changes and review how your EKM online shop Homepage will appear by clicking View Shop. [/remember]

3. Divided into six parts, you can edit the name of this Section by amending the text in the field provided:

4. Scroll further down the menu, and you can edit each part, by uploading an image of your own by clicking the Select Image button, selecting the target destination of the linked image, and whether to show the part at all by either ticking or unticking the box:

[remember]Only list logos from products that you actually carry in your product range.[/remember]

5. If you scroll further down the menu, you can delete the entire Section by clicking the red Remove Section button, and when you’ve finished editing this Section, simply click the cross at the top:

Footer

1. Click the Edit symbol to edit the Footer Section:

2. On the default design the Footer Section looks like this:

3. You can edit the text in the Footer Section by amending the text in the fields provided and scrolling down further, you can edit the Delivery Slots text and visibility. As always, when you’ve finished editing, simply click the cross at the top:

[remember]You cannot remove the Footer Section as this is essential for your Homepage.[/remember]

Add Section

1. You can use the Theme Editor to add new Sections to your Homepage too. Simply click the Add Section button:

2. You can then select a Section from the list and add it to your Homepage, and edit it following the instructions listed for each of the Sections above:

[more]

[/more]

[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. If you have a non-account specific question ask the EKM Team, join us in EKM Community.  [/contact]