Clean Up Your Shopify Hero Section: How to Dynamically Hide App Icons on Scroll

Hey everyone! As a Shopify expert who spends a lot of time digging through community discussions, I often see common pain points pop up that many of you share. One that recently caught my eye – and had a fantastic, elegant solution – was all about cleaning up your store's hero section. You know, that prime real estate at the top of your homepage, often featuring a stunning video or image?

The issue? Many of us use great apps for things like loyalty programs, chat support, product reviews, or trust badges. And these apps, while super helpful, often inject floating icons or widgets onto every page, including that beautiful hero section. It can really clutter the view, especially on mobile, and distract from your main message or video.

The Problem: Cluttered Hero Sections

This exact scenario came up in a recent thread titled "Video hero | icons hide" (original author: yonicque). Yonicque was struggling with their Shopify store, specifically on the homepage where they had a video hero. They had Google, Rewards, Chat, Signup, and Music icons all displaying over the video, making it look messy. The goal was simple: hide these icons when the customer is at the very top of the page, where the video hero is prominent, and then have them gracefully reappear once the user scrolls down.

It's a classic dilemma, right? You want the functionality these apps provide, but you also want a clean, impactful first impression. Yonicque's site, yonicque.com, was a perfect example of this common challenge. They needed a solution for both desktop and mobile, and fast!

The Community Steps In: A Smart Code Solution

Thankfully, a community member named tim_tairli swooped in with a brilliant and precise solution. What I love about this fix is that it doesn't require uninstalling apps or compromising functionality. It uses a bit of custom code – a mix of CSS and JavaScript – to intelligently hide and show those floating elements based on scroll position.

How Does This Magic Work?

In a nutshell, the code does two main things:

1. CSS Styling: It targets the specific IDs and classes of common app widgets (like Smile.io for rewards, Shopify Chat, Klaviyo teasers, TrustedSite badges, and Judge.me review tabs). When a special attribute, header-visible="true", is present on the main element of your page, these elements are made transparent (opacity:0) and non-interactive (pointer-events:none). A smooth transition is also added for a nice fade effect.
2. JavaScript Detection: This is where the real cleverness comes in. It uses something called an IntersectionObserver. This modern browser API efficiently watches if your header section (or any element you specify) is currently visible in the viewport. When the header is visible (meaning you're at the top of the page), the JavaScript adds that header-visible="true" attribute to your tag. When you scroll down and the header goes out of view, it removes the attribute (or sets it to false), making your app icons reappear.

It's a really efficient way to manage UI elements without constantly checking scroll positions, which can sometimes impact performance.

Implementing the Solution: Step-by-Step Guide

Ready to clean up your own hero section? Here's how you can implement tim_tairli's code:

Step 1: Access Your Theme Editor

From your Shopify admin, go to Online Store > Themes. Find your current theme, click Actions > Edit code.

Step 2: Add a New Section to Your Homepage Template

This is where it gets interesting, as tim_tairli pointed out. The method depends slightly on your theme. For most themes, you'd add a "Custom liquid" section. However, as discovered in the thread, if you're using a theme like Motion, you might need to use a "Custom content" section with an "HTML" block inside it.

• Navigate to your homepage template (usually Sections/template-index.liquid or similar).
• Scroll to the bottom of the template area.
• Option A (Most Themes): Click "Add section" and look for "Custom liquid".
• Option B (Motion Theme & Similar): Click "Add section" and look for "Custom content". Once added, click on the "Custom content" section, then click "Add block" and select "HTML".

Here's a visual of what "Custom content" with an "HTML" block looks like:

Step 3: Paste the Code

In the "Custom liquid" or "HTML" block you just added, paste the following code exactly as it appears:

A Note on the Targeted Elements:

The CSS in the code targets specific elements by their IDs or classes. These are common identifiers for popular apps:

• #smile-ui-lite-container: Often used by loyalty/rewards apps like Smile.io.
• #shopify-chat: The default Shopify Chat widget.
• [class*=kl-teaser]: Targets elements with "kl-teaser" in their class name, often used by Klaviyo pop-ups or teasers.
• #trustedsite-tm-image: For TrustedSite badges.
• .jdgm-revs-tab-btn: For review apps like Judge.me.

If you have other apps that are still showing up, you'll need to inspect your page (right-click > Inspect Element) to find their unique ID or class name and add them to the CSS selector list.

Once you've added the code, save your changes. Now, when you visit your homepage, you should see those pesky icons disappear when the header (and thus your hero section) is in view, and reappear as you scroll down. Yonicque was thrilled with the result, calling tim_tairli a "lifesaver!" and I can see why.

Here's a quick visual comparison:

At the Top (Icons Hidden):

Scrolled Down (Icons Visible):

This simple customization can make a huge difference in how professional and polished your Shopify store looks, especially on that crucial first impression. It's a great example of how a little custom code, combined with smart community insights, can significantly enhance your store's user experience without breaking the bank or requiring a complete redesign. So go ahead, give your video hero the spotlight it deserves!