How to Add/Modify a Banner Slider

You are here:
< All Topics

What is Banner slider?

A banner slider is a graphical display that can be used to push instant engagement with your website visitors. Slider makes a revolving carousel that displays products or photos like a slideshow. Below are the steps to add/modify a banner slider.

Step 1: Storefront Design > Banner Slider

Go to the left hand side navigation bar and go to Storefront Design. From the drop down select Banner Slider.

Step 2: Click on Existing Modules

Once you land on the editing page, if there is no existing module continue with this step. If you wish to modify an existing banner slider, go to Step 8. To create a new banner slider go to Existing modules as shown.

Step 3:  Click on Create new slider as shown.

Step 4: Fill in settings and then Add slide

Once the page loads, fill in all the relevant settings of the slider and click on Add Slide as shown below

  • Store: Select the store for which you want to add a new banner slider
  • Slider name: Name of the slider
  • Width slider: width of the slider in pixels
  • Height slider: height of the slider in pixels
  • Layout type: type of layout for the banner
  • Transition time: time taken to transit the next image in the banner
  • Loader image: select the loader image for desktop and mobile here

Step 5: To add an image

To add an image to the slider Turn the button shown to ON and have the required images ready, to upload them in the next step. Before proceeding to the next step click on the empty image to get the pop up and press the edit button as shown.

Once the image manager opens find the required folder and go to the banners sub folder. If the folder doesn’t exist, create a new one by clicking the new folder as shown. Create a sub folder called banner and upload the images to that folder by clicking on the purple color button.

Once the selected images are uploaded save the current settings by clicking on the save button. You will be redirected to the camera slider starting page. Click on edit as shown below.

Once the page loads, go to the slide you were working on initially and notice a change with the new options available. Upload the same image for mobile that you have uploaded for desktop by following the procedure from Step 5. Fill in all other relevant details and save the details by clicking on the save icon.

Link: add SEO URL of the page you want to redirect the user when clicked on this

Step 6: Module placement > add item

You have now successfully added a slider. Now to have it appear on the site, go to module placement and click on add item.

Step 7: Fill all relevant details

After clicking on add item, fill the relevant details (shown in red box below) and save the page. You have now successfully enabled camera slider in the home page of a website.

  • Slider: select the name of the slider that you have added in the previous steps
  • Layout: select the layout where the banner slider should appear
  • Position: select the position of the banner in the layout
  • Sort Order: if there are multiple banner sliders, add sort order here. Slider with the lowest sort order appears first. Status: set the status of the banner slider here.

Step 8: To add a new slide to an existing camera slider

To add a new slide to an existing camera slider, go to the existing modules section, select the desired camera slider and follow the Steps 4-7.

Previous How to add reviews to a product
Next How to edit and add an option in Mega Menu
Table of Contents