Quick Fix: Hiding Shopify Collection Banners and Product Grids Without Code

Hey there, fellow Shopify store owners! It's your resident Shopify expert, always eager to share practical insights straight from the heart of our community discussions. One common challenge, especially for those integrating powerful apps or simply aiming for a pristine store aesthetic, is managing Shopify's default page elements.

Recently, a store owner named Vulmar kicked off a great conversation about a very relatable struggle: how to ditch the standard Shopify collection banner and product grid. Vulmar had invested in a fantastic app to handle their collection displays, offering a unique look and enhanced functionality. The snag? Shopify's built-in collection banner and product grid were still showing up, creating a redundant, often clunky, and visually conflicting experience. It's a scenario many of you can probably relate to – you get a cool app, but then you're fighting with the theme's existing features.

This duplication isn't just an aesthetic issue; it can sometimes impact page load speed or confuse customers who see conflicting layouts. Vulmar's store, which you could see by visiting vulmar.com and clicking on a featured collection, perfectly illustrated this. It looked something like this, with the default elements unnecessarily present:

The goal was clear: remove these default sections so Vulmar's chosen app could take center stage. While many might immediately think about delving into Liquid code or custom CSS, the community quickly provided a wonderfully simple, no-code solution!

The "Eyeball Icon" Secret: Your No-Code Visibility Toggle

This is where the collective wisdom of the Shopify community truly shines. A sharp-eyed member, Maximus3, offered up a brilliant tip that's often overlooked: the little "eyeball icon" tucked away in the theme editor. It's one of those features that, once you're aware of it, feels incredibly intuitive, yet it's surprisingly easy to miss if you're not explicitly looking for a visibility toggle.

Maximus3's advice was spot on:

"There is an eyeball icon next to the section title when you hover over it in the left column of the theme editor… Click it and see what happens..

This simple visual cue is your best friend for quickly hiding entire sections of your page without needing to touch any code. It's a game-changer for maintaining a clean, app-driven store design.

Step-by-Step: Mastering the Eyeball Icon in Your Theme Editor

Let's walk through the exact process. This method isn't just for collection pages; it's a versatile tool for managing the visibility of almost any section within your Shopify theme.

1. Access Your Theme Editor:
   • From your Shopify admin, go to Online Store > Themes.
   • On your current theme, click the Customize button.
2. Navigate to the Relevant Page:
   • In the theme editor, at the top of the page preview, click the dropdown menu (e.g., "Home page"). Select Collections > Default collection to load a typical collection page.
3. Locate Sections to Hide:
   • In the left-hand sidebar, you'll see a list of sections. Look for Collection banner and Product grid.
4. Click the Eyeball Icon:
   • Hover your mouse over the section title (e.g., "Collection banner") in the left sidebar.
   • A small eyeball icon will appear. Click it. The section will vanish from your page preview!
   • Repeat for the "Product grid" or any other sections you wish to hide.
5. Save Your Changes:
   • Crucially, click the Save button in the top right corner of the theme editor to apply your changes to your live store.

A Quick Note on When to Use This

This "eyeball icon" method is incredibly powerful for quick visual adjustments and is your go-to when you're using an app that completely replaces a default section's functionality, or you simply want a minimalist design. Remember, it hides the entire section. If you need to make more granular changes, like altering elements within a section, or if the eyeball icon isn't present for a particular element, then diving into your theme's Liquid files or custom CSS might be necessary. But for simply toggling visibility of major sections, this is your champion.

The beauty of Shopify, and our fantastic community, is that there's often a simple solution to complex-seeming problems. This little eyeball icon is a perfect example. It empowers you to maintain a clean, efficient, and visually appealing store without needing a developer on speed dial. So next time you're wrestling with redundant elements, remember this quick trick. Keep experimenting, keep optimizing, and keep building those incredible online stores!