Hi everyone, hope you’re doing well.
I need to get rid of the gray back to top/scroll to top button in Spotlight. It appears only on Collection pages, as far as I can see, not other pages. My site is weheartrocks.com and password is: skaysi
TIA
Topic summary
A user needed to remove the gray “back to top” button appearing on collection pages in the Shopify Spotlight theme.
Solutions Provided:
Multiple developers offered CSS-based fixes:
- Adding custom CSS code targeting
.scroll2top-ad.ad-showor.scrollToTopButtonwithdisplay: none !important; - Code placement options included theme.liquid (before
</body>), base.css, main.css, or the Custom CSS field in the theme customizer’s Product Grid section
Resolution:
The original poster confirmed one solution worked perfectly and marked it as accepted. They didn’t test all alternatives but thanked all contributors.
Follow-up Question:
The user raised a new issue about mobile product image galleries: when tapping images on phones/tablets, users can zoom but cannot swipe between images—they must exit and select each image individually. They asked how to enable swipe navigation while maintaining zoom functionality, tagging the same developers who helped initially.
1 Like
Hello @WeHeartRocks
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hello @WeHeartRocks ,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
.scrollToTopButton {
display: none;
}
1 Like
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file main.css
Step 3: Paste the below code at bottom of the file → Save
.scrollToTopButton {
display: none !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Additionally, I found you can add a header banner to your home page, so users can recognize your brand.
@WeHeartRocks Please follow below steps to scroll to top button on collection page. Let me know whether it is helpful for you.
- From admin go to “Online Store” → “Themes”.
- Click “Customize” button from the current theme.
- Go to collection page then click “Product grid”.
- Paste the below code in the “Custom CSS” field and save changes.
.scrollToTopButton{
display: none;
}
Result will be like,
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
Thank you, it worked like a charm.
1 Like
I didn’t try this option, but thank you for offering help.
Thank you everyone for offering help. I just tried one and it worked so I didn’t need to try the other solutions. At any rate, again, thank you everyone.
So…uh..since you guys were nice enough to answer…what would you say to this one:
When you open a product page on your phone (and tablet? I’m not sure, but probably tablet, too), so when you open a product page on your phone and tap on a product image, the image comes up by itself. Which is fine and great, but…but while you can resize it with your thumb and index finger, you can’t swipe right or down to scroll through the other images and video. You have to view one, then exit the single image, then choose another one to view, then exit that…that’s not good at all. Long story short: How do I make this situation so we can…swipe right or down like I mentioned? And hopefully be able to zoom on each pic we want, then continue swiping if we want…you know?
Site: weheartrocks.com
Password: skaysi
Theme: Spotlight
TIA
@ZestardTech ZestardTech
@niraj_patel Techlyser_web
@PageFly-Henry PageFly-Henry
@Vinsinfo Vinsinfo
Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.
1 Like