Slideshow section

We added a slideshow section to the Charge theme homepage by default. You can hide it by using a visibility badge. To customize the section, go to the Online Store - Homepage -Slideshow.

You have to start with general slideshow settings. Here, it is possible to:

• Enable continuous loop.
• Set the slider to autoplay. That will make the slides come from left to right or from first to last.
• Choose the transition effect between Scroll, Fade, and Fade zoom-in.
• Set a delay between transitions. This value is available in case of autoplay is enabled.
• Set the number of slides per view.
• Select the slide height. Available values are Auto, Small, Medium, Large, and Adapt to the first image. 
• Show navigation buttons.
• Choose the navigation position between Sides, Right, and Left.
• Show pagination.
• Add animation slider content.
• Preload the first slide. 
• Show the top and bottom borders.
• Choose the navigation styles. The expanded styles configuration is available from the 3.0.0 release. Here you can set a max width of the container, choose a background and background gradient colors, and the color for the buttons.

• Make the slideshow visible on all screens (set by default), Desktop only, and Mobile only. This feature is available from the 1.7.0 Charge theme version. It allows you to have separate slideshow sections. You can set one slideshow to be shown on mobile only and the second one to be shown on the desktop only. Let's see how to make it possible.

Note: You can show a separate slideshow for mobile and desktop users.  You have to add the next slideshow section as it will be shown in the image below. Press the Add section button, and choose a Slideshow. 

Then drag the newly created Slideshow section to the top. Now you can see 2 slideshow sections. And for each one, you must configure the Visible on option.

Image and Slider Content settings

When you add a slideshow section to Shopify, you have to customize the image and slider content. 

Image settings:

• Specify the heading.
• Add the new image, change or remove it.
• Add the image and video links to other pages of your Shopify site.
• Select the internal video source. 

Note: The option “Video link” has more priority over an Image. It means if using both options as a Slider Image, the video will be loaded first. It is also possible to control the video slider height by adding the Image slider. The video will be loaded in the Image size.

Slider content settings:

• Create a heading.
• Set the heading size. The available values are H1, H2, H3, and Theme appearance. See the recommendations about the correct usage of headings for better SEO.
• Specify the body text.
• Add a button label and a link to the button.
• Choose the position for the content between Left (default), Center, and Right.
• Set the background color and opacity.
• Choose the colors for the text, button background, and button label.