Shopify themes, liquid, logos, and UX
Hey team,
Looking to make the header on ONLY this page non-transparent (ideally black header), so the tracking page doesn't sit behind it and is separate.
Any help is appreciated!
https://ap-perform.com/apps/track123
Solved! Go to the solution
This is an accepted solution.
Hi @Nato0201
You can try to add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code and check
<style>
body:has(#track123-app) sticky-header-mobile,
body:has(#track123-app) sticky-header { position: relative; }
body:has(#track123-app) sticky-header-mobile,
body:has(#track123-app) sticky-header .header-navigation { background: #000 !Important; }
</style>
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Hi @Nato0201
You can try to add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code and check
<style>
body:has(#track123-app) sticky-header-mobile,
body:has(#track123-app) sticky-header { position: relative; }
body:has(#track123-app) sticky-header-mobile,
body:has(#track123-app) sticky-header .header-navigation { background: #000 !Important; }
</style>
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thanks heaps!
Hi @Nato0201 ,
I checked your store. You have some pages that don't have a banner after that will met this error. S I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid then find <body>
3. Refer screenshot to add code below( add class to body)
{{request.path | split: '/' | last }}
4. Base on this class. Add Code below to end of this file and before </body> tag. Code below will apply for cart page, our story page, track123 page.
<style>
.cart sticky-header.header-navigation-wrapper,
.track123 sticky-header.header-navigation-wrapper,
.our-story sticky-header.header-navigation-wrapper {
position: sticky!important;
}
.cart .body-content-wrapper sticky-header.header-navigation-wrapper .header-navigation,
.track123 .body-content-wrapper sticky-header.header-navigation-wrapper .header-navigation,
.our-story .body-content-wrapper sticky-header.header-navigation-wrapper .header-navigation {
background-color: #000 !important;
}
</style>
Thanks for reaching out! I intentionally have those pages headers transparent, but good to know for future. Thank you.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025