How to Add and Customize Hero Slider with Vertical Navigation

Getting Started

The Hero Slider with Vertical Navigation is a convenient tool for displaying multiple images across slides while also allowing for a pre-made menu to be attached and displayed. Because these menus are pre-made, you will be unable to attach menus to this block if you have not made them prior. For more information, check out How to Create and Manage Menu Items.

We recommend utilizing these slides to display large amounts of information concisely through a visual medium. This is where updates, new product drops, events, etc. can be easily displayed.

In order to begin customizing this section, follow these steps:

From your myShopify homepage, go to Online Store > Themes
Find and click Customize
You will see the customization menu on the left of your screen. Find and select Slider with Vertical Menu
If you do not see Slider with Vertical Menu, scroll to the bottom of the customization menu and select Add section
From here, find and select Hero Slider with Vertical Navigation to add the block to your page

Once you have opened the customization tab for the Slider with Vertical Menu block, you will find several areas for customization:

Menu
Show Advanced Search
Link to Advanced Search Page
Show Multi-Card Search
Link to Multi-Card Search Page
Menu Text Color
Menu Background Color
Show Back and Forward Buttons on the Slider
Show Page Indicator Dots on the Slider

This section includes a text box allowing for a link to pre-made menus to be added. This allows for you to link a menu to your Hero Slider. In order to add your pre-made menus, simply find and select Add Menu and search for what you wish to link here. It will look something like this:

Show Advanced Search

This section includes a tick box allowing for the display of the Advanced Search on the Hero Slider's attached menu.

Link to Advanced Search

This section includes a text box that allows for your store to connect a link to the above Advanced Search Button. You can utilize this text box to insert either a direct link through a URL or by selecting the text box and searching through collections. It will appear something like this:

Show Multi-Card Search

This section includes a tick box allowing for the display of the Multi-Card Search on the Hero Slider's attached menu.

Link to Multi-Card Search Page

This section includes a text box that allows for your store to connect a link to the above Multi-Card Search Button. You can utilize this text box to insert either a direct link through a URL or by selecting the text box and searching through collections. It will appear something like this:

Here you will find the option to customize the text color for your content block.

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

Here you will find the option to customize the background color for your content block.

When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store

Show Back and Forward Buttons on the Slider

This section includes for a tick box allowing for the addition of forward and backward buttons allowing for navigation through the image slides in your slideshow.

Show Page Indicator Dots on the Slider

This section includes a tick box allowing for the inclusion of slide notification dots. These dots will signify which image slide is currently being displayed.

Finding Slide Settings

Following the customization of the Slider with Vertical Menu settings, you will want to create and fully customize the slide blocks displayed on your page. In order to do begin doing so, please follow these steps:

From your myShopify homepage, go to Online Store > Themes
Find and click Customize
You will see the customization menu on the left of your screen. Find Slider with Vertical Menu
If you do not see Slider with Vertical Menu, scroll to the bottom of the customization menu and select Add section
From here, find and select Hero Slider with Vertical Navigation to add the block to your page
From Slider with Vertical Menu , select the drop down arrow and select Add Slide
Select the new slide block

Adding and Customizing Slides

Once you have opened your new Slide, you will want to begin by customizing and clearly presenting your Slides. As you begin this process, you will notice the following categories for customization:

Title
Subheading
Slide Background Image
Button Text
Button Link

Title

This section includes a text box allowing for the customization of a content title. This title will be positioned below the Subheading and overlaid on the Slide Background Image. For the Title, we recommend something attention grabbing and catchy to capture the eye of customers.

Subheading

This section includes a text box allowing for the customization of the content description. This Subheading will be positioned above the Title and overlaid on the Slide Background Image. For the Subheading we recommend something sufficiently descriptive of the slide being displayed.

Slide Background Image

In order to add a new image to your block, click Select Image. From here you can upload or select the image your store wishes to display in the slide. Please note that the recommended image size is beneath this section. It will look something like this:

After you have chosen your image, you will notice another customization option become available: Add alt text.

Adding alt text is a good way for your to include addition descriptions that will appear just beneath your icon. You can add up to 255 characters to this alt text feature

Button Text

This section includes a text box allowing for the customization of the message that will appear on your slide's content Button.

Button Link

This section includes a text box that allows for your store to connect a link to the above Button. You can utilize this text box to insert either a direct link through a URL or by selecting the text box and searching through collections. It will appear something like this: