Displaying the announcement bar only on the home page with Broadcast

Lola · ‎09-18-2024

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/c/shopify-design/make-announcement-bar-to-be-visible-only-on-homepage/...

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

Tech_Coding · ‎09-18-2024

Hello @Lola

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 </body> on theme.liquid

{% if template == 'index' %}
<style>
.announcement-bar {
display: block !important;
}
</style>
{% endif %}
<style>
.announcement-bar {
display: none !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee☕ Tips adds a little sweetness to my day.

Lola · ‎09-18-2024

this does not work 🙂

Lola · ‎09-18-2024

Hi i do not have this option 🙂

Made4uo-Ribe · ‎09-18-2024

Hi @Lola

Would you mind sharing your store URL? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Lola · ‎09-18-2024

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

Made4uo-Ribe · ‎09-18-2024

It okay, preview can work with password. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Lola · ‎09-24-2024

https://s2gis5hvsukusrge-81747378511.shopifypreview.com

here is a shareable link that works for two days

Made4uo-Ribe · ‎09-24-2024

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 </body> tag and paste the code below before the tag.

{% if template.name == 'index' %}
<style>
.announcement-bar {
    display: block;
}
</style>
{% else %}
<style>
.announcement-bar {
    display: none;
}
</style>
{% endif %}

And Save.

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Lola · ‎10-02-2024

Hi,

There is no </body> but I've found one body mentioned:

</head>
<body id="{{ page_title | handle }}" class="template-{{ template.name | handle }} grid-{{ settings.grid_style }}{% if customer %} customer-logged-in{% endif %}{% if settings.animations_enable %} aos-initialized{% endif %}{% if settings.product_grid_outline %} has-line-design{% endif %}" data-animations="{{ settings.animations_enable }}">
{%- render 'loading' -%}

<a class="in-page-link visually-hidden skip-link" data-skip-content href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

<div class="container" data-site-container>
<div class="header-sections">
{% sections 'group-header' %}
</div>

{% sections 'group-overlay' %}

<main role="main" id="MainContent" class="main-content">

</main>
</div>

I've tried copying your code between </head>
and <body but it didn't work

Made4uo-Ribe · ‎10-02-2024

That wont be possible without the </body> every sinle store have.

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

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

And this should be look like.

And Save.

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Lola · ‎10-07-2024

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:
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
{%- endcomment -%}

{% if template.name == 'index' %}
<style>
.announcement-bar {
display: block;
}
</style>
{% else %}
<style>
.announcement-bar {
display: none;
}
</style>
{% endif %}

</body>
</html>

and like this:

{% if template.name == 'index' %}
<style>
.announcement-bar {
display: block;
}
</style>
{% else %}
<style>
.announcement-bar {
display: none;
}
</style>
{% 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:
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
{%- endcomment -%}


</body>
</html>

Mafe_ · ‎11-14-2024

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

Go to your editor.
Open your Theme Settings.
It's the gear (⚙️) icon, usually found at the top left corner of the editor.
Scroll down and find the "Custom CSS" section.
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 ✌️