Displaying the announcement bar only on the home page with Broadcast

Store Design
, ,
1

Hi,

I would like to only display the announcement bar on my home page: https://houseofpapaya.com/

I am using the broadcast theme and I have tried what was suggested here: https://community.shopify.com/post/2071017

but it isn’t working. I also don’t have the words announcement in my theme liquid

1 Like
2

Hello @Lola_8

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

{% if template == ‘index’ %}

.announcement-bar { display: block !important; }

{% endif %}

.announcement-bar { display: none !important; }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

3

Hi @Lola_8

Would you mind sharing your store URL? Thanks!

4

this does not work :slightly_smiling_face:

5

Screenshot 2024-09-18 at 18.10.56.png
Screenshot 2024-09-18 at 18.10.56.png2824×1386 384 KB

Hi i do not have this option :slightly_smiling_face:

6

Yes sorry the domain name hasn’t been transfered yet https://22d12c-6a.myshopify.com/?_ab=0&_fd=0&_sc=1

7

It okay, preview can work with password. Thanks!

8

https://s2gis5hvsukusrge-81747378511.shopifypreview.com

here is a shareable link that works for two days

9

Thanks for the info, check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

{% if template.name == 'index' %}

{% else %}

{% endif %}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
10

Hi,

There is no but I’ve found one body mentioned:

{%- render 'loading' -%}

{{ ‘general.accessibility.skip_to_content’ | t }}

{% sections 'group-header' %}

{% sections ‘group-overlay’ %}

{{ content_for_layout }}

I’ve tried copying your code between
and <body but it didn’t work

11

That wont be possible without the every sinle store have.

This tag is on the very end of the code in your theme.liquid.

Made4uoRibe_0-1727868726766.png
Made4uoRibe_0-1727868726766.png285×836 20.6 KB

This where you paste the code. MAke some space first.

Made4uoRibe_1-1727868774545.png
Made4uoRibe_1-1727868774545.png377×239 4.6 KB

And this should be look like.

Made4uoRibe_2-1727868818864.png
Made4uoRibe_2-1727868818864.png559×398 12.8 KB

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

12

Hi,

thanks i did find it but the issue still remains when i preview the site

I tried like this:

{%- comment -%}
In order to use your custom javascript file at assets/custom.js
just cut this next line and paste it outside this comment:

{%- endcomment -%}

{% if template.name == ‘index’ %}

.announcement-bar { display: block; }

{% else %}

.announcement-bar { display: none; }

{% endif %}

and like this:

{% if template.name == ‘index’ %}

.announcement-bar { display: block; }

{% else %}

.announcement-bar { display: none; }

{% endif %}
{%- comment -%}
In order to use your custom javascript file at assets/custom.js
just cut this next line and paste it outside this comment:

{%- endcomment -%}

13

Hi @Lola_8 , I had the same problem as you with my Broadcast theme, and here’s what I did:

  1. Go to your editor.
  2. Open your Theme Settings.
    It’s the gear ( :gear: ) icon, usually found at the top left corner of the editor.
  3. Scroll down and find the “Custom CSS” section.
  4. Add this Custom CSS code:

announcement-bar {
display: none !important;
}

.template-index announcement-bar {
display: block !important;
}

Save your changes.

This should work for hiding the announcement bar on all pages and showing it only on the homepage. It worked for me, so let me know if it works for you too! Cheers :victory_hand: