How Do I Change The Main Menu Color In Shopify

Navigation: Gear up upwardly your sidebar menu

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

A. Ready a sidebar menu for your mobile users

Pro tip: It's important to note that the carte yous choose to be displayed in the sidebar for visitors using a mobile device tin can be completely independent of the 1 shown on your desktop site if y'all want.

However if you desire the same bill of fare to exist used on all devices and so select the same menu when setting up your Sidebar and your principal bill of fare in the Header section eastward.g 'Principal card'. The visual pattern will differ because the layout of a desktop 'mega nav' won't fit into the limited space of a sidebar menu. The compages volition exist the same and right eastward.g Accessories > Shorts.

1

Log in to your Shopify store admin

ii

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

3

Click the Customize push button side by side to your agile theme to go to the theme editor.

four

Near the meridian of the side bill of fare  - on the left of your screen -  you will see a section chosen Sidebar menu. Click that to first editing your sidebar. Once the editor is open up look for the Menu picker at the top of the editor. As noted to a higher place - if you want the same menu displayed to your visitors on mobile AND desktop devices brand sure this is the same card you have set up in your master Header section eastward.one thousand 'Main menu'

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

5

Remember to save and then check your work.

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

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

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

C. Modify the color of your sidebar

1

Log in to your Shopify store admin

2

Click on Online Store and then Themes in the side carte du jour to become to the themes area of your admin.

three

Click the Customize button adjacent to your agile theme to go to the theme editor.

4

Virtually the pinnacle of the side carte  - on the left of your screen -  yous will see a section called Sidebar menu. Click that to start editing your sidebar.

5

Gyre to the bottom until you see the Theme settings section. These settings are subconscious until y'all click on them.

half dozen

At the top of the theme setting you lot will run across a color picker chosen Background color along with a Text colour dropdown. Use these to change your sidebar colors to your make or preference.

Circumspection: If yous change the groundwork color of your sidebar to a dark color, like black, then you besides 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 changed is true if you opt for a light background color. In this instance you lot would set the text color to Dark.

seven

Remember to save and then bank check your work.

A quick tour of other settings in your sidebar

If you want to see all of these features in activeness please view this demo shop on a mobile device or make your desktop browser as narrow as it volition get.

• Card - as outlined above - this is where yous pick the menu to be displayed to your visitors in the sidebar.
• Contact info - This is where you can determine to display your contact details in your sidebar. You can cull a heading e.1000 'Go in impact' and decide if you want to show your email and phone number. This section is placed hither because it's oft difficult for visitors to find store contact details in the footer of a site on a mobile device every bit 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 downwards language switcher in the lesser of the sidebar.
• Currency selector - If yous have prepare 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 tin can decide to display links to your social profiles using icons. Like contact details, information technology's more user-friendly to show these in the sidebar than just the store footer.
• Prototype, Image link, Text - this is where y'all can fix upwardly an paradigm link with optional clarification to a auction, gift carte, weblog 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 tin gear up upwardly a text link to a sale, souvenir cards, a new production release or anything else you want to communicate to your visitors.

Final updated on October 30, 2021

Source: https://support.safeasmilk.co/article/125-general-set-up-your-sidebar-menu

Posted by: maglioneaboustinger.blogspot.com

Share this post