Editing mobile announcement bar size

Store Design
,

Topic summary

Main topic: reducing the thickness of the mobile announcement bar on a Shopify store.

What changed:

  • A helper advised editing the theme’s main layout file (theme.liquid) via Online Store > Edit Code and adding a custom code snippet just above the closing tag to slim the bar.
  • A result screenshot was shared showing a thinner announcement bar on mobile. The store owner confirmed the fix worked.

Context:

  • “theme.liquid” is Shopify’s primary layout file; the “announcement bar” is the top banner used for messages/promos.

Outcomes/decisions:

  • Original issue resolved: mobile announcement bar successfully made thinner through a code change in theme.liquid.

Additional thread activity (tangential):

  • Another participant asked how to add a social share icon in the Inspired theme to match a provided design, sharing a product URL and password. No solution or code was provided in this thread for that request.

Status:

  • Primary topic: resolved.
  • New, separate request about social share icon: open/unanswered.

Notes:

  • Screenshots were central to confirming the visual result.
Summarized with AI on December 29. AI used: gpt-5.
2

Hey @Cynos_Express

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-1715629188177.png
Moeed_0-1715629188177.png364×783 352 KB

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

Best Regards,
Moeed

1 Like