General: Set up your sidebar menu

The Venue theme comes with a built in sidebar menu. This slide out drawer is mainly used when visitors view your site on a mobile device but can also be used for visitors viewing your store on a desktop device.

A. Set up a sidebar menu for your mobile users

Pro tip: It's important to note that the menu you choose to be displayed in the sidebar for visitors using a mobile device can be completely independent of the one shown on your desktop site if you want.

However if you want the same menu to be used on all devices then select the same menu when setting up your Sidebar and your main menu in the Header section e.g 'Main menu'. The visual design will differ because the layout of a desktop 'mega nav' won't fit into the limited space of a sidebar menu. The architecture will be the same and correct e.g Accessories > Shorts.

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
Near the top of the side menu  - on the left of your screen -  you will see a section called Sidebar menu. Click that to start editing your sidebar. Once the editor is open look for the Menu picker at the top of the editor. As noted above - if you want the same menu displayed to your visitors on mobile AND desktop devices make sure this is the same menu you have set up in your main Header section e.g 'Main menu'

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

5

Remember to save and then check your work.

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

The steps are identical as those listed above. The only difference is you have to make sure you have selected Icons as the navigation style in your main Header section of the theme editor. This will then force the desktop site to use the a mobile style Sidebar menu for visitors using a desktop browser.

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

C. Change the color of your sidebar

1
Log in 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

Near the top of the side menu  - on the left of your screen -  you will see a section called  Sidebar menu. Click that to start editing your sidebar. 

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

6
At the top of the theme setting you will see a color picker called Background color along with a Text color dropdown. Use these to change your sidebar colors to your brand or preference.

Caution: If you change the background color of your sidebar to a dark colour, 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.

7
Remember to save and then check your work.

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 the 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 the 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 optional description to 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.  
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.