HELP - Savor Theme Hero Banner On All Pages!

[thomasb1998]

Hi there, I hope someone can help. I’m currently working on building my website - https://clutchposters.com/

However, I’m encountering an issue whereby the hero banner from the home page is appearing on literally every other page - I’m not sure if this is a default for the Savor theme but there isn’t anywhere to turn this off. Can someone help as I just want the banner to appear on the Home page! Thank you in advance. -Tom

I’ve attached some example images of the product, collection and contact page where the banner is appearing.

[AiTrillion]

Hi @thomasb1998 ,

Please follow the below CSS to hide the section from all the pages:

.div#shopify-section-sections--25509154947338__ss_hero_23_8aemYR {
    display: none;
}

Now, the section will not appear.

[thomasb1998]

Hi there, thanks so much for your quick reply. I just want to check I’m pasting the code in the right area, can you confirm where I should paste and save please? As I’m a bit of a novice!! Thank you!

[AiTrillion]

@thomasb1998 , Go to Online store >> Themes >> Edit code >> and Paste on theme.css or base.css.

Also, please update me after the code works.

[MandasaTech]

Hey Tom

You’re absolutely right — the hero banner showing up on every page isn’t something you’d typically want unless it’s designed that way. It sounds like the savor theme you’re using has the banner section set to display globally, rather than just on the homepage.

To fix this, you’ll need to tweak the theme’s code a bit so that the banner section is conditionally shown only on the homepage. Here’s how you can do that:

Steps to Show Hero Banner Only on Homepage:1. From your Shopify admin, go to Online Store > Themes.

1. Click … > Edit code next to your current theme.

2. In the Sections folder, find the file for your hero banner (likely something like hero-banner.liquid or slideshow.liquid depending on the theme).

3. Wrap the entire content of that file with this Liquid condition:

{% if template == ‘index’ %} {% endif %}

This code ensures the banner only loads on the homepage (template == ‘index’) and not on your product, collection, or contact pages.

Please Note: Always duplicate your theme before editing the code, just in case you need to roll back.

Let me know if you have any questions!

[The_ScriptFlow]

.div#shopify-section-sections--25509154947338__ss_hero_23_8aemYR {
    display: none;
}

Hey you need to place this code in the Custom Css.

Here is the visually explanation for better understanding.

Go to Shopify Admin >> Click on Online Store >> themes >> Click on Customize.

After that click on Settings gear Icon >> Scroll Down and you will see the Custom Css option.

if this was helpful mark as Solution and Don’t forget to buy me a coffee.

[jakeclifford]

Hi @thomasb1998 ,

I’d be interested to help you know WHY this is happening.

Did you potentially add your section to the header in the theme editor instead of the Template below it?

If so that would mean it appears on all pages, if not hopefully this helps someone who might accidentally do this!

If there’s anything else you’d like help with feel free to reach out by clicking the link below

Hope that helped,
Jake

[thomasb1998]

Hi there I’ve pasted the code into the base.css and it isn’t making the changes required - perhaps I’m pasting it in the wrong place?

[thomasb1998]

Hi there, apologies this didn’t work for me - it’s still showing once I add in the custom css

[The_ScriptFlow]

Could you please share the collab code in the p/m so that I can place it in the right file.

Thanks

[thomasb1998]

Wow… it really was as simple as that - MY BAD! Thanks so much for you help Jake, really appreciate it!

[jakeclifford]

No worries! We’ve all been there