Slideshow
With the slideshow section you can easily add a mobile friendly slideshow that can be swiped, dragged and autoplay a variety of image and video based slides. The majority of shops using District take advantage this feature as the first, primary section on their home page. It is a great way to highlight your brand's new offerings, product, and promote store sales.
Layout Options
- Expand full width - Choose if the slideshow should fill the entire browser width or be limited to the 1180px page width
- Auto-play slides - Checking this option sets up the slides to automatically rotate between all slides
- Change slides every - If you check auto-play slides, you can use this option to determine how fast or slow the auto-play feature should change slides. You have the option to choose between 3 and 10 seconds.
- Show slide dots - Display dots below the slideshow for each slide and highlight the current active slide
- Show previous and next arrows - Add buttons to the left and right to allow visitors the ability to manually click next and back
Image Slides
With each image slide you have the option to upload an image, set the links and even overlay text content on top of slides. For best results, all of your slides should use images that are identical in size and ratio. One recommended size that works well for most shops is 1500 x 600px.
- Image - Upload an image to be used for the slide. All slides should use images that are identical in size. We recommend 1500 x 600px.
- Slide link - Add an optional link to the overall slide
- Heading and text - Add optional text to be show on top of the slide. For best results, the text should be short and brief.
- Button label and button link - Set up these options to display a styled button below the slide's text.
- Vertical and horizontal alignment - Choose where the text should appear on the slide
- Colors and overlay opacity - Set the text, accent and overlay colors to increase the readability of your slide's text. Using the overlay opacity option you can choose how transparent or opaque the solid color overlay appears.
Video Slides
It is possible to mix both image and video slides, however the size of the video slide is determined entirely by the fallback image's size. Our recommendation is to use the same fallback image size and ratio as the other image sizes, and for most stores the best size is 1500 x 600px. For best results on the video background, the video should be a long seamless looping sequence.
- Background video URL - Paste in a YouTube URL for the background video. The video should be a long, seamless looping sequence.
- Fallback Image - Upload an image to be used while the video is loading and for browsers that do not support auto-play video. Currently all mobile browsers do not support auto-playing background videos, so adding a fallback image is essential. Additionally the theme uses the size and ratio of the fallback image to determin the slide size. All slides should use images that are identical in size. We recommend 1500 x 600px.
- Slide link - Add an optional link to the overall slide
- Heading and text - Add optional text to be show on top of the slide. For best results, the text should be short and brief.
- Button label and button link - Set up these options to display a styled button below the slide's text.
- Vertical and horizontal alignment - Choose where the text should appear on the slide
- Colors and overlay opacity - Set the text, accent and overlay colors to increase the readability of your slide's text. Using the overlay opacity option you can choose how transparent or opaque the solid color overlay appears.