an unwanted arrow on announcement bar

Store Design

Topic summary

Issue: An arrow icon appeared on the Shopify announcement bar. The store uses two rotating announcements (a slider), and the merchant wanted the arrow removed without losing the second announcement.

Key attempts and outcome:

  • Initial advice suggested hiding the sliderโ€™s button via CSS in base.css (selector similar to .announcement-bar .slider-button). This removed the second announcement, indicating it disabled the slider control rather than just the icon.
  • The merchant shared the store URL (malboshim.com) and clarified the need to keep both announcements while removing the arrow.
  • Final working fix: add CSS to base.css to hide only the arrow icon: .announcement-bar__link .icon-arrow { display: none !important; }. This preserved both announcements and removed the unwanted arrow.

Notes:

  • One suggestion referenced adding code in theme.liquid but did not include a visible snippet; screenshots were shared to illustrate results.

Status: Resolved. Action item implemented by editing base.css to hide the arrow icon while keeping the announcement slider intact.

Summarized with AI on December 16. AI used: gpt-5.
1

Hi, this arrow appeared on my announcement bar and I cant figure out how to make in dissapear.

does anyone know?

thanks in advance

ืฆื™ืœื•ื ืžืกืš 2024-10-21 082418.png
ืฆื™ืœื•ื ืžืกืš 2024-10-21 082418.png1865ร—313 36.5 KB

2

Hey @Anonymous_d65591fabfe73ef1cdbdaa0a1489d355

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, donโ€™t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hey @Anonymous_d65591fabfe73ef1cdbdaa0a1489d355 ,

Could you share your store URL so I can check?
so i can check and provide you possible solution for your question.

Thanks

4

Hello @Anonymous_d65591fabfe73ef1cdbdaa0a1489d355
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

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

result

16.png

If this was helpful, hit the like button and accept the solution.
Thanks

5

i have two different announcements, its the secons one (you have a small arrow on the sides to switch between them)

https://malboshim.com/

1 Like
6

https://malboshim.com/

7

i did it and it made the second announcement disappear

8

Hey @Anonymous_d65591fabfe73ef1cdbdaa0a1489d355

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1729489789453.png
Moeed_0-1729489789453.png1362ร—157 7.97 KB

If I managed to help you then, donโ€™t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

9

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.announcement-bar__link .icon-arrow {
display: none !important;
}

result

17.png

If this was helpful, hit the like button and accept the solution.
Thanks

10

thanks!

1 Like
11

Thank you for your reply. Iโ€™m glad to hear that the solution worked well for you. If you require any more help, please donโ€™t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.