8 Steps to Add Sliding Side Navigation Bar to Debut Theme Shopify - Made4uo - Great Gift Deals

8 Steps to Add Dancing Custom Sliding Side Navigation Bar

Log in or Sign up to ensure access to FREE code across multiple devices.

Helpful Free links

Migrating to Shopify Transferring Domain to Shopify Master sections and blocks Free Essential tools Custom App Creation Shopify theme templates Add custom CSS to themes Master product variants in Shopify Free Shopify Themes How to customize Shopify themes Automate your store processes Improve store's search Free apps to enhance your store Upload and manage files Facebook ads for your Shopify Shopify Support Stay updated with Shopify changes Join Shopify Community for free help

Compatibility: Old or Legacy Shopify themes only

Create a eye catching customizable sliding side-nav. Customize the sidebar without destroying your code.

Below are the steps in adding sliding side bar to your Shopify - Debut Theme. This sliding bar will show in every page of your website.

 To start:

1. First, we have to add a Sidebar menu in the Navigation
Go to Online Store >Navigation> Click Add menu.
2. Make sure you write title "Sidebar Menu"
3. Link collections you want to show
4. Click "save menu"
5. Then, we need to go to Online store> Themes> Actions> Edit code>
6. Go to Section folder, create a new section and name it custom-sidenav. Replace the code below, then click SAVE


7. Go to Layout folder and open theme.liquid. After section header, place the code below, then click SAVE


8. Add the section and customize the section

 Tips: Sidebar is created as a section so customizing will be easy. If you know a little about coding.

You can create a snippet instead and render the code in the header section. 

To render the code in the header.liquid, just place this code below before the </header>.

 

For full instructions on creating a Snippet Sidebar, visit the link with a code.

 

That's it (",) 

Copied!

Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Back to blog

2 comments

@Antonia Mungin Which menu you want?

Made4uo

how can i change the menu i want to use because it reverting back and i have a custom menu i want to use

Antonia Mungin

Leave a comment