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
- 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.
How to set up the navigation panel
- In the Shopify admin area go to Online Store > Navigation.
- 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.
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.
Why isn't my navigation panel showing the options that I expect?
Check that the menu has been set up correctly in Online Store > Navigation and that the correct menu has been selected. Within the selected menu, double check that the menu links have all been created at the correct level, following the principles shown in the How to set up navigation slideshow section.
How can I change the layout of the navigation panel?
The navigation panel is anchored to the right hand side of each slide. We find that this is the most convenient location for the majority of merchants, but if you'd like more granular control over positioning, you can hire a developer to extend the theme to support this.
Why is the price range slider not showing?
The price slider is available if a collection is selected as part of your menu structure and the store is in the default currency. If the customer is not browsing the store in the stores default currency, the price range slider will not show.
Why is my image being cropped?
By it's nature, a slideshow contains several different images, all of which are shown in the same sized space. You may find that you can set up your slideshow such that the first image displays perfectly, but if subsequent images have different dimensions - parts of the images will be cropped.
This is best illustrated below:
The best way to avoid this is to set the Image height setting use the Height of first image option, and then make all images within the slideshow the same dimension. This will ensure that the entire image is shown for all slides.
To read more about aspect ratios, refer to the Shopify Understanding image aspect ratio guide.
Focal points may also affect image cropping. Focal points allow you to choose the part of the image which should remain in view, no matter what the screen size. This means that parts of the image may be cropped to ensure that the focal point remains visible. Read Shopify's Focal points guide for more on this.