[intro] You can use the Carousel Settings to create a multi-image slideshow on the homepage of your Obodo shop. When you have completed this guide, you will be able to determine if you would like one on your own Obodo shop, and how to set yours up.
[/intro]

[summary]

[/summary]

What are Carousels?

Carousels, or as they’re sometimes known ‘slideshows’, are a collection of rotating images 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 or not.

Essentially, carousels allow you to display rotating images which can be used to promote specific products, categories and discounts. These images can then be hyperlinked to different pages within your Obodo shop. If you plan to run a lot of offers on your Obodo shop, it’s a good idea to have a carousel as you can quickly and easily change the images to reflect specific offers.

Where’s the best place for a Carousel?

The carousel is a type of element on the homepage. The Themes Team here at Obodo will usually have the largest image on the homepage set to allow a carousel. It’s best to add Carousels to pages where there is a lot of information to digest, which will allow time for the Carousel to rotate and for the customer to see the different slides.

Why should I remove my Carousel?

Bear in mind that although carousels can look fantastic, research on customer behaviour 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 Obodo 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 Obodo shop without seeing the rest of the images in the series on the carousel. Therefore, it’s best to add Carousels to pages where there is a lot of information to digest, which will allow time for the Carousel to rotate and for the customer to see the different slides.

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 Obodo 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.

Locating your Carousel

1. To access the settings for your carousel, log into your Obodo 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, use the Content Type drop-down menu to select Carousel:

5. And then click Content on the left hand side: 

Uploading your Images

6. This is where you would create different images for your carousel. Click the green Create slide button:

7. 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:

8. 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 Obodo 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 Obodo shop. Click the icon to select from the list of existing pages on your Obodo shop, or alternatively, paste in an external URL into the field provided:

[tips] See step 12 for uploading images that have not been cut to size for more information on selecting a Background Colour. [/tips]

9. 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. Give the image a link and then click the green Create Slide button:

10. You’ll now see two images - the first is the default image that is part of the Theme you have applied to your Obodo shop, whilst the second is the image that you have just uploaded. Click the delete button next to the default image:

11. Then click Yes, Delete Slide to remove the default image from the homepage:

[remember]In this Guide, the example carousel images have no text on them. When creating images for your carousel, ensure that there is some text or a 'Call To Action', such as 'Shop now' or 'see our latest products'. [/remember]

Uploading different sized images

12. Click the green Create Slide button, and click Upload Image:

13. This time I’ll be uploading an image where the height is correct - 900 pixels - but the width falls short of the recommended 1920 pixels as mine is only 1500 pixels wide. 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 Obodo 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:

16. You could also add a specific coloured background by clicking the square to the right of the Background Colour header which will allow you to select different colours. You can use the slider and the window to select a colour, or if you have the correct hex code for the colour you'd like to use, add it to the field provided and then press Enter to apply it:

17. When you are happy with the Background Colour, click the green Create Slide button:

18. Now you have two slides in your carousel. You can change the order the slides appear by dragging using the icons on the left-hand side:

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

19. Now you have two slides, you can configure how the carousel displays. Click the Settings tab:

20. You can use the Preview Animation button to see the different options for how your carousel can transition. Tick the button to Auto Rotate, where the slides will automatically rotate:

21. When you are happy with your carousel, click the Save & Close button:

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 Obodo 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 Obodo shop using the steps in this guide.

[more]

[/more]

[contact]If you need our help with your Obodo shop, contact our 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 on the weekends. If you have a non-account specific question ask the Obodo Team, join us in the Obodo Community on Facebook. [/contact]