Add Payment Icons to Announcement Bar

[Lydia224]

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

Thank you!

[Lydia224]

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.

[oscprofessional]

Hi @Lydia224 ,

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

1. Edit the Announcement Bar Code

1. Go to Online Store > Themes > Edit Code
2. 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:

<div class="payment-icons">
    <img src="{{ 'visa.svg' | asset_url }}" alt="Visa">
    <img src="{{ 'mastercard.svg' | asset_url }}" alt="MasterCard">
    <img src="{{ 'paypal.svg' | asset_url }}" alt="PayPal">
  </div>

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.

4. Add Styling

.payment-icons img {
  height: 20px;
  margin: 0 5px;
  vertical-align: middle;
}

[Lydia224]

Thanks for your response,

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

3. I cannot find where to do this. There is no 'files' section in my 'settings'

4. I added this code below the previous code.. I'm not sure if this is correct?

Here is the code inserted...

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

Thank you

[Liquid_xPert_SJ]

Hi,@Lydia224 

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

[Lydia224]

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

[Liquid_xPert_SJ]

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

[Lydia224]

Ok sure

[Lydia224]

It would be great if you could help 😀

[Liquid_xPert_SJ]

@Lydia224 

sure..

[Lydia224]

How to go about this?

[Liquid_xPert_SJ]

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

[oscprofessional]

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

<style>
.payment-icons img {
  height: 20px;
  margin: 0 5px;
  vertical-align: middle;
}
</style>

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.