How to Remove the Top Bar in Shopify Theme?

Reading Time: 2 minutes

Are you looking for an easy way to remove the top bar in Shopify theme? For many website owners, having a top bar is essential when it comes to navigation and making sure visitors can find their way around the site. However, if you’re looking to give your website a more minimalist look, or just want to customize your theme to fit in with your branding, it’s important that you know how to remove the top bar. In this article, we will walk you through step-by-step instructions on how to remove the top bar from your Shopify theme. We’ll also give you some tips on what else you can do with the space once it’s gone. So let’s get started!

Why Remove the Top Bar?

There are a few reasons that you might want to remove the top bar from your Shopify theme. Maybe you want to create a more streamlined look for your store, or maybe you want to save some space on your pages. Whatever the reason, removing the top bar is a fairly simple process.

To remove the top bar, you’ll need to access the code for your theme. Once you have access to the code, you’ll need to find the section that controls the top bar. This section will vary depending on which theme you’re using, but it should be relatively easy to find. Once you’ve found the section, simply delete it or comment it out.

Once you’ve removed the code for the top bar, save your changes and check your site to make sure everything is still working correctly. If everything looks good, then you’re done!

This is our own Service Offered by the Blog Author.

shopify dropshipping store set up
Also Read  How to Add Video Slideshow in Shopify Venture Theme?

How to Remove the Top Bar in Shopify?

Assuming you want to remove the top bar from your Shopify store, there are a few ways to go about it. One is to simply delete the code that creates the top bar in your theme.liquid file. Another way is to use CSS to hide the top bar element.

To remove the top bar using CSS, you can add the following code to your theme’s stylesheet:

#shopify-section-header { display: none; }

This will hide the entire header section, including the top bar. If you only want to hide the top bar itself, you can use this CSS instead:

#shopify-section-header__top-bar { display: none; }

How to Customize the Top Bar in Shopify?

Assuming you’re using a Shopify theme, you can edit the top bar in the theme editor. To do this, open the “Sections” folder and then click on “Header”:

In the header editor, you’ll see the section for the top bar. From here, you can change the background color, text color, font size, and other styles:

You can also add or remove content from the top bar. To do this, click on the “Content” tab and then make your changes in the editor. For example, you could remove the search form or add a social media icon:

Also Read  What is Facebook Dropshipping and How to Do it?


Removing the top bar in your Shopify theme can be an easy task, as long as you know how to do it. With a few simple steps, you can customize your store and give it the look and feel of your choice. You will also find that it’s easier to navigate around the store when there is no more top bar clutter on display. Customizing Shopify themes doesn’t have to be daunting – take advantage of all its features today!