Hi everyone,
I need some help with customizing the Announcement Bar.
I want the bar to slide or swipe from top to bottom (instead of the default horizontal)
Additionally, I’d like to remove the arrows on the sides completely.
Has anyone done this before or knows how to achieve it with custom code?
Any guidance or code snippets would be greatly appreciated.
Thanks in advance!
Hey @user3539
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
https://dr-johanna-budwig.myshopify.com/ pass: eghemp
For the announcement bar animation, I’ll probably require the collaborator request code, but if you only want to remove the arrows in the announcement bar then,
Follow these Steps:
<style>
.announcement-bar .slider-button {
display: none !important;
}
</style>
RESULT:
If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
Thank you
It would be great if you could also explain how the animation can be done.
Do I need to add custom code to the CSS, or is JavaScript required for a vertical slide/scroll effect?
Nope, CSS won’t be enough for that and of course some Javascript would be required too. You can either share the announcement bar file code or just simply drop your collaborator request code in my private mesages and I’ll sort that out for you.
Cheers,
Moeed
is it fine like this?
Hello @user3539 , To display the slider vertically and hide the slider arrows, follow these steps.
First, go to your Shopify admin.
Find your theme and click Edit code.
Locate the announcement-bar.liquid file and replace its contents with the code provided below.
Save the file, then check the frontend.
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- liquid
assign social_icons = true
if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
assign social_icons = false
endif
if section.settings.enable_country_selector or section.settings.enable_language_selector
assign language_country_selector = true
endif
if section.blocks.size > 0
assign announcement_bar = true
endif
-%}
{% if social_icons %}
{{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %}
<div class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons %} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}" {{ section.shopify_attributes }}>
<div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
{%- if section.settings.show_social and social_icons -%}
{%- render 'social-icons' -%}
{%- endif -%}
{%- if section.blocks.size == 1 -%}
<div class="announcement-bar" role="region" aria-label="{{ 'sections.header.announcement' | t }}">
{%- if section.blocks.first.settings.text != blank -%}
{%- if section.blocks.first.settings.link != blank -%}
<a href="{{ section.blocks.first.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
{%- endif -%}
<p class="announcement-bar__message h5">
<span>{{ section.blocks.first.settings.text | escape }}</span>
{%- if section.blocks.first.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if section.blocks.first.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- else -%}
<div class="announcement-bar vertical-announcement-bar" role="region" aria-label="{{ 'sections.header.announcement' | t }}">
<div class="vertical-slider-container">
<div class="vertical-slider-track" id="VerticalTrack-{{ section.id }}">
{%- for block in section.blocks -%}
<div class="vertical-slide" {{ block.shopify_attributes }}>
{%- if block.settings.text != blank -%}
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
{%- endif -%}
<p class="announcement-bar__message h5">
<span>{{ block.settings.text | escape }}</span>
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
{%- endif -%}
<div class="localization-wrapper">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
<localization-form class="small-hide medium-hide">
{%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
{%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
<localization-form class="small-hide medium-hide">
{%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
<div>
<h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
{%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
</div>
</div>
<style>
.vertical-announcement-bar {
overflow: hidden;
height: 40px;
position: relative;
}
.vertical-slider-container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.vertical-slider-track {
display: flex;
flex-direction: column;
width: 100%;
will-change: transform;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.vertical-slide {
flex-shrink: 0;
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.slider-button { display: none !important; }
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const track = document.getElementById('VerticalTrack-{{ section.id }}');
if (!track) return;
const slides = track.querySelectorAll('.vertical-slide');
if (slides.length <= 1) return;
let currentIndex = 0;
const slideHeight = 40;
const autoplay = {{ section.settings.auto_rotate }};
const speed = {{ section.settings.change_slides_speed | times: 1000 }};
const goToSlide = (index) => {
track.style.transform = `translateY(${-index * slideHeight}px)`;
currentIndex = index;
};
const nextSlide = () => {
currentIndex = (currentIndex + 1) % slides.length;
goToSlide(currentIndex);
};
track.appendChild(slides[0].cloneNode(true));
if (autoplay) {
let timer = setInterval(nextSlide, speed);
track.parentElement.addEventListener('mouseenter', () => clearInterval(timer));
track.parentElement.addEventListener('mouseleave', () => {
clearInterval(timer);
timer = setInterval(nextSlide, speed);
});
track.addEventListener('transitionend', () => {
if (currentIndex === slides.length) {
track.style.transition = 'none';
goToSlide(0);
requestAnimationFrame(() => {
track.style.transition = 'transform 0.7s cubic-bezier(0.4, 0, 0.2, 1)';
});
}
});
}
goToSlide(0);
});
</script>
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"class": "announcement-bar-section",
"enabled_on": {
"groups": ["header"]
},
"settings": [
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-4"
},
{
"type": "checkbox",
"id": "show_line_separator",
"default": true,
"label": "t:sections.header.settings.show_line_separator.label"
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__1.content",
"info": "t:sections.announcement-bar.settings.header__1.info"
},
{
"type": "checkbox",
"id": "show_social",
"default": false,
"label": "t:sections.announcement-bar.settings.show_social.label"
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__2.content"
},
{
"type": "checkbox",
"id": "auto_rotate",
"label": "t:sections.announcement-bar.settings.auto_rotate.label",
"default": false
},
{
"type": "range",
"id": "change_slides_speed",
"min": 3,
"max": 10,
"step": 1,
"unit": "s",
"label": "t:sections.announcement-bar.settings.change_slides_speed.label",
"default": 5
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__3.content",
"info": "t:sections.announcement-bar.settings.header__3.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": false,
"label": "t:sections.announcement-bar.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.announcement-bar.settings.header__4.content",
"info": "t:sections.announcement-bar.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": false,
"label": "t:sections.announcement-bar.settings.enable_language_selector.label"
}
],
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "t:sections.announcement-bar.blocks.announcement.settings.text.default",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.announcement-bar.presets.name",
"blocks": [
{
"type": "announcement"
}
]
}
]
}
{% endschema %}
If you have any questions or need further assistance, please don’t hesitate to ask.
If this solution helps you, please don’t forget to like and accept it.
Best Regards,
(S.P)
off sitewide
July sale — 45% off at checkout, applied automatically. Valid for 60 minutes. One per customer.
Offer ends in