Up next in 10
How To Add Payment Icons Under Add To Cart Button On Shopify
591 views
Apr 17, 2024
"Unlock the secrets to enhancing your Shopify store with payment icons placed conveniently under the 'Add to Cart' button in this helpful video. Learn step-by-step instructions on how to integrate payment icons seamlessly into your store's checkout process. Whether you're a novice or experienced Shopify user, this tutorial provides easy-to-follow guidance to enhance the user experience and instill trust in your customers. Discover how to customize your store's design, improve navigation, and streamline the checkout process with this invaluable tutorial. Elevate your Shopify store and boost sales by implementing this simple yet effective enhancement today."
View Video Transcript
0:00
How to Add Payment icons under your Add to Card buttons on Shopify
0:06
Hey guys, welcome back to the YouTube channel. Today we'll be taking a look at how you can get started
0:14
with adding your payment buttons or payment icons under your Add to Cart buttons
0:21
So for example, you guys see over here we don't have any payment icons
0:25
but when you go to the footer you have icons like these
0:29
So if you want to insert these icons over here, you can do it in very, very easy ways
0:35
and I will be showing you exactly how step by step. So there are two ways to doing this
0:41
First is the lazy way. Second is the slightly better, but almost the same way
0:46
So both of these methods are very easy. You don't need to have any skill
0:51
And we're just going to do them step by step so you guys can follow along. Now, you want to open any of your product pages
0:59
in a new tab. So I've just opened up this product page
1:02
And you want to go back into Shopify. You want to click on your online store
1:07
on the left side of your screen. Once you do that, you will see your theme
1:11
whatever theme you have applied. You will click on customize. Once you click on customize
1:17
you're going to click on this top section over here. Click on products
1:21
And you can select, you know, whatever product that you want to insert the icons to
1:27
Once you've opened up this product, You want to go back into your new tab and you want to scroll down to your footer where you see these payment icons
1:37
Now you can just hover your mouse over these payment icons anywhere over these payment icons is fine
1:43
Do a right click. So you're going to do a right click
1:47
If it's not doing a right click, it's probably because you're logged onto Shopify
1:52
So you can just open this up copy this open it up in the incognito window if your Shopify store is live and then you can just scroll down do it over here and then once you do that you going to click on inspect i going to go back
2:06
to my normal window so you're just going to do this and then you're going to click on inspect
2:13
once you click on inspect you will see a highlighted item right above your highlighted item or
2:19
whatever item is highlighted you will see you'll class list list payment you know
2:25
this is going to be the thread that you're going to see. So these icons on the bottom are not actually photos that are uploaded
2:33
These are coded icons. So you will be able to see this code over here
2:40
And all you have to do is select this, and then you will do a right click, click on copy, and copy element
2:46
Just copy the entire element or just do command C or control C
2:51
This will copy the entire element. Then you want to go back into
2:55
our Shopify editor that we opened up. You want to click on your product information, scroll down, click on Add Block, click on Custom Liquid
3:05
Once you add Custom Liquid, you want to click on that custom liquid on the left side, and
3:11
you want to just do a right click and paste the items that you just copied, and that is it
3:17
Once you have pasted these items, you're going to go back. Then you will see this custom liquid over here
3:22
going to place your mouse over these six dots on the right side and you're going to drag it above
3:29
So let's say I want to place it above my buy now button like this
3:35
So just like that our little payment options have been added you can choose to place it down below wherever you find appropriate wherever you want to add these buttons it's totally up to you but let's say we just want it to be in our product information and we have our
3:52
buttons we going to move those back up like this and we have our little custom liquid and I going to move above our buy buttons like this so just like that I have added this once you completed it you can go back and then click on save on the top right
4:10
now this is the easy method now this has been applied and if I go back to my Shopify store
4:17
and I open up this product and I refresh it you guys can see we have our payment options right like you know
4:24
our payment options are present, our payment icons are present. Now, this is the lazy way because you're not fitting it into the theme
4:32
and the more efficient way is to get these icons from your code
4:37
So that's a little more difficult and it works for the dawn theme
4:41
but for some themes it might have some errors. So if you want to have like a very basic way, then use this method
4:48
It's going to be applicable on all kinds of Shopify themes. but just in case you want to do the other method let's remove our custom liquid from here
4:57
remove block and let's go back so to do that you want to just open up your Shopify store click on
5:06
customize on your code then you're going to close these sections and just go directly to your
5:12
footer once you're in your footer you actually want to open up you know the code so you want to
5:18
click on edit code on top and once you do that you want to in your code section you just want to
5:25
search for footer and you have your footer liquid so that's what you want to click now in your
5:31
footer liquid you're going to scroll down and you have your social link Pinterest links and below
5:37
that i'm pretty sure you're going to find your payment link so you just have to search for the word
5:44
PayPal or any other yeah so over here in For me, it's in line 319
5:50
We have this which has footer payment visually hidden section footer payment like this and we have list in list payment all of that So you can just simply copy this from here like this and we have list and list payment all of that so you can just simply copy this from here like this then once you going to copy that like that you just going to copy it then you going
6:11
to go into your product page or you can just go into your product section and you can exit this
6:19
click on customize click on edit code or just go directly from here
6:26
here as well go into your product click on default product click on add block custom liquid
6:33
click on your custom liquid paste it we're just going to click on edit code we're having some
6:41
issues with the coding section so i'm just going to exit all the typify logins i have
6:49
so i can really access the page that i want to having error with my theme settings right now
6:56
So Shopify is having some errors for some reason, so I'm just going to clear my cookies and I'll redo this
7:03
So I'm having some errors with Shopify. Currently, I guess I'm having some errors with my Shopify server, but it's pretty much the same thing as the first method
7:13
You just go on ahead and you enter the copied code into your website code
7:19
So click on customize, click on over here, edit code. and in your edit code section you're just supposed to insert your code
7:28
for some reason i'm having some errors with it but that is how um you know you do it
7:34
it's pretty much the same thing as our first method but it just helps in making sure your buttons
7:39
are correctly themed as the rest of your website so i hope you guys found this video helpful
7:45
make sure to leave a like and subscribe to our youtube channel and if you have any questions or quarries
7:53
leave those in the comment box down below. I would love to help you guys out and I will catch you
7:59
guys in the next video
#Consumer Resources
#Retail Equipment & Technology
#Shopping