Sticky header with debutify theme implementing via code (version 6.2.1)

Solved

Sticky header with debutify theme implementing via code (version 6.2.1)

Mein-Grinder
Tourist
9 0 1

Hello together,

 

i want a sticky header in my theme, i know i can buy an addon but it costs 29 euros.

And i dont want to pay 29 euros per month just to be able to use a sticky header on my webshop...

I found other ones like this: 

https://community.shopify.com/c/shopify-discussions/how-to-add-a-sticky-header-debutify-theme-versio...

 

but it doesnt work...

do i have to update my version? 

becuase i know its a premium addon and with premium it works...

i would rather implement it manually via code...

can someone help? 

i would be very grateful 😄 

 

debutify (version 6.2.1)

 

Greets 

 

Julian from my-grinder

 

Accepted Solution (1)
Moeed
Shopify Partner
4361 1123 1380

This is an accepted solution.

Hey @Mein-Grinder 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header.header--center {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}
</style>
<script>
var sticky = document.querySelector('.header.header--center'); 

window.onscroll = function(){

if(window.scrollY > 150) { 

 sticky.style.background = 'black'; 

} else {

 sticky.style.background = 'rgba(00, 00, 00, 0)'; 
}
}
</script>

RESULT:

 

Moeed_0-1720694340372.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 12 (12)

Moeed
Shopify Partner
4361 1123 1380

Hey @Mein-Grinder 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Mein-Grinder
Tourist
9 0 1

no the website is online and there is no pw on it 🙂

 

mein-grinder.com 🙂

Moeed
Shopify Partner
4361 1123 1380

This is an accepted solution.

Hey @Mein-Grinder 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header.header--center {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}
</style>
<script>
var sticky = document.querySelector('.header.header--center'); 

window.onscroll = function(){

if(window.scrollY > 150) { 

 sticky.style.background = 'black'; 

} else {

 sticky.style.background = 'rgba(00, 00, 00, 0)'; 
}
}
</script>

RESULT:

 

Moeed_0-1720694340372.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Mein-Grinder
Tourist
9 0 1

thank you very much i will try it as soon as i get home 😄 

Mein-Grinder
Tourist
9 0 1

MeinGrinder_0-1720851450583.png

This one, right?

 

it doesnt show me a code to work on or to implement the one i have from you...

Mein-Grinder
Tourist
9 0 1

Hello, can it be because of the payment plans? so that no one circumvent the payment plans? i dont get why i cant put in a code...

 

thats the answer of the support --> 

To add your code to the theme.liquid file in Debutify Theme, you should follow these steps:
  • Go to your Shopify Admin and select "Online Store."
  • Select your Debutify Shopify theme, click on "..." and choose "Edit code."
  • Open the theme.liquid file.
  • Paste your script before the closing </head> tag.
This process is for existing paid clients who have been using Debutify theme since the second quarter of the year or before and need to place a script code to keep using the add-ons.
 
 
i think this works only if i pay...
Mein-Grinder
Tourist
9 0 1

ok now it worked i tried the whole time to code the copy but i had to code the theme that is online...

one question how do i need to code if i want it to be white, so that when i scroll down the colour of the words changes to black so i can see it on the bar...

 

MeinGrinder_0-1721232726137.png

 

Moeed
Shopify Partner
4361 1123 1380

Hey @Mein-Grinder 

 

Since it's not possible via CSS only and will require custom liquid coding so I suggest you to hire a Shopify developer if you're not familiar with coding. Feel free to let me know if you want me to help you out and I would be more than happy to help you with that.

 

Best Regards,

Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Mein-Grinder
Tourist
9 0 1

how muchwould you want how much time do you need for the code?

Mein-Grinder
Tourist
9 0 1

nevermind, chat gpt solved it 🙂 

 

thanks skynet 😄 

oscprofessional
Shopify Partner
15961 2387 3095

Hello @Mein-Grinder 

Here are the steps to add a sticky header to your Shopify store:

- Go to your Shopify Admin.
- Navigate to Online Store > Themes > click on Actions > Edit code.
- Add the following code into your Layout > theme.liquid file.

<style>
.header .header__wrapper {
position: fixed;
width: 100%;
transition: background-color 0.3s ease;
}

.header .header__wrapper.active {
background-color: #87af7c;
}
</style>

<script>
var sticky = document.querySelector('.header__wrapper');
window.onscroll = function() {
if (window.scrollY > 150) {
sticky.classList.add('active');
} else {
sticky.classList.remove('active');
}
};
</script>

Please refer to the screenshot for reference.

oscprofessional_0-1720703019621.png

This code will smoothly transition the background color of your header as users scroll down the page.
Hope this works for you!!

Thank you !!

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Mein-Grinder
Tourist
9 0 1

same problem here it doesnt show me a code to work on...

and i cant put in a new code...

MeinGrinder_0-1720853801125.png

i tried deleting theme.liquid so that i can install it new but it doesnt work either...

support cant help me theytell me they are not ableto help in coding related topics....

 

heeeeellllppppp😭😭😭

 

Greets from the lake of constance,

 

Julian