[intro] You can use the Carousel Settings to create a multi-image slideshow on the homepage of your EKM online shop. When you have completed this guide, you will be able to determine if you would like one on your own EKM online shop, and how to set yours up.
- Locating your Carousel
- Uploading your Images
- Uploading different sized Images
- Selecting your Transition
Carousels, or as they’re sometimes known ‘slideshows’, are a collection of rotating images on the homepage which are used to promote specific categories and offers. As an element, some websites utilise these whilst others do not, and there are good arguments from both sides of the fence as to whether you should use a carousel on your own homepage or not.
Essentially, carousels allow you to display rotating images on the homepage which can be used to promote specific products, categories and discounts. These images can then be hyperlinked to different pages within your EKM online shop. If you plan to run a lot of offers on your EKM online shop, it’s a good idea to have a carousel as you can quickly and easily change the images to reflect specific offers.
However, bear in mind too that although carousels can look fantastic, research on customer behaviour on websites often summarises that customers spend little more than a few seconds on the homepage of a site and will quickly seek out what they need, so even if you have the most beautiful carousel images in the world, most customers will not see more than the first rotating image, some may see the second, and very few people will see the last image in rotation.
Of course, what you sell on your EKM online shop will influence this - if there is a lot of information on the homepage then visitors will spend more time on there and will see more of the rotating images on the carousel. However, if there’s very little information on the homepage and lots of design images and a well thought-out menu, the chances are that your customers will see the first slide when the homepage loads and they will continue their journey within your EKM online shop without seeing the rest of the images in the series on the carousel.
With all of this in mind, you may want to experiment by adding a carousel with just two or three slides to begin with - remember that less is more, and if you use a free platform such as Hotjar to monitor how your customers interact with your EKM online shop, you will be able to gather data over a period of months which will reveal how successful your carousel has been and whether you need to make any amendments to it.
The carousel is a type of element on the homepage. The Themes Team here at EKM who design our Themes will usually have the largest image on the homepage set to allow a carousel. Usually just one carousel is enough, however, if you require more than one, our Tweaks Team will be able to amend the Theme code on your EKM online shop to allow other elements to use a carousel too.
Locating your Carousel
1. To access the settings for your carousel, log into your EKM online shop and click the Shop tab:
2. You then need to click the Edit Elements button on the blue navigation bar on the top right:
3. Click the Edit Element button on the bottom left of the largest design image on the homepage, and click Edit:
4. In the Edit Element window, click the Content tab on the left:
[remember] If you cannot see the Display, Content and Settings tabs within the Edit Element window as indicated in the image above, that particular element may not be optimised to allow a carousel as this depends on the Theme. If it is not currently allowed, simply contact our Customer Support Team who will be able to amend this for you. [/remember]
Uploading your Images
5. This is where you would create different images for your carousel. Click the green Create slide button:
6. In the small window that opens up, you can upload a new image. If you click Select Existing Image, a window will open which enables you to select one of the Design Images from your File Manager. If you click Upload Image, this will allow you to upload an image directly from your computer:
7. On the left-hand side, you’ll see the ideal size for the image displayed - this is the size the image should be if you want it to display like the default image on your EKM online shop. When you have uploaded your image, you will need to add a Link in the field provided to hyperlink the image to an existing page on your EKM online shop:
[tips] See step 12 for uploading images that have not been cut to size for more information on selecting a Background Colour. [/tips]
8. The image of the dog at the beach has been cut to the recommended dimensions - 1920 pixels wide by 838 pixels high - that were advised in the window in step 7. Because I know that the image is the right size, I don’t need to select a Background Colour. Click the green Create Slide button:
9. You’ll now see two images - the first is the default image that is part of the Theme you have applied to your EKM online shop, whilst the second is the image that you have just uploaded. Click the delete button next to the default image:
10. Then click Yes, Delete Slide to remove the default image from the homepage:
11. Click the green Create Slide button:
Uploading different sized images
12. Click Upload Image. This time I’ll be uploading an image where the height is correct - 838 pixels - but the width falls short of the recommended 1920 pixels as mine is only 1257 pixels wide:
13. As in step 7, you can add an external link into the Link field provided to which will link your image to a page within your EKM online shop:
14. This time, as we know that the image is not the recommended width for the element, we need to add a background colour which will fill any unused space. You can do this easily by clicking Generate Background Colour:
15. The system will then select the largest colour from the image and use this as the background for the rest of your slide. However, in the image I’ve used, the background behind the puppy - even though it is the most used colour in the image - is shaded, so you can see the line between my image and the background applied by the carousel.
With this in mind, you could either leave the slide as it is or you could add a specific coloured background by clicking the grey square to the right of the Background Colour header which will allow you to select different colours:
16. When you are happy with the Background Colour, click the green Create Slide button:
17. Now you have two slides in your carousel. You can change the order the slides appear by dragging them like this:
Bear in mind that most people will see the first slide before the others, so this should be advertising your most popular product, category or current promotion.
Selecting your Transition
18. Now you have two slides, you can configure how the carousel displays. Click the Settings tab:
19. You can use the Preview Animation button to see the different options for how your carousel can transition:
20. When you are happy with your carousel, click the Save & Close button:
21. On the homepage of your EKM online shop, your carousel will display like this:
Bear in mind that the example images of the puppies I’ve used have not been pre-populated with text. If you wish to display images with text in your carousel, you need to edit the text into the image before uploading it to your EKM online shop. The best way to do this if you do not have your own graphics program on your computer is to use a free website such as Canva. When you have created your images, simply upload them to your EKM online shop using the steps in this guide.
- Using Canva to create Design Images
- Adding a Favicon
- Using Hotjar on your EKM online shop
- EKM Image Builder
[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.[/contact]