custom liquid announcement bar cant make it sticky

daknbiz · ‎08-01-2024

can't seem to make it sticky, tried messing around with code in the base.css and no luck. Any help would really be appreciated!

I am using the Shrine Theme!

Dan-From-Ryviu · ‎08-01-2024

Maybe too much code. Please add this code to theme.liquid file, after <head> and save file

<style>
.shopify-section-group-header-group:has(#countdown-banner),
.announcement-bar-section {  position: sticky; }
.shopify-section-group-header-group:has(#countdown-banner) { top: 0px; }
.announcement-bar-section { top: 43px; }
body .shopify-section-header-sticky { top: 81px }
@media (max-width: 749px) {
.announcement-bar-section { top: 34px !important; }
body .shopify-section-header-sticky { top: 70px !important; }
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎08-01-2024

Hi @daknbiz

Please share the link to your store so I can check and give you the code

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

daknbiz · ‎08-01-2024

The custom liquid announcement bar at the top with the countdown timer, cant seem to make it sticky.

Dan-From-Ryviu · ‎08-01-2024

Please add this code at the bottom of your base.css file

.announcement-bar-section { top: 0; position: sticky; }
body .shopify-section-header-sticky { top: 38px }

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

daknbiz · ‎08-01-2024

Could you check it again, I added the code at the bottom of base.css on a new line. Still not sticky 😞

Dan-From-Ryviu · ‎08-01-2024

Maybe you caused something not right on your base.css file, please try to move that code to Custom CSS in Online Store > Themes > Customize > Theme settings and check again.

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

daknbiz · ‎08-01-2024

It worked for one of the announcement bars the free shipping one. But not for the countdown at the top.

Dan-From-Ryviu · ‎08-01-2024

Please update the code

.shopify-section-group-header-group:has(#countdown-banner),
.announcement-bar-section {  position: sticky; }
.shopify-section-group-header-group:has(#countdown-banner) { top: 0px; }
.announcement-bar-section { top: 43px; }
body .shopify-section-header-sticky { top: 81px }
@media (max-width: 749px) {
.announcement-bar-section { top: 34px !important; }
body .shopify-section-header-sticky { top: 70px !important; }
}

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

daknbiz · ‎08-01-2024

perfect!! I just now can't seem to get it to save

daknbiz · ‎08-01-2024

Also, tried saving but it says "Online store editor cannot be published"

Dan-From-Ryviu · ‎08-01-2024

Maybe too much code. Please add this code to theme.liquid file, after <head> and save file

<style>
.shopify-section-group-header-group:has(#countdown-banner),
.announcement-bar-section {  position: sticky; }
.shopify-section-group-header-group:has(#countdown-banner) { top: 0px; }
.announcement-bar-section { top: 43px; }
body .shopify-section-header-sticky { top: 81px }
@media (max-width: 749px) {
.announcement-bar-section { top: 34px !important; }
body .shopify-section-header-sticky { top: 70px !important; }
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

daknbiz · ‎08-01-2024

thank you so much it works!!!

Dan-From-Ryviu · ‎08-01-2024

Very welcome!

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

daknbiz · ‎08-02-2024

Hey Dan,

I ran into another issue. On Chrome and every other browser, it works perfectly. However, on Safari on my Mac there's a slight gap between the countdown banner and the announcement bar. Any way to fix this or could it just be a Safari issue?

Dan-From-Ryviu · ‎08-02-2024

Please update the code

<style>
.shopify-section-group-header-group:has(#countdown-banner),
.announcement-bar-section {  position: sticky; }
.shopify-section-group-header-group:has(#countdown-banner) { top: 0px; }
.announcement-bar-section { top: 42px; }
body .shopify-section-header-sticky { top: 81px }
@media (max-width: 749px) {
.announcement-bar-section { top: 34px !important; }
body .shopify-section-header-sticky { top: 70px !important; }
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

daknbiz · ‎08-02-2024

okay so now on safari and every other browser there's no gap between the countdown banner and announcement bar. However, now there's a gap between the announcement bar and header.

daknbiz · ‎08-02-2024

thank you! I figured out how to fix it on my end 🙂

custom liquid announcement bar cant make it sticky

custom liquid announcement bar cant make it sticky

Community Blog Articles