With Maker you can crate three different types of sliders- an Element Slider, Image Grid Slider and Section Slider.
Start by adding a slider layout from the Media Panel. Next, with the grid selected, click on "Add Elements" option from the right side contextual panel.
Add images, textboxes, video and embeds like form etc.To add products, search for the product using a URL or via the Google product feed that is integrated with Maker and click to add the products to the new layout.
To re-order the elements, drag the elements up or down on the contextual panel, and to delete, simply click on the trash icon on the contextual panel.
This layout lets you switch between grid, list and slider view on breakpoints. To learn more about Element Layouts, click here.
To create an Element Slider, you will first begin with an auto grid or an advanced grid. After adding images, text and other elements like Product Cards to your story, select the grid and convert it to a slider using the right-side panel:
After you've created your slider, you can customize the slider using the contextual panel on the right. You can control the following features: mode, slider height, slider width, slides to scroll, dots, arrows, loop, autoplay, transition and transition speed. In addition, you can customize the arrows and dots that appear for the slider including their on hover appearance.
Note: If you are considering adding a hover effect, it needs to be added on the desktop breakpoint.
Note: For Slider Mode, using center looks best when all of the images or elements in the grid have the same aspect ratio.
With the Section Slider you can convert a section, Auto Grid layout, and an Advanced Grid layout into a slider. Section Sliders is not limited to a specific layout type - you can combine different layots based on your design and turn them into a section slider. All features supported for that layout type are supported in the slider.
Once your grids are ready click on the Layers tab on the media panel on the left and select the grids that will be converted into a slider.
To select the grids on the Layer tab, please use the keyboard controls on your device. (If you're working on a Mac, select CMD before selecting the grids with your mouse. If you're working on a PC, select CTRL before selecting the grids with your mouse.)
Once the girds are selected you will see an option on the right-side panel where you will simply click ‘Create Section Slider’
Note: The sections don’t need to be stacked next to each other in the editor to be combined into a slider.
Once the Section Slider is created, you will see various options in the contextual panel on the right for turning on full width, auto play, and navigation for your section slider. As a reminder, Navigation is set to ON by default.
Note: To turn on/off visibility of a Section Slider, use the visibility icon found next to the section slider on the layers panel instead of turning off the visibility of each individual slide. Once you've made your selection, click on Done.
Once the section slider is created, the slides are no longer editable.
To make any edit to the section slider, select “Edit Section Slider” on the right-side panel. The slider converts back to editable grids and you can proceed to make edits. Once all edits have been made, just click DONE on top of the screen and the sections will then return back to the Section Slider state.
After you've created your section slider, you can customize the slider using the contextual panel on the right. You can control the following features: mode, slider height, slides to scroll, dots, arrows, loop, autoplay, transition and transition speed. In addition, you can customize the arrows and dots that appear for the slider including their on hover appearance.
Note: If you are considering adding a hover effect, it needs to be added on the desktop breakpoint.
