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.

Click here to view our example store

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.

Not a problem! post a comment below and we can definitely help you with whatever issues you might be having.

This is an advanced tutorial that Shopify does not support. For themes that have been customized with custom coding and/or apps, we cannot guarantee outcomes.

If you’re not sure how to proceed with the following guide or want to make any changes, we recommend posting in our comment section.

The above guide was completed on an unedited version of the Debut theme, downloaded on 3rd of August, 2021.
Posted by
Bluish Team

A group of Shopify developers, SEO experts, and Social Media marketers who have been in ecommerce game for over 4 years. Our Team has worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

2 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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *