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.
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