Re: 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 is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for 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 is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for 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 is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for 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 is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Re: Displaying the announcement bar only on the home page with Broadcast

Displaying the announcement bar only on the home page with Broadcast

Community Blog Articles