Up next in 10
How To Add 'Add to Cart' Button On Collection Page (Shopify 2024)
2K views
May 25, 2024
### How To Add 'Add to Cart' Button On Collection Page (Shopify 2024) In this tutorial, we'll show you how to add an 'Add to Cart' button directly on the collection page of your Shopify store in 2024. You'll learn step-by-step how to modify your Shopify theme to include this feature, allowing customers to add products to their cart without needing to visit individual product pages. This enhancement can improve user experience and increase conversions by simplifying the buying process. By the end of this video, you'll have the tools and knowledge to implement this feature on your Shopify store, making it easier for customers to shop directly from your collection pages. Perfect for Shopify store owners looking to optimize their online shopping experience.
View Video Transcript
0:00
How to add add to card button on the collection page
0:03
Hi guys, welcome back to another video. And in this video, we're going to be telling you how you can add this button right here on your collection page
0:10
As you can see right here, I have added this add to card button on the collection page
0:15
Now I'm going to show you how you can do it the same to your store. So first things first, what you're going to do is you're going to sign in into your Shopify store
0:23
And you will see on the left hand side, you need to go underneath sales channels into the online store
0:28
And over here in themes, what you're going to do is you're going to come over here onto your current theme, which is going to be the Dawn theme
0:35
Right now, my version is 8.0. Right now, my current version is 7.0.1. 8.0 is available, but for now I think this is okay
0:46
So what you need to do is you need to click on these three dots right here
0:50
Click on these three dots and the drop-down menu will appear. You need to go into edit code
0:55
If you want, you can duplicate it and then you'll. you can implement it into your main store
1:00
So duplicate it right here by clicking on the duplicate button. As you can see, now we have a duplicate right here
1:08
Now what we can do is we can go ahead and click on edit code
1:11
This way, if any mistakes are made, our main theme is not affected by it
1:17
We're just testing it out. So let's go ahead and click on edit code
1:21
Now the process is very simple, all right? What you're going to do is you're going to go into your search files right here and you're going to search for a specific
1:28
file which is going to be card product dot liquid this is the file that we're looking
1:34
for right so don't worry about it the codes will be provided in the description so you can go
1:39
ahead and check it out and copy it now the important thing is to find the main line right so
1:46
since we will have probably different versions of the theme that way the code might be a little
1:53
mixed up but you're going to have to find it right for me it was i think line
1:58
number 300 something Let me check Yeah here we go Underneath products dot product dot on sale right We have end if we want you could search for product card wrapper right You can find that And on top of it on else separated by at least one two three four five lines
2:21
And in the third line, in the middle one, you can edit the code. Now, this is the code right here
2:27
As you can see, we're just simply going to go ahead and copy this entire code
2:32
I'm going to copy it. There we go. We're going to go back over here. We're going to paste the code
2:37
we're going to click on save and now we're going to go ahead and open up a preview by clicking on the preview store button it's going to open up a preview so that we can see if everything is working so right now we don't have any buttons we can see like a little bit of glimpse of them so as you can see it's all jumbled up this is because in my previous file i added then let me just remove it there we go it is now removed we don't see anything like that so now what we need to do is
3:07
is after you've pasted the code, make sure you save it, right? Once you've saved it, we can move on
3:13
Next, we want to go ahead and search for base.css. Right here, underneath assets, you can find it
3:19
Then within it, go to the very bottom, scroll down to the very bottom
3:24
and you're going to paste another piece of code, which is a very small code right here, card wrapper, height
3:31
We're just simply going to go ahead and copy it and come back. And over here, we're going to paste it
3:36
and then we're going to click on save wait for a couple of seconds there we go asset saved now let's go
3:42
and take a preview we're going to reload it right here it should pop up there we go sorry about that
3:49
so as you can see we now have a add to card button right here now you could also customize it
3:55
as well by going into the card liquid portion right here and you could just you know change up
4:03
some of the colors right here. And also I just want to mention that if you have like variants available
4:10
like different sizes or variants available for different products, then you will have a view options button
4:17
So currently, as you can see, I've turned off all the variants
4:21
So if I go back to my Shopify dashboard right here and I go into products we find different as you can see variants if we go into a product and we enable different variants let say right
4:37
here we add some different colors let's say we add a black option right click on done and we
4:45
can even select a image for it as well if you want let's go ahead and select that and click on
4:49
done and then we just simply save the product Now we have a variant of this product
4:55
Now if we come back into our store and reload it, right here, as you can see, it says view options instead of add to card
5:03
So make sure you disable the variance, but I don't know if you can actually change it because this is how it is
5:11
Like if someone wants to add it to card, they can come over here, choose the variant they want, and then they can add it to card from here as well
5:18
So if a product doesn't have any variance, it'll just show the option
5:22
add to cart as well so keep that in mind so let me just go back and delete the
5:27
variance that I just created that way save that save product yep come back
5:33
over here reload it and it should think let me check yep there we go it's
5:39
gone now I have removed all the variants from these products that's why we now have
5:45
add to card so pretty simple that's how you do it that's how you add it now as I said
5:49
before if you wanted to customize it you can but that's a little bit of hassle and I wouldn't recommend it if you don't know what you're doing
5:56
so I recommend just leaving it as it is but you could change you know the style of it as you can
6:03
see you can increase the margins you can add the type of buttoned over here you can have
6:09
some visual quantities changed up it depends on you as you can see in style we have top
6:15
bottom we have tab index we can change it over here if you want to but I wouldn't recommend
6:20
it. I recommend leaving it as it is. That's why it's not too much complicated. Just simply add it right
6:27
here. We can directly check if it works. There you go. As you can see, it's now added right here
6:33
We can add this one as well There you go As you can see it works out It actually works And also guys if coding isn your thing and you don want to do coding to get the add to cart button then what you can do is you can also change the theme
6:48
So for example, I have the Dawn theme. Within the Dawn theme, there is a default option
6:56
to add the add to card button, which can be found within the product's description, as you can see right here
7:03
Of course, if you want to add them from here, you have to add the code
7:07
Otherwise, it just doesn't work, right? There's also an option for another theme
7:13
Let me show you. Let me actually exit it from here. Right here, as you can see, there's another theme called Debutify
7:20
Now, it's very similar to the Dawn theme. Of course, in this one, you also don't get the option to add to card
7:26
but I feel like it, and overall, it's just a better experience. So let me just preview it over here
7:32
So this is the theme itself, right? I added this theme and we have this page option
7:38
We're going to go ahead select pages. And over here, these are just example products
7:43
but you can see it's right here. If I go into the collection page, I will have all of my products right here
7:49
and you just simply click on the product to add them to your card. It's very simple
7:54
As I said before, if you want the add to card button to appear on the collection page
7:59
you're going to have to do a little bit of coding. It's the only way unless you want to buy
8:04
a good theme. If you want to buy a good theme, there are plenty of options like over here
8:10
These are popular free themes and we can go over here to the theme library where we have a bunch of
8:18
different options. So you could get a theme from here. You know, you can buy the theme different prices
8:25
for different themes but as you can see they are quite expensive like 350 320 350 like these are
8:33
quite expensive theme so if you want to spend money you can so having said that thank you guys for
8:39
watching and i hope you guys enjoyed this video and if you did be sure did the like button
8:43
subscribe to the channel and turn on post notifications also comment down what you think about this
8:48
video and if you have any questions let me know as well and until next time take care and goodbye
#Consumer Resources