Header: Set up your sidebar menu

Venue comes with a built-in sidebar menu which is held in a slideout style drawer, this is the default menu on mobile devices and smaller-sized screens, it can also be enabled on desktop.

Set up a sidebar menu for your mobile users

1

Log in to your Shopify store admin

2

Click on Online Store then Themes in the side menu to get to the themes area of your admin.

3

Click the Customize button next to your active theme to go to the theme editor.

4

Click on the Sidebar menu option in the left side menu.

5

From here, use the  Menu picker to select the navigation menu you want to use. If you want the same menu to appear on mobile and desktop, then make sure the same menu is selected in your Header settings

Here's a screenshot example set up:

See the links at the bottom of this page if you need help setting up your desktop header menus.

6

Click Save and check your work.

Optional: Set up a sidebar menu for both desktop and mobile users

After completing the above steps, you can then set the sidebar menu to display on desktop and mobile, here are the steps:

1

Log in to your Shopify store admin

2

Click on Online Store then Themes in the side menu to get to the themes area of your admin.

3

Click the Customize button next to your active theme to go to the theme editor.

4

Select the Header option from the side menu.  

5

Under the Navigation style dropdown, select Icons. 

6

Click  Save and check your work.

Caution: Please be aware that hiding your desktop navigation behind a 'hamburger' icon can make your links less 'discoverable' and can result in fewer clicks. Please read this article for more on this subject. On desktop widths, we recommend you leave your links exposed in the header.

Change the color of your sidebar

1

Log in to your Shopify store admin

2

Click on Online Store then Themes in the side menu to get to the themes area of your admin.

3

Click the Customize button next to your active theme to go to the theme editor.

4

Click on the  Sidebar menu option in the left side menu.

5

Scroll to the bottom until you see the Theme settings section. These settings are hidden until you click on them.

6

Once opened the options  Background color and  Text color can be used to select the color settings of the sidebar menu.

7

Click  save and then check your work.

Caution: If you change the background color of your sidebar to a dark color, like black, then you also have to change the text setting to Light - or else your visitors won't be able to read the sidebar links and see the icons. The inverse is true if you opt for a light background color. In this case, you would set the text color to Dark.

A quick tour of other settings in your sidebar

If you want to see all of these features in action please view this demo store on a mobile device or make your desktop browser as narrow as it will go.

• Menu - as outlined above - this is where you pick the menu to be displayed to your visitors in the sidebar.
• Contact info - This is where you can decide to display your contact details in your sidebar. You can choose a heading e.g 'Get in touch' and decide if you want to show your email and phone number. This section is placed here because it's often hard for visitors to find store contact details in the footer of a site on a mobile device as it involves lots of scrolling.
• Language selector - If you have set up multiple languages in your store admin, users will be presented with a drop-down language switcher in the bottom of the sidebar.
• Currency selector - If you have set up multiple currencies in your store admin, users will be presented with a drop-down currency switcher in the bottom of the sidebar.
• Social links - This is where you can decide to display links to your social profiles using icons. Like contact details, it's more convenient to show these in the sidebar than just the store footer.
• Image, Image link, Text - this is where you can set up an image link with an optional description of a sale, gift card, blog post, a new product release or anything else you want to communicate to your visitors. This has similar functionality to the desktop 'mega navigation'
• Link label, Link - this is where you can set up a text link to a sale, gift cards, a new product release or anything else you want to communicate to your visitors.