Shopify Customization: How to Hide Default Collection Banners and Product Grids

Hey there, fellow Shopify store owners! It's your resident Shopify expert at Shopping Cart Mover, 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:

Why You Might Want to Hide Default Shopify Elements

Before we dive into the 'how-to,' let's understand the 'why.' There are several compelling reasons why a merchant might want to remove or hide Shopify's default collection banners and product grids:

• App Integration: As in Vulmar's case, a third-party app might offer superior design, filtering, or display options for your collections. Keeping the default elements creates redundancy and a less professional look.
• Custom Design: You might have a specific vision for your collection pages that doesn't include the standard banner or grid. Perhaps you want a more minimalist look, or you're building a highly custom landing page for a specific collection.
• Performance: While often minor, redundant elements can sometimes contribute to slightly longer page load times. Streamlining your page can offer a marginal performance boost.
• User Experience: Conflicting layouts or duplicate information can confuse customers, leading to a less intuitive shopping experience and potentially higher bounce rates.

The Simple Solution: Using Shopify's Theme Editor

The good news is that for most modern Shopify themes (like Dawn, Refresh, Sense, etc.), hiding these elements is surprisingly straightforward and requires no coding. Shopify's theme editor provides a visual way to manage your store's sections.

Step-by-Step Guide to Hiding Collection Banners and Product Grids:

1. Access Your Shopify Admin: Log in to your Shopify admin dashboard.
2. Navigate to Themes: From the left sidebar, go to Online Store > Themes.
3. Customize Your Theme: Find your current live theme and click the 'Customize' button.
4. Select a Collection Page: In the theme editor preview window (usually on the right), navigate to one of your collection pages. You can do this by using the dropdown menu at the top of the editor, or by clicking on a collection link in your store's navigation within the preview.
5. Identify the Sections: Once on a collection page, look at the left sidebar of the theme editor. You'll see a list of sections that make up your page. These typically include 'Collection banner,' 'Product grid,' and potentially others like 'Image with text' or 'Featured products.'
6. Hide the Unwanted Sections: Hover your mouse over the section you wish to hide (e.g., 'Collection banner' or 'Product grid'). You will notice an 'eyeball' icon appear next to the section title. This icon is your key to visibility control.

   Click the 'eyeball' icon. When clicked, the icon will typically show a strike-through, indicating that the section is now hidden from your live store. You should immediately see the change reflected in the theme editor preview.

7. Save Your Changes: After hiding the desired sections, always remember to click the 'Save' button in the top right corner of the theme editor. If you don't save, your changes will not be applied to your live store.

What If the 'Eyeball' Icon Isn't There?

While the 'eyeball' icon method is standard for most modern Shopify themes, there might be instances where it's not available for a particular section or if you're using a much older, legacy theme. In such cases, you might need to:

• Check Theme Settings: Some themes have specific settings within the section itself to disable or hide certain elements. Click on the section in the left sidebar and explore its individual settings.
• Consult Theme Documentation: Your theme's documentation is a valuable resource. It often provides specific instructions for customizing various page elements.
• Edit Theme Code (Advanced): For more complex scenarios or older themes, you might need to delve into the theme's Liquid and CSS code. This typically involves finding the relevant section file (e.g., collection-template.liquid or similar) and commenting out or removing the code responsible for rendering the banner or grid. Always duplicate your theme before making code edits! If you're unsure, it's best to hire a Shopify expert.

Best Practices After Customization

• Test Thoroughly: After hiding any elements, navigate to your live store and check the collection pages on various devices (desktop, tablet, mobile) to ensure everything looks as intended and your app is displaying correctly.
• Backup Your Theme: Before making any significant changes, especially code edits, always duplicate your theme. This provides a quick rollback option if anything goes wrong.
• Monitor Performance: Keep an eye on your page load speeds, especially if you're relying heavily on third-party apps for display. Tools like Google PageSpeed Insights can help.

Optimizing Your Store for Migration and Growth

As experts in e-commerce migrations at Shopping Cart Mover, we often see stores that benefit immensely from this kind of post-migration cleanup and optimization. A clean, intuitive, and visually appealing store is not just about aesthetics; it's about conversion rates, customer satisfaction, and ultimately, business growth.

Whether you're migrating from another platform to Shopify or simply refining your existing store, taking control of your page elements ensures a seamless and professional shopping experience. Don't let default settings dictate your store's potential when a few clicks can unlock a world of customization.

By following these simple steps, you can easily get rid of those redundant collection banners and product grids, allowing your chosen apps to shine and your unique brand identity to stand out. Happy customizing!