Compatibility: Compatible with Shopify Vintage themes ONLY
NOTE: This might not work on your current theme
Boundless Shopify theme has a customizable sidebar. Do you have a Shopify theme but wants sidebar? Look no further. Just follow three easy steps below.
Created with html and CSS code only with the use of input checkboxes that controls the other children or element.
Proven to work well in any Shopify themes that does not have sidebar.
- Go to Online store> Themes> Actions> Edit code>
- Go to Section folder, create a new section and name it custom-sidebar. Replace the code below, then click SAVE.
- Go to Layout folder and open theme.liquid. Add the code below after the header section, then click SAVE.
I created the code with only CSS to show how far can a CSS go. If you notice, the sidebar does not close when the mouse moves away. Hover in CSS would be so good to have but hover does not work with this set up. At least not yet, but we do not know in the future. Therefore, if you want the mouseleave function, or you want the sidebar close when the mouse leaves the sidebar, follow the instructions below.
- First, in the menu_icon, delete the (for="menu_toggle" ) in the label and add a the onclick function in the menu_icon (onclick="openNav()" )
Your code should look like this :
- Find the inside_menu_icon that was already checked. Delete the (for="menu_toggle" ) and add the onclick function in the menu_icon (onclick="closeNav()" )
Your code should look like this :
- Find the sideBar ID and add the (onmouseleave="closeNav()" )
Your code should look like this :
- Almost done. Lastly, we have to add the script code. Below the style tag <style>, add the code below:
There is a reason I added the onclick functions for the menu_icon inputs. If you notice, the code onmouseleave does not work well without it. It will only close the sidebar when the mouse leaves but when you click the menu again, it does not open.
I had provided several codes in the blog, check them out. And if you did use the code I have, it would be wise to sign up in the newsletter or subscribe in my youtube channel so you will be updated when I updated my blogs and youtube as well. Codes always change for the better and I keep my codes updated as much as possible.
Do not hesitate to contact me. I am open to suggestions as well on what to work for my next project.
Copied!
5 comments
This code works on Shopify vintage themes only, such us Debut and not Shopify 2.0 themes.
Hi,
it’s seems your code have any failure. Can you check it? When I copy your code and I want to save, I receive an error like this:
Liquid syntax error (line 202): Unexpected character in "settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or request.page_type == ‘article’ or request.page_type == ‘blog’ "
Can you help to fix ?
hi, do you have collection sidebar?
Please be reminded that this only works with the theme that does not have a sidebar (this include the sidebar when in mobile)
Doesnt work – multiple errors