Add Payment Icons to Announcement Bar

Shopify Discussion

Topic summary

A Shopify store owner using the Sense theme seeks help adding payment icons (PayPal, Afterpay) to their announcement bar, similar to a reference image showing icons in the top-right corner.

Initial Solution Provided:

  • Edit announcement-bar.liquid file
  • Insert HTML code for payment icon display
  • Upload icon files via Settings > Files
  • Add CSS styling for proper formatting

Implementation Challenges:

  • User attempted the code insertion but icons didn’t appear
  • Couldn’t locate the Files section in Settings
  • Uncertain about correct code placement
  • Screenshots show attempted code implementation

Current Status:
The original poster acknowledged limited familiarity with Liquid code and theme structure. An expert (Liquid_xPert_SJ) offered direct assistance and requested collaborator access to implement the feature. Another user posted a similar request in the same thread and received offers of help from multiple community members. The discussion remains ongoing with implementation pending collaborator access.

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

Could anyone please help with adding the payment icons to my announcement bar? I am using Sense theme.

Thank you!

2

Liquid_xPert_SJ I have created a new thread if you are able to help please? And perhaps I can complete this inquiry properly as I have started it.

3

Hi @Lydia224 ,

You can add payment icons to the announcement bar in the Sense theme by following these steps:

1. Edit the Announcement Bar Code1. Go to Online Store > Themes > Edit Code

  1. Open header.liquid or announcement-bar.liquid (depending on your theme version)

2. Add Payment Icons Code

Inside the announcement bar section, add this code where you want the icons to appear:

3. Upload Payment Icons- Go to Settings > Files and upload your payment icons (Visa, MasterCard, PayPal, etc.).

  • Replace visa.svg, mastercard.svg, etc., with the actual file names.
  1. Add Styling
.payment-icons img {
  height: 20px;
  margin: 0 5px;
  vertical-align: middle;
}

oscprofessional_0-1739970678301.png
oscprofessional_0-1739970678301.png1244×841 49.4 KB

4

Thanks for your response,

1 & 2. I have added the code to the announcement-bar.liquid and nothing has appeared in the announcement bar.

  1. I cannot find where to do this. There is no ‘files’ section in my ‘settings’

  2. I added this code below the previous code.. I’m not sure if this is correct?

Here is the code inserted…

Screen Shot 2025-02-20 at 9.25.13 am.png
Screen Shot 2025-02-20 at 9.25.13 am.png1441×823 145 KB

This is what I am trying to achieve… (paypal | Afterpay top right)

Screen Shot 2025-02-20 at 9.19.57 am.png
Screen Shot 2025-02-20 at 9.19.57 am.png1819×106 8.54 KB

Thank you

5

Hi, @Lydia224

Dont worry if you are not familiar with the instructions i can do it for you :slightly_smiling_face:

1 Like
6

I would love to learn how to do it. If it is not too tricky?

7

@Lydia224

It is technically since you don’t have much idea of the liquid code and theme file structure. I would suggest you to leave it on an expert.

1 Like
8

Ok sure

9

It would be great if you could help :grinning_face:

10

@Lydia224

sure..

11

How to go about this?

12

i need collaborator code access. so that i can get in and fix that for you.

13

Hello

You Need to Upload Payment Icons

  • Go to Settings > Files and upload your payment icons (Visa, MasterCard, PayPal, etc.).
  • Replace visa.svg, mastercard.svg, etc., with the actual file names.

add below code in the style tag

If you are not familiar with coding to place it in the exact location, please provide us with store access, and we will implement it for you.

1 Like
14

Who can help me to get Paypal & Afterpay logos in my announcement bar?

1 Like
15

Hey @VeeMiles

Happy to help you, feel free to share your store URL and collaborator request code in my private messages!

Best,
Moeed

2 Likes
16

Hey @VeeMiles,

I saw that @Moeed has picked this up, you’re in great hands! If there’s anything else you need along the way, feel free to reach out. We’re happy to help however we can, no strings attached.

Cheers!
Shubham | hello@untechnickle.com

1 Like