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

[nikita5]

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 

 

[Aashish_Bhatt]

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.

🔧 Steps (for users comfortable with code):

1. Go to your Shopify Admin.

2. Click on Online Store > Themes.

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

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

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

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

<div style="display: flex; justify-content: space-between; align-items: center;">
  <div>{{ section.settings.text }}</div>
  <div>
    <img src="{{ 'afterpay-logo.png' | asset_url }}" alt="Afterpay" style="height: 20px; margin-left: 10px;">
    <img src="{{ 'paypal-logo.png' | asset_url }}" alt="PayPal" style="height: 20px; margin-left: 10px;">
  </div>
</div>
​

• 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.

🛑 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.

💡 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 😊

[brjewelry]

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?

[namphan]

Hi @nikita5,

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