Slideshow
This section allows you to create the Slider with images, Customers can swipe to see the next images or they watch it autoplay. You also can add texts, call-out buttons for them. It is usually located on Home Page. However, Shopify 2.0 allows you to add the Slideshow to any pages that you want.
From Theme Section Sidebar -> Go to Add section -> Search and add Slideshow

1. Slideshow settings

This setting allows you to adjust Section height, effects, buttons, layout, etc for Slideshow section.

1.1. GENERAL OPTIONS

  • Section height: This section allows you to change height for slideshow. There are many choices for you to choose. If you choose Custom height, you can choose only for mobile, tablet, or desktop devices; and enter different height for them.
  • Slider effect: You can choose between Fade or Slider.
  • Enable loop: At the end of cells, wrap-around to the other end for infinite scrolling.
  • Autoplay speed in second: You can set the automatically time move on to the next slider. Set is ‘0’ to disable auto play.
  • Pause autoplay on hover: Auto-playing will pause when the user hovers over the slideshow.

1.3.Prev next button

  • Use prev next button: This option allows you to enable/disable prev/next buttons for Slideshow.
  • Visible: You can choose between Always/ Only hover.
  • Button style: You can choose between Default, Outline, Simple.
  • Button shape(Not working with button style 'Simple'): You can choose between Default, Round, Rotate.
  • Button color: You can choose color for this button.
  • Buttons size: You can choose between Small, Medium, Large.
  • Hidden buttons on mobile: This option allows you disable this button on mobile devices.

1.4.Page dots

  • Use page dots: This option allows you to enable/disable page dot.
  • Dots style: You can choose between Default, Outline, Elessi.
  • Dots color: You can choose color for Dots.
  • Enable dots round: You can change dots from square to round.
  • Dots between horizontal: You can change the space between dots.
  • Hidden dots on mobile: This option allows you disable dots on mobile devices.

1.5.DESIGN OPTIONS

  • Layout: You can choose between Container and Full width. Besides, you can also choose background color for layout.
  • Background: You can change the background color for Slideshow section.
  • Background gradient: You can change the background gradient color for Slideshow section.
  • Margin, Padding: You are allowed to change both of them for Slideshow section.

1.6.DESIGN MOBILE OPTIONS

  • Margin, Padding: You are allowed to change both of them for mobile devices.

2.Slideshow content

2.1. Image Slide (parent)

Each image represents for one slide. You also can configure the images by clicking on them.
In this block, you can adjust your Images like Image position, Link Image, effect, etc. And the most importance is you can adjust BLOCK CONTENT POSITION, BACKGROUND, COLOR, ANIMATION with many options below:
  • Content align: You can align content to Left, Center or Right.
  • Content vertical position: If you set vertical < 50%, your content will be located to the Top position and vice versa for > 50% to the Bottom position.
  • Content horizontal position: If you set horizontal < 50%, your content will be located to the Left position and vice versa for > 50% to the Right position (You need to change the Content width to Auto first).
  • Overlay color: Overlay means to cover the surface of something with a coating. In other words, it is used to set one thing on the top of another.
  • Overlay opacity: You can set the overlay opacity value.
  • Background color: You can set background color for block content.
  • Background color opacity: You can set the opacity value for background color.
  • Content padding: You can set the padding for Block content on desktop or mobile devices.
  • Border content: You can set color, opacity, style, padding for border content.
  • Duration animation each block: You can set the time for each block show up.
  • Time animation delay: Defines the number of time to wait when the animation previous end, before the animation next will start.
Example: If you set 5s for the "Duration animation each block" and 30% for "Time animation delay", each block will show up alternately after 1.5s apart.

2.2.Text

With this block, you can add a text to the slide image and you can adjust text with many options like Font family, Font size, color, etc.

2.3.Button

This block allows you create a button for the slide, you can customize this button with many options like add a link, style, effect, color, etc.

2.4.HTML

This block allows you to add a HTML codes to the slide.

2.5.Image (Child)

With this block, you can add a Image(child) inside the Image(parent) and you can adjust the Image(child) more creatively.

2.6.Countdown timer

This block help you add the countdown timer and set it very easily just by adding the date countdown into.

2.7.Space HTML

This block allows you to create a separator line for this section.
You can customize some options for Space HTML like Color, Width, Height, Margin.

[Private offer] Kalles Partner Plan

Don't have to be a tech-savvy, you surely can create your powerful and eye-catching store with EComposer - Visual Landing Page Builder app - Our free Add-on for Kalles 4.
No more code headaches - FREE 100% lifetime (save your $150 annually) - delicate support.
Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for FREE.