Why is there a grey banner in my online store and how can I remove it?

Store Design
1

Hello Spotify Community,

My website www.arshiinteriors.com has been showing this grey banner when I click any category of the store section (please see the attached image, I’ve highlighted the banner with red markings). This never used to be there but recently this grey banner with the size mentioned has started showing.

How do I fix this?

hd-2022-calendar-agenda-png-31632246324tskh3gnva7.png
hd-2022-calendar-agenda-png-31632246324tskh3gnva7.png1830×973 308 KB

2

Based on the screenshot you provided, it looks like the gray banner is a message indicating the number of products that are currently displayed in the collection page. This message is usually displayed by Shopify themes when there are more products in the collection than are currently being shown on the page.

If you would like to remove the gray banner, you can modify your theme’s code to hide it. To do this, follow these steps:

  1. From your Shopify admin, go to “Online Store” > “Themes”.
  2. Click on “Actions” > “Edit code” for your current theme.
  3. In the left sidebar, click on “Sections” and then click on “collection-template.liquid”.
  4. Scroll down the code until you find the following line:

html:

{{ page_title }}

  1. Add the following line immediately after it:

html:

.page-width .h1--hidden { display: none; }
  1. Save your changes and refresh your website to confirm that the gray banner is no longer displayed.

This code adds a CSS rule to hide the gray banner by default. The CSS rule targets the .h1–hidden class, which is added to the same h1 element containing the product count by the above code. If you want to show the gray banner again in the future, you can remove the CSS rule.

3

@Sohaibarshad

Hi,

To remove the top image placeholder, please follow the steps below.

  1. Go to Edit code > Assets > style-main.scss.css file

  2. Add the code below to the bottom of style-main.scss.css file.

.text-center.bg_bread {
    background: transparent !important;
}
  1. Save your change.

It will look as below.

20230217_013920.png
20230217_013920.png1577×437 16.4 KB

Hope it helps.

4

Hi @Sohaibarshad ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/engo-customize.scss.css->paste below code at the bottom of the file:

.text-center.bg_bread {
    background: none !important;
}

Hope my answer will help you.

5

Hi @Sohaibarshad

I hope you are doing good and welcome to the Shopify Community!
I am Santanu from MS Web Designer (Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore).

Please add this css in your bottom of the css file:
#shopify-section-collection-template .wrap-bread-crumb {display: none !important;}

Regards,

Santanu

6

Issue resolved. Thanks @DavidEKim