What is the navigation slideshow section? #
This section shares the same characteristics as the slideshow section, but has an additional customizable navigation panel that shortens the time it takes for your customers to find the product range that they’re interested in. The navigation panel sits over all slides and Enterprise is the first theme to offer this innovative functionality.
How to set up the navigation slideshow #
Steps
- Open the Theme Editor and add the Navigation slideshow section.
- Click Add Slide.
- Within each slide block, insert images for both mobile and desktop devices.
- Within the Layout settings, there is the opportunity to set a fixed height across main device types.
- In the Slideshow appearance settings, there is the option to set Pagination style, Pagination position, Slide transition, Auto-rotate slides, enable the display of a pause button and the ability to set the display time of each slide.
Note
You don’t have to use this section to link to just products/collections. It could direct the customer to any page within your store. For example, it could be used to quickly navigate to after-sales documentation about a product.
How to set up the navigation panel #
Steps
- In the Shopify admin area go to Content > Menus.
- Create a menu that has several main categories. Underneath each first-level category, create two or more further sub-categories. For example, on the Digital demo store, ‘Digital cameras’ is the main category, ‘Cameras’ is the second-level category and then ‘DSLR cameras’ is the third-level category (among others).
Refer to the Shopify How to set up Menus and links documentation for more.- Open the Theme Editor and click on the Navigation slideshow section.
- In the Navigation panel settings select the newly created menu.
- Within the three Menu settings, there are five different display styles that you can use to customize the navigation panel further.
- Within the Accessibility/SEO settings, a Slideshow description can be added. This is hidden text that will be read out by screen readers and will describe the content of the slides.
Notes
A price slider is available if a collection is selected as part of your menu structure and the store is in the default currency.
The navigation panel will be the same on all slides. You cannot have different navigation panels on different slides.
How to improve speed scores #
In order to maximize the speed scores in Enterprise, the section can be loaded without animations. This should only be used if this section is visible when the page loads. To do this, tick the Load the section without animation setting. Refer to our Performance guide for more.
