Slideshow element

2452 views Anh 1

Important: This feature is only available on the Premium plan

In this tutorial, you’ll learn about the Slideshow element and how to use it.

About Slideshow element

Slideshow element is designed to present a series of content items in a single compact view to help increase your conversion rate. You can use the Slideshow element to display featured products, sales campaigns, customer testimonials, etc.

To use the Slideshow element, choose Add element from the left sidebar > ADVANCED > choose Slideshow element and then drag and drop this element into the page editor.

Note that you can search this element by using the search function instead of finding it in the sidebar.

pagefly slideshow 1

The Slideshow element comes with multiple variations covering most needs. But we will continue to add more variations to help you save time.

Drag a variation to layout and see how it can be configured.

Slideshow element configuration

Slideshow element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.

Select the element in the layout to see its parameters.

pagefly slideshow 2

In this article, we’ll show the parameters of the General and Styling tabs for the Slideshow element.

General tab’s parameters

pagefly slideshow 3

Slideshow Navigation Styles

pagefly slideshow 4

Slideshow Pagination Styles

The parameters in the General tab for the Slideshow element include:

General tab’s parameters
  • Navigation: There are 5 different styles for the left/right arrow navigation on the slide. Or you can choose None and navigate between slides by clicking on the pagination.
  • Pagination: There are 3 different styles for the pagination.
  • Height: Slide to adjust the height of the slideshow.
    The minimum is 100px and maximum is 1000px for the Slideshow.
  • Loop: Enable / Disable infinite loop sliding. This works on the live page only.
  • Autoplay: Enable / Disable autoplay of slides in the Slideshow. This works on the live page only.
2. SLIDER ITEMSYou can add the slides and rearrange the order of these slides by dragging the 3 dots icon on the left of the slide’s name.
You can also duplicate or remove the slide(s) from the slideshow.
3. ACTIONYou can read more about the ACTION parameter here.
4.ATTRIBUTESThis is a parameter that all elements have. You can read more here.
5. VISIBILITYThis is a parameter that all elements have. You can read more here.
6. ANIMATIONThis is a parameter that all elements have. You can read more here.

Styling tab’s parameters

Styling tab’s parameters
There are 2 options that can be styled for including:

  • Slider
  • Navigation: There are 3 selections to choose such as Normal, Hover, and Active.
1. OVERALLYou can read about the OVERALL parameter here.
2. SPACINGYou can read about the SPACING parameter here.
3. TYPOGRAPHYYou can read about the TYPOGRAPHY parameter here.
4. BACKGROUNDYou can read about the BACKGROUND parameter here.
5. BORDERYou can read about the BORDER parameter here.
6. DISPLAYYou can read about the DISPLAY parameter here.
7. CUSTOM CSSYou can read about the CUSTOM CSS parameter here.

Nested elements configuration

Please note that the Slideshow element is the combination of multiple slides each of which can contain various elements depending on your needs such as Heading, Paragraph, Image, Button, etc.

Additionally, you can also embed a link into each slide to redirect your visitor to the desired location after clicking anywhere on that slide.

Was this helpful?

Start your free 14-day trial
of PageFly
Don’t have Shopify store yet? Create store