how do i add text in the corner of my store page along the announcement bar?

Store Design

Topic summary

A user wants to add an email address to the top-right corner of their store page, aligned with the announcement bar on their Shopify site (unsula.com).

Proposed Solution:
One responder provided detailed technical instructions involving:

  • Modifying the announcement-bar.liquid file to add an email link within the .announcement-bar__message class
  • Adding CSS code to base.css or theme.css to properly position the email using flexbox layout (display: flex; justify-content: space-between)
  • Step-by-step guidance for accessing Shopify’s code editor through Admin Panel > Online Store > Themes > Edit Code

Other Responses:

  • A link to Shopify documentation (though for credit card icons, not directly related)
  • Multiple requests for visual examples or illustrations to better understand the desired layout

Status: The discussion remains open with no confirmation whether the solution was implemented successfully.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

im trying to add an email address on the right top corner along the announcement bar https://unsula.com/

can anyone help?

2

Hi @ompee1978 ,

You may check Shopify documentation
https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-credit-card-icons

3

Hi @ompee1978

do you have any illustrations

4

Hi @ompee1978 ,

1. Liquid Code (announcement-bar.liquid)

To add the email address under the .announcement-bar__message class in the announcement-bar.liquid file:

<div class="announcement-bar__message">
   {{ settings.announcement_text }}
   <span class="announcement-email">
      <a href="mailto:your@email.com">your@email.com</a>
   </span>
</div>

2. CSS Code (base.css/theme.css)

If the email address is not showing in the correct position, add the following CSS code in base.css or theme.css:

.announcement-bar__message {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

3. **Steps:**1. Log in to your Shopify Admin Panel.

  1. Go to Online Store > Themes > Actions > Edit Code.
  2. Open the announcement-bar.liquid file under the Snippets folder and add the Liquid code.
  3. Open the base.css or theme.css file under the Assets folder and add the CSS code.
  4. Save your changes and refresh your website to check if the email appears correctly.
5

Hi @ompee1978

Do you have any illustrations