We added 3 slideshow sections to the Charge theme homepage by default. Still, you can hide some 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:
- Set the background color.
- Set the maximum width of the container.
- Make your slider loop continuously.
- Set the slider to autoplay. That will make the slides come from left to right or 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.
- 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 the one slideshow shown on mobile only and the second one to be shown on the desktop only. Let's see how to make it possible.
- 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.
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 on 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 slide 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.
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.
- Set the body text.
- Add a button label.
- Add 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 text.
- Show the video in the slider section:
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.
Comments
0 comments
Please sign in to leave a comment.