Shopify themes, liquid, logos, and UX
This is an advanced tutorial and is not supported by Shopify. It is specific to an unedited version of the Debut theme, released 7th of March. We cannot guarantee results for themes that have been modified with custom coding and/or apps.
We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial. We would also advise making a backup of your theme.
Having a sticky header means that the navigation, logo, and icons will follow the user while they scroll down the page. This is really useful if you want to ensure that your customers will have easy access to your navigation at all times! Let’s take a look at how to implement this for the Debut theme.
We recommend having your header set as Logo Alignment: Left. This is the default setting for the Debut Theme but it can be changed. To do this, you would need to open the Theme Editor.
On the left-hand side, click on the Header section and, from here, you will be able to change the alignment.
This is an important step, as the header will be shown on every portion of the page as you scroll. Setting the logo alignment to left will ensure the header takes up less space on the screen. We also can't ensure that the customization will work if this setting is not activated.
If you have an Announcement bar, and would like for it to not move with the rest of the header, please refer to option 2 of this guide.
This will make the whole header sticky, including the announcement bar.
theme.scss.liquid
file.#SearchDrawer { z-index:1001; } #shopify-section-header { position: fixed; z-index:1000; left:0; right:0; -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); background-color: {{ settings.color_body_bg }}; } #PageContainer { padding-top: 80px; } @media screen and (max-width: 749px) { #PageContainer { padding-top: 70px; } }
theme.js
file.function headerSize() { var $headerHeight = $('div#shopify-section-header').outerHeight(); $('#PageContainer').css('padding-top', $headerHeight); } $(window).on("load", headerSize); $(window).on("resize", $.debounce(500, headerSize));
And that's it! If you would prefer for the announcement bar to not scroll with the user, then you would need to follow the steps below.
In this section of the guide, we are assuming that you did not use the code above. If you have used it previously to make the whole header sticky, then you would need to revert your changes to make sure that you are working on an untouched theme.
theme.scss.liquid
file.#SearchDrawer { z-index:1001; } .site-header { position: fixed; z-index:1000; left:0; right:0; -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); box-shadow:0px 2px 4px 0px rgba(0,0,0,.1); } #PageContainer { padding-top: 80px; } @media screen and (max-width: 749px) { #PageContainer { padding-top: 70px; } }
theme.js
file.function headerSize() { var $headerHeight = $('div#shopify-section-header').outerHeight(); $('#PageContainer').css('padding-top', $headerHeight); } $(window).on("load", headerSize); $(window).on("resize", $.debounce(500, headerSize)); $(window).scroll(function() { scroll = $(window).scrollTop(); if (scroll >= 1) { $('.site-header').css('top', '0'); } else { $('.site-header').css('top', 'initial'); } });
To learn more visit the Shopify Help Center or the Community Blog.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024