How to add an image to the announcement bar Dawn Theme?

Topic summary

Topic: Making an announcement bar image span full width in Shopify’s Dawn theme.

  • The requester added code from a YouTube tutorial that only affected the center of the announcement bar, leaving the sides unchanged; they want the custom image to be full width.

  • After pasting code into sections/announcement-bar.liquid, it created a new full-width strip instead of making the existing announcement bar image full width.

  • Helpers requested the store URL to diagnose; the URL (https://www.camocolors.com/) was provided.

  • The requester has limited CSS experience and finds prior guidance difficult to follow.

  • Key need: CSS/structure guidance to apply a background image (or image element) to the existing announcement bar so it spans edge-to-edge, without adding a second strip.

  • Missing details: the exact code used from YouTube and a clear screenshot/example of the desired outcome.

Status: Unresolved/ongoing. Next steps include sharing the current announcement-bar.liquid and CSS, and clarifying the exact visual issue so targeted CSS (e.g., full-width container and background-size) can be provided.

Summarized with AI on December 20. AI used: gpt-5.

I’ve found a code someone posted on youtube but it changes only the main area of the announcement bar but not the sides. I want it full width. Can someone help me with that?

@Asafsky Please provide website URL.

Hi @Asafsky , kindly share your store URL please.

Thanks!

Thanks for your reply. I have no experience with css and find the content of your reply intimidating. I will try to figure out what you have just wrote.

https://www.camocolors.com/

Thanks for the URL, can you kindly show me the exact problem you are facing? Thanks!

So I’ve tried to paste these codes to sections</>announcement-bar.liquid and it added a new strip in full width, which is not what I was asking. I want to make the custom image in full width