Payment Icon Border (Origin)

Solved

Payment Icon Border (Origin)

PoW8
Explorer
67 1 12

IMG_7144.jpeg

 Hello, how would I either add the same black border “Apple Pay” has to the others or replace its black border with the same as the others? 

I’d really like them all to be uniform.

 

printsofwhatever.com

Accepted Solution (1)

DaisyVo
Shopify Partner
2542 317 368

This is an accepted solution.

Hi @PoW8 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

svg.icon[aria-labelledby="pi-apple_pay"] > path:nth-child(2) {
    fill: #CFCFC9 !important;
}

 

Here is the result: image_720.png

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 4 (4)

suyash1
Shopify Partner
10473 1289 1651

@PoW8 -- I do not recommend it as it looks wierd

 

suyash1_0-1736059974320.png

 

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

devcoders
Shopify Partner
779 97 201

Hello @PoW8 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

 

.footer svg.icon.icon--full-color {
border: 1px solid black;
border-radius: 4px;
}
.footer svg[aria-labelledby="pi-apple_pay"] {
border: none!important;
border-radius: 4px;
}

devcoders_0-1736069324626.png

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

DaisyVo
Shopify Partner
2542 317 368

This is an accepted solution.

Hi @PoW8 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

svg.icon[aria-labelledby="pi-apple_pay"] > path:nth-child(2) {
    fill: #CFCFC9 !important;
}

 

Here is the result: image_720.png

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
PoW8
Explorer
67 1 12

Thank you. Now how would I go about adding this effect to all the payment icons? 

I see I can change the fill to any color I want for Apple but what about the rest? Just to make sure they’re all the exact same color. And I just noticed “Shop” has no border. Is there a way to fix that too? I’ve also noticed it’s slightly bigger than the rest as well.