Merchants often use a Slideshow at the top of the home page to showcase their most recent deals and top-selling products. Grid comes with a sophisticated, responsive slideshow that can hold up to six slides. Each slide allows for a unique image, heading, subheading, and call-to-action link.
Use the theme editor to select a layout option, change color of the next and previous controls, activate automatic slide rotation, add slides to your slideshow, set the text alignment settings, and add text and links for the Slideshow section.
Add Slideshow to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Slideshow
- Click the section, then Add
Select a layout option
Grid's Slideshow comes with two Layout options: Full width and Content width. Checking Full width will make your slides full-bleed and will extend right to the edges of your screen. Checking Content width will make your slides display their images in their original dimensions, padding the sides of your slideshow with whitespace if they are narrower than the width of the browser.
Change color of the next and previous controls
The next box allows you to customize the color of the Slideshow controls (that's the arrows that let users click through your slides).
Activate automatic slide rotation
Checking the Auto-rotate slides box means that your slides will rotate based on the Rotation interval (2-20 seconds) you set below. If you leave this box unchecked, users will still be able to scroll through slides manually using the arrows at the edge of the slideshow.
The Pause auto-rotate on hover checkbox pauses the rotation of your slides when a user hovers their cursor over your slideshow.
Add slides to your slideshow
Upload the images to use and customize the text overlays by clicking on Slide to expand.
Start by uploading your Image. We recommend a 2880 x 1280px .JPG file.
Set the text alignment settings
Select the text alignment under Align text. Grid allows you to choose the placement of your text content (left, center, right) on a slide-per-slide basis. This way, the content of each slide can complement the composition of each image you choose. You can also choose the color of the text using the Overlay text color picker.
Add text and links
In the boxes below, you can input and format the slide’s Heading, Subheading, Button, and Link (look at the live preview to see the formatting for each). You don’t need to fill every field if you don’t want to—you may not want to include any text at all!