Adding Afterpay & Paypal Logos to announment bar on the right hand side

Store Design
, ,

Topic summary

A user wants to add Afterpay and PayPal logos to the right side of their announcement bar in the Dawn theme. They’ve found previous forum solutions incomplete or lacking follow-up details.

Solution Provided:

  • Edit sections/announcement-bar.liquid in the theme code editor
  • Wrap the announcement text in a div and add a second div containing the payment logos
  • Upload logo images to the Assets folder
  • Use provided HTML/Liquid code snippet as a starting point

Current Status:

  • One community member offered a code-based solution with step-by-step instructions
  • Another offered to review the specific website
  • A follow-up question emerged: the logos appear next to centered text instead of in the far corner, indicating the positioning needs CSS adjustment

Important Note: The solution requires coding knowledge; users uncomfortable with HTML/Liquid are advised to hire a Shopify expert to avoid breaking site functionality.

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

Hi All,

Im needing some assistance here i want to place the Afterpay & Paypal logos on the right hand side of my announcement bar & I have searched this forum before however nothing here seems to work or the steps do work but a small tweak is needed and the answera are not on the thread as the SP has pushed to do it themselves instead of teaching.

Can someone please give me a step by step to get this in to my template im using Dawn. i have attached an image for reference

Screen Shot 2025-04-17 at 2.39.08 pm.png
Screen Shot 2025-04-17 at 2.39.08 pm.png1325×179 9.64 KB

2

Hey @nikita5 ,

Welcome to the Shopify community! Thanks for your question.
Adding payment logos like Afterpay and PayPal to the right-hand side of the announcement bar does require some coding knowledge. If you’re comfortable editing code, you can follow the steps below. Otherwise, it might be best to reach out to a Shopify developer to make sure nothing breaks on your site.

:wrench: Steps (for users comfortable with code):1. Go to your Shopify Admin.

  1. Click on Online Store > Themes.

  2. Next to your theme, click Actions > Edit code.

  3. In the code editor, search for and open the file:
    sections/announcement-bar.liquid

  4. Inside the file, locate the line that outputs the announcement element where you exactly want to put the code.

  5. Wrap that in a div and add another div for the logos. For example:


  
{{ section.settings.text }}

  
    
    
  

​

  • Upload your logo images to Assets (via the left sidebar in the code editor). You can name them afterpay-logo.png and paypal-logo.png for the example above to work.

  • Save the changes and preview your store.

:stop_sign: Important:

This approach assumes you’re comfortable tweaking HTML and Liquid code. If not, small errors might cause your announcement bar or other parts of your store/website to behave unexpectedly.

:light_bulb: If you’re not confident with code, I recommend hiring a Shopify expert to help implement this safely.

Hope this helps clarify! Let me know if you’d like help with the exact positioning or styling :blush:

3

Hi @nikita5 ,

Please send the website link, I will check it for you

4

Hi Aaashish,
Thank you it was very helpfull. Although now my icons are next to the centered text. how do I move them to the far corner?