How to add text under the main logo in header

Store Design
, ,

Topic summary

A user seeks to add text beneath their store’s main logo in the header area, positioned above the navigation menu.

Suggested Solutions:

  • Embed text in logo image: Simple approach avoiding custom code, works well for short text. Most themes support separate mobile/desktop logos if length is a concern.
  • Use announcement bar: Most themes include an announcement bar section (typically at the very top of the site) that can display text. A free Shopify app is available if the theme lacks this feature.

Implementation Challenge:
The user attempted to reposition the announcement bar lower and hide its close button using custom CSS, which worked in browser inspect tools but failed when applied in the theme editor.

Partial Resolution:
To hide the close button, add .icon-close { display: none; } to the Custom CSS section (though the app may have a built-in setting for this). However, repositioning the announcement bar downward is not recommended as it likely won’t be responsive across devices. The discussion remains open regarding the best positioning approach.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi,

What would be the best way to add a line of text under the main logo, above the menu in the header? Thank you in advance!

https://admin.shopify.com/store/ad6568

PW: Kiran2023

2

You could avoid custom coding entirely by just including the text within the logo image directly. It would just depend how much text you’re looking to include. If you’re planning to add a lot of text, then I would recommend against it.

Most themes will allow you to upload a separate logo image for mobile, so if it’s something really long, then you could have the mobile logo be just what you have now, and then the desktop logo be the new/edited version with the text under it.

Also, most themes also have an “announcement bar” section/block that you can add above the header (very top of the site), which would be easiest for adding in text, and is best-practice. If your theme doesn’t have an announcement bar built into it, then you can add this app for free:

https://apps.shopify.com/quick-announcement-bar-always-keep-your-customers-informed

3

Hi Stephen,

Thank you so much for responding!

I could try using the announcement bar. I just need to bring it lower and hide the “x” closing button i suppose… I tried doing that by using the code below, it worked using the inspector tool but not when I applied it in the editor. Any ideas? Thank you again.

.announcementBar .icon-close {
color: #ffffff;
}

.announcementBar {
position: relative;
z-index: 8000;
width: 100%;
top: 100px;
left: 0;
display: none;
}
}

4

If you add this to the “Custom CSS” section in the theme editor, it will get rid of the ‘x’ close button (though I think there’s a setting for this somewhere in the app too):

.icon-close {
    display: none;
}

As far as getting the announcement bar to show below goes – I would recommend against that, as move the positioning down probably won’t be responsive (also, it looks good as you currently have it - at the top of the site/page).

1 Like