Shopify themes, liquid, logos, and UX
Hi all,
I would love some help removing the standard Shopify Announcement Bar from a particular product page.
(https://englishcyclist.com/products/custom-map)
Its a unique page where the standard product page template is replaced with a custom app I had developed... Is it possible to remove the announcement bar from a single page like this?
If it helps I am using Dawn v2.5.0
Many thanks, Rob
Cheers, Ro
Solved! Go to the solution
This is an accepted solution.
Hi @englishcyclist ,
You can add bellow code on the theme.liquid just above </head>
{% assign target_page = 'shopify-setup-basic' %}
{% if target_page contains product.handle %}
<style>
div#shopify-section-announcement-bar {
display: none!important;
}
</style>
{% endif %}
You can add multiple product pages on target_page seperated by comma. For example:
{% assign target_page = 'shopify-setup-basic, page-2, page-3' %}
This is an accepted solution.
Hi @englishcyclist ,
You can add bellow code on the theme.liquid just above </head>
{% assign target_page = 'shopify-setup-basic' %}
{% if target_page contains product.handle %}
<style>
div#shopify-section-announcement-bar {
display: none!important;
}
</style>
{% endif %}
You can add multiple product pages on target_page seperated by comma. For example:
{% assign target_page = 'shopify-setup-basic, page-2, page-3' %}
Thanks! I started with your solution as it was first in the list and it worked perfect first time thank you!
add this script before </head> on theme.liquid file
<script>
document.addEventListener('DOMContentLoaded', function () {
var currentPage = window.location.pathname;
var isProductPage = currentPage.includes('/products/');
var isCollectionPage = currentPage.includes('/collections/');
if (!isProductPage && !isCollectionPage) {
document.querySelector('.announcement-bar').style.display = 'block';
} else {
document.querySelector('.announcement-bar').style.display = 'none';
}
});
</script>
or
you have do edit some files on header or announcment file
{% unless template contains 'product' or template contains 'collection' %}
<div class="announcement-bar">
<p>shippings text</p>
</div>
{% endunless %}
Thanks
Hello Rob,
Yes, it is possible. Open the theme.liquid file and add this code at the bottom, just before the closing </body> tag.
{% if template == 'product' %}
{% if product.handle == "custom-map" %}
<style>
.shopify-section-announcement-bar{
display:none !important;
}
</style>
{% endif %}
{% endif %}
Do let me know if you still need any help, I would love to help.
Regards,
Stacksols
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024