How to use the Slideshow section

In this article, you will learn about the Slideshow section and how to use it to create a slider banner for your pages to catch visitors’ attention.  

Add the Slideshow section to your page

Step 1: From the EcomSolid Dashboard, head to the Theme Editor or Page Editor.

Step 2:  Access the Library from the top bar of the Editor Page.



Next, navigate to Section > Slideshow. Choose your preferred section and hit “Insert” to add it to your Editor.


Configure the Content Tab

After that, you will find the section that has been added to your Editor. Click on the section to start configuring the settings. 

The settings may vary depending on the Slideshow section you selected.


Loop: Enable this option to loop your slideshow again upon reaching the final slide.

Autoplay: Select “True” to make your slideshow automatically advance to the next one. Autoplay will work better with the Loop feature. When both functions are enabled, your slideshow will automatically run and then loop back to the first slide.

Full-width:  Enable this option to make the row stretch to both edges of your page.


Slider items

You will see the list of slides on your slideshow at this point. Hit the corresponding icon to remove or duplicate the slide. Otherwise, click on the arrow to further customize the slide.



Upload Image: There are two options for you to upload your image in this section:

  • Browse from your computer: Hover the image and click on the Pencil icon. This option lets you choose an image from your computer to upload.
  • Browse Gallery: You can pick one from the gallery which contains all of your uploaded images.

Input your preferred text for the content of the Banner, including Heading, Message, and Button label.



Under the Button URL and Image URL fields, hit “Pick a link” to send customers to other pages after clicking the button or the image. The link picker window will appear to select the link to add. There are two options for you at this point: enter the link to the “Custom URL” field or choose from the list.



Configure the Design Tab

Navigate to the Design tab to style your Slideshow further.


Banner Height: Use the slider or input the number into the box for your preferred value for the banner height.

Content position: Determine how the content is positioned on your banner. There are three options to choose including left-aligned, centered, and right-aligned.




Select a color or enter a hex color code for the different components of your Slideshow. 




Input the number for the font size you want for the Heading, Message, and Button label.


Padding and Margin

In the Padding and Margin parameters, each of them has four empty boxes that allow you to fill in the value for four directions: top – right – bottom – left.


Select the animation for your Slideshow from the dropdown menu. You can click on “Preview” to see how the animation works on the live page. 


 That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.

Was this helpful?