Shopify Debut theme
Shopify

How to Create a Fixed/Sticky Header on Shopify Debut Theme

Do you need your header to follow your customers scroll? Then follow this guide to make the Debut theme header sticky.

Although the Debut theme on the Shopify theme store is excellent for starter entrepreneurs who want to get into the Shopify game. There are limitations of functionality within the theme which can cause UX issues to your customers.

One basic and very UX friendly functionality is having the header always fixed at the top of the screen, no matter where your customer scrolls down the page. This will ensure your customers will have easy access to your navigation at all times!

Let’s get down to business.

Go to the Shopify theme edit code. Head over to the Assets folder and click theme.css. At the very bottom, paste the below code.

#PageContainer {
    padding-top: 0 !important;
}

#shopify-section-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    padding-top: calc(0px + 0px);
    z-index: 100;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
    -moz-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
    -ms-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
    -o-box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, .06);
}

#SearchDrawer {
    z-index: 101;
    height: 100px !important;
}

.announcement-bar {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 100;
}

.search-bar {
    position: fixed;
    top: 0;
    z-index: 102;
}

In the same Assets folder and click theme.js, within the file search for the below code and delete the line.

window.scrollTo(0, 0);

Viola! you now have a sticky/fixed header on your Debut theme.

Posted by
John From Jotting

Shopify developer, SEO expert, and Social Media marketer who has been in ecommerce game for over 4 years. I've worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

6 Replies to How to Create a Fixed/Sticky Header on Shopify Debut Theme

    1. No problems :), yes there is some padding issues on some code, at the end of the day, it just depends on what you have on the theme. Can always solve the padding issue.

      I also noticed you have a currency converter, which looks like an app? I got a blog for that too, how to add a inbuilt currency converter for debut theme 🙂

  1. Bro Thank you so much for this!!! But I would also like to know it’s have another way to work with [STICKY HEADER WITHOUT THE ANNOUNCEMENT BAR] ?

    1. Hi Carlos,

      That would require a rework, imo not worth it for me as Dawn theme is the way to go for shopify development. I do have a tutorial for dawn theme which does exactly this, making header sticky and doesn’t make announcement sticky.

Leave a Reply to wils Cancel reply

Your email address will not be published.

Bluish has rebranded to Jotting :) X