Admin » Banner carousel

Let’s add a Carousel or Banner image for your store. Many Shuup themes feature an option which allows users to upload their very own custom image header to obtain a much more personalized look and feel. 

The header can tell what your store is about, advertise a sale, or show off products from different categories.

A carousel is multiple images shown one after another after a set amount of time.

To add a header or Carousel:

  1. Go to your shop admin dashboard.
  2. Select Banner carousel from the left sidebar to open the Carousels tab.

Creating your First Carousel

First you will see your list of carousels. Click the New Carousel button to add your own carousel.

You can also click an existing caraousel to edit its details or images. There are options to sort, filter, and search so you can find the carousel you are looking for.

Edit the Carousel Basic Details

Click Basic details to edit the basic settings of your carousel.

First enter a Name for your carousel in the box. This helps you pick find and select the right carousel to use when you are Editing a Page.

The Interval box lets you enter how many Seconds before the carousel switches to the next slide. Please enter a numerical value in seconds.

Edit the Carousel Advanced Options

Click Advanced options to edit the advanced settings of your carousel.

The Animation dropdown lets you select which animation style you would like for switching to the next carousel image. Select either Slide or Fade.

Pause on hover makes it so if a user puts their mouse over the carousel, the image switching animation stops. This let’s them focus on a particular slide’s ad or deal.

You can enable this by selecting or deselecting Pause on hover.

You can also add navigation features to your carousel.

Show navigation arrows puts clickable arrows on the side of the carousel for users to click to go to the next image. Select or deselect the option Show navigation arrows.

Show navigation dots puts slide dots on the bottom of the carousel for users to see what slide they are on. Select or deselect the option Show navigation dots.

Image width and Image height lets you set the size of the carousel image area. It is usually best to put the same dimensions as as your carousel images.

Enter a numerical value in pixels for the Image width and Image height.

Slides (images) can be added after you save.

Click Save to publish your carousel for use when Editing a Page.

Add Slides to your Carousel

You will notice that a Slides tab has been added to your left carousel menu. Click it to open the slides tab.

Click the Add new slide button to add a new slide (image).

You can set an External link that will be shown when a user clicks the slide. This can be to any URL you put in the box.

Add an Image to your carousel by dragging an image into the image box. For best results, all images in the carousel should be the same size, and in the Image width to Image height ratio you set in Advanced options.

You can add Caption text that will show as a tooltip when you use the carousel in the Banner Box plugin.

The Caption lets you add text that will be scraped by Google search engines for indexing. This is good for Search Engine Optimization and will help you to be found in Google search. Enter a Caption that is search engine friendly and describes your image.

Enter a Name for your slide. This will help you find the right slide to edit later.

You can set one of your site pages as the External link that a user will go to when they click the slide.

Product link will send the user to one of your Product details pages. Select a product from the dropdown.

Category link will send the user to one of your Category main pages. Select a category from the dropdown.

Cms Page link will send the user to one of your content pages that you have created. Select a CMS page from the dropdown.

Ordering lets you set the order in which the slide will show in your carousel. You can enter any numerical value starting with zero.

Link target lets you choose whether you want the External link to open in a new browser tab or the same tab.

Select Current to open the link in the same browser tab.

Select New to open the link in a new browser tab.

You can set the date range in which the carousel is available to be seen by users. This is useful for creating timed sales and automatically updating carousels at a certain date.

Enter the Available from date from the calendar picker. Today’s date is automatically set.

Enter the Available to date from the calendar picker if you wish to have an end date. Leaving this blank means the carousel can be used indefinitely.

You can also delete the slide by selecting the Delete option and saving.

You can add unlimited slides by clicking the Add new slide button.

Remember to save your carousel and new slides by clicking the Save button.

You can also Discard changes and Delete the carousel altogether.

Not quite what you are looking for?