Hide hero banner only on collection page

Store Design
, , , ,
1

Hello, I would like to hide the attached hero banner only for collections page and products page. Could you pls advise code to archive it? Thankyou. Pls check my site in attached picture.

IMG_0989
IMG_09891170Ă—2532 649 KB

IMG_0991
IMG_09911170Ă—180 35.9 KB

2 Likes
2

Hey @Cherrysm2

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
div#shopify-section-sections--25807736701291__home_builder_cWHVGq {
    display: none !important;
}
</style>

RESULT:

image
image352Ă—764 98.4 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

Hello, thankyou for your prompt reply. Sorry but the hero banner disappeared on all pages of my site after your code is added….however I just want it to disappear on collections page and product page, would you pls help to check. Thanks a lot

4

How about you try this updated code below and see if that works for you.

{% if request.path == '/collections' %}
<style>
div#shopify-section-sections--25807736701291__home_builder_cWHVGq {
    display: none !important;
}
</style>
{% endif %}
5

Alternatively, you may use the original code from Moeed, but instead of putting it into theme code, add a “Custom liquid” section into Template area of those pages, like collections page template and product page template.

Since this section is part of a template, it will be rendered only on the pages which use this template.

6

Hi @Cherrysm2

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </body> tag

{% if template.name contains 'collection' or template.name contains 'product' %}
<style>
#shopify-section-sections--25807736701291__home_builder_cWHVGq {
    display: none !important;
}
</style>
{% endif %}

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

7

Hi @Cherrysm2,

. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

div#shopify-section-sections--25807736701291__home_builder_cWHVGq {
    display: none !important;
}

Thanks!

8

You can add this code to theme.liquid file after <head> and check

{%- if template.name contains 'product' or request.path == '/collections' -%}
<style>
#shopify-section-sections--25807736701291__home_builder_cWHVGq { display: none !important; }
</style>
{%- endif -%}