BACK

what is a sticky header shopify

How to Add a Sticky Header to Any Shopify 2.0 Theme in today's video i'm going to show you,how to ac

Ecom Geeks

Updated on Feb 02,2023

How to Add a Sticky Header to Any Shopify 2.0 Theme

The above is a brief introduction to what is a sticky header shopify

Let's move on to the first section of what is a sticky header shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

what is a sticky header shopify catalogs

How to Add a Sticky Header to Any Shopify 2.0 Theme

in today's video i'm going to show you,how to achieve a sticky header on any,shopify 2.0 theme there is no,complicated coding involved anyone can,do this before we get into the video if,you like videos about winning products,drop shipping shopify themes apps and,tutorials do us a favor and hit that,subscribe button and turn notifications,on now let's get into the video you'll,notice that on all shopify 2.0 themes,that there is an option to turn on,sticky header however the sticky header,is only activated when you are scrolling,upwards on the page not down and what we,want is a header that stays in place no,matter which way we are scrolling i'm,going to demonstrate this on one of,shopify's newest themes taste and by the,way if you haven't seen taste yet i did,a video on it which you can watch here,but although i'm testing it for taste,this works on any 2.0 theme i've tested,them all but if you do end up running,into any issues and need some help you,can visit our website and fill out a,store tweaks request and we can help you,out so first duplicate your theme so,that you have a backup,to do this click the drop down under,actions,and click duplicate,once your theme has been duplicated,click customize,header,and you want to make sure that enable,sticky header is selected,click save,now exit,under your duplicated theme click,actions,edit code,again not to worry there's no,complicated coding involved so stick,with me,click on sections,now find header dot liquid,now scroll down until you get to line,591,then you should see this section of code,now the piece of code we are trying to,find contains the text shopify dash,section header dot hidden,you will notice that this text is,written under hide reveal and reset,ignore reveal and reset the only part we,are concerned about is this section of,code under hide,now highlight all the same text that you,see here,and delete it,this is what you should be left with,now click save,now let's take a look so click on online,store,click actions,and preview,now you can see that as i scroll through,the sticky header stays in place,if you like this video and want to see,more content like this you can let me,know by giving this video a thumbs up or,leave me a comment down below and if you,haven't already make sure to subscribe,we post a lot of time-sensitive content,such as winning products and updates,that affect you so turning on,notifications for this channel will let,you know as soon as we upload

Congratulation! You bave finally finished reading what is a sticky header shopify and believe you bave enougb understending what is a sticky header shopify

Come on and read the rest of the article!

Browse More Content