Shopify themes, liquid, logos, and UX
I am hoping someone can help me with detecting if the cart is open are not. The problem I am having is i have added a "back to top" button found here in the discussions that works well save it is displayed when the cart is open and sometimes blocks info contained in the cart.
I found where it will choose to display based on scrolling however I want to add an "if" statement to not display it if the cart is open, (please see screenshot).
liquid code example:
function trackScroll() {
var scrolled = window.pageYOffset;
var coords = {{ vertical_offset_for_trigger }};
if (scrolled > coords) {
goTopBtn.classList.remove('hide');
}
if (scrolled < coords) {
goTopBtn.classList.add('hide');
}
}
I would like to add something like:
if (Cart detection code) {
goTopBtn.classList.add('hide');
}
Solved! Go to the solution
This is an accepted solution.
Go to Online Store > Themes > Edit code, open theme.liquid file, add this code after <head>
<style>
body:has(.drawer.active) #BackToTop {
opacity: 0;
}
</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.
I'd rather use `display: none;` instead of `opacity:0;`
With opacity:0 the element is still there (even though it's transparent) and may potentially cover some buttons or links preventing them from functioning.
For example, here the button would not be visible but still prevent removing Wine packaging from the cart
This is the code I'd use instead:
body.overflow-hidden #BackToTop {
display: none;
}
Hi @EPuck
Dan here from Ryviu: Product review & QA app.
You don't need to use JavaScript code to check if the drawer is open. You can use this CSS code to make your back-to-top button not appear if your cart drawer is open. Please add your code to theme.liquid file, after <head>
<style>
body:has(.drawer.active) your-back-button-class-or-id {
opacity: 0;
}
</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.
Dan,
Thank you for your suggestion. I will give it a try.
That's unnecessary.
Better option is to tune z-index values on your cart drawer and back-to-top button so that drawer overlays the button when open.
Another possibility -- when drawer opens theme JS usually adds a class on body (or html) to disable scrolling etc.
You can add a CSS rule based on this to hide BTT button, kinda like:
body.cart-drawer-open .back-to-top-button {
display: none;
}
Can't be more specific without seeing your site...
Hi Tim.
Thank you for the response.
I like the idea of the overlay. The site is https://woodenglenn.com and the preview password is: leulda
This is an accepted solution.
Go to Online Store > Themes > Edit code, open theme.liquid file, add this code after <head>
<style>
body:has(.drawer.active) #BackToTop {
opacity: 0;
}
</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.
Dan,
Thank you. That works well.
Very welcome!
- 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.
I'd rather use `display: none;` instead of `opacity:0;`
With opacity:0 the element is still there (even though it's transparent) and may potentially cover some buttons or links preventing them from functioning.
For example, here the button would not be visible but still prevent removing Wine packaging from the cart
This is the code I'd use instead:
body.overflow-hidden #BackToTop {
display: none;
}
That sounds like a wise revision. Thank you, I made the update.
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