how do adjust both sizes of different announcement bars

Technical Q&A

Topic summary

Adjusting the height and text alignment of a Shopify announcement bar. The user’s second announcement bar wasn’t resizing via CSS.

  • Proposed fix: Edit theme.liquid (Shopify Admin > Online Store > Theme > Edit code) and insert CSS above the closing tag to target the announcement bar. The exact CSS is not shown in the thread.
  • Outcome: After adding the code, the height change worked.

Follow-up request: Align the announcement bar text with the bar.

  • Proposed fix: Add additional CSS in theme.liquid above to adjust text alignment. The helper included a screenshot showing the aligned result.
  • Note: The concrete code snippets are missing from the posts, and the image attachment is central to understanding the final appearance.

Key terms:

  • Announcement bar: a top-of-page banner for messages/promotions.
  • theme.liquid: the main layout file in Shopify themes.
  • tag: the end of the HTML head section where CSS can be added.

Status: Appears resolved (height adjusted and text aligned), but exact implementation details are not visible in the thread.

Summarized with AI on December 21. AI used: gpt-5.
2

Hi @instaflames1021 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

2 Likes