[intro]In this Guide, you’ll learn how to edit and customise the Category Promo Grid section of the Aerial Theme on your EKM online shop.[/intro]

[summary]

[/summary]

Before you begin, it’s a good idea to prepare the images you would like to use to represent each of your Categories in this section on your Homepage. You will need to create Design Images with the following dimensions:

  • 2 x Large Promo Block - 900px x 400px either .jpeg/.png image type;
  • 4 x Small Promo block - 400px x 400px either .jpeg/.png image type.

These images will '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. 

1. Click the Edit symbol to open this section:

2. Here you’ll see that we have divided all of the different parts of the Category Promo Grid into different elements. Click the down arrow to edit each different element:

Settings

3. Here, you can click the switch to determine whether a hover effect is used in this section. The hover effect is what makes the text appear on the front end when a cursor is moved over each Category Image:

If you choose not to use the hover effect, the text and overlay will permanently display over the top of your Promo Blocks.

Colours

This element is used for setting the colour of the overlay background and overlay text:

4. As before when editing the Header section, you simply click each square to open the Colour Picker window and amend the colours to match your logo and your brand. The opacity is the ‘thickness’ of the colour that displays on top of your Promo Block images. If set at zero, no background colour will be visible and if set at 100%, the Promo Block Images will not be visible.

Settings

5. In this second Settings element, you can decide whether you would like the Category Promo Grid section to display a title and if so, what that title should be by amending the text in the field provided:

Promo Large 1, 2

The Promo Large elements - Promo Large 1 and Promo Large 2 - should be reserved for your most popular Categories, as these are the largest images in the Category Promo Grid. The images you use to represent these Categories should be cut to size and measure 900px x 400px. They can be either .jpeg or.png image types, and should be uploaded to Tiny Png/Tiny Jpeg (according to which file type you’ve chosen) to ensure that they have been optimised and will load quickly for visitors before you upload them to your EKM online shop. 

6. The first part of the settings in this area need to be edited to customise the Header Text, Body Text and Button Text to reflect that specific Category. If you chose not to display the Body Text or the Button, simply click the switches to deactivate:

7. When you have amended the Header Text, Body Text and Button Text, scroll further down within the element and click the Edit symbol to set where you want the Button to link to within your EKM online shop:

8. In the menu that appears, each folder symbol represents a different area of your EKM online shop. Click the green cross symbol to expand the Categories folder and select the Category you want to link to the Button:

[remember]The Category, Product or Webpage that you want to link to the Button within the Promo Large or Promo Small sections must be visible and not hidden on your EKM online shop, otherwise, it won’t be visible in the menu when you are creating the link. [/remember]

9. Finally, you need to add the image to the Promo Large block by clicking the Select Image button:

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

11. In the second window, click the Select File button:

12. When you have located the image on your computer, you’ll see a preview of it in the window. Click the green Upload File button:

13. In the remaining window, click the file name and it will be applied to the relevant Promo Large block:

14. Now you need to repeat this process with your second Promo Large block and assign an image to represent your second most popular Category. 

Promo Small 1, 2, 3, 4

The Promo Small elements - Promo Small 1, Promo Small 2, Promo Small 3 and Promo Small 4, are the smaller images in the Category Promo Grid. The images you use to represent these Categories should be cut to size and measure 400px x 400px. They can be either .jpeg or.png image types and should be uploaded to Tiny Png/Tiny Jpeg (according to which file type you’ve chosen) to ensure that they have been optimised and will load quickly for visitors before you upload them to your EKM online shop. 

15. The first part of the settings in this area can be edited to customise the Header Text, Body Text and Button Text to reflect that specific Category. If you chose not to display the Body Text or the Button, simply click the switches to deactivate:

16. When you have amended the Header Text, Body Text and Button Text, scroll further down within the element and click the Edit symbol to set where you want the Button to link to within your EKM online shop:

17. In the menu that appears, each folder symbol represents a different area of your EKM online shop. Click the green cross symbol to expand the Categories folder and select the Category you want to link to the Button:

[remember]The Category, Product or Webpage that you want to link to the Button within the Promo Large or Promo Small sections must be visible and not hidden on your EKM online shop, otherwise, it won’t be visible in the menu when you are creating the link. [/remember]

18. Finally, you need to add the image to the Promo Large block by clicking the Select Image button:

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

20. In the second window, click the Select File button:

21. When you have located the image on your computer, you’ll see a preview of it in the window. Click the green Upload File button:

22. In the remaining window, click the file name and the image will be applied to the relevant Promo Large block:

23. Now you need to repeat this process with your other Promo Small blocks and assign images to represent your other Categories. 

24. When you have finished editing the Category Promo Grid section, you need to click the green Save button in the bottom left-hand corner:

[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 EKM Community. If you need some inspiration for your EKM online shop, listen to our podcast on iTunes and Spotify.[/contact]