hi everyone this is colin from speedy,com,and in this new video we are going to,see how you can create,upsells in your cart page in the,description of the video you will find,the link to the written tutorial where,you will have access,to the code that we will be using today,before we begin,you should absolutely subscribe to the,channel so that you don't miss out on,any of the upcoming free tutorials,all right so with the first step we are,going to implement the code of the,system itself,so you will have to copy the code that,you see here in the creating the,snippets section,there you go then you will go to your,store,in the themes page here you will have,to click on actions and then edit code,but before you do that you should,actually click on,duplicate so that you will make a copy,of your theme files,just in case you make any big mistakes,and you want to go back,so once you've done a copy of your theme,then just click on edit code,there you go find the snippets folder,and click on add a new snippet uh then,we will have to name it i think,it's uh dg cart upsells there you go,make sure you name it properly or it,won't work,create then we passed the code that we,just copied and we click on save,so now that we have added the system,itself into the theme files we have to,display it somewhere,so we are going to go back to the,tutorial,find this code copied and we are going,to decide where we want to put it,so this tutorial is about cart page of,course you can place it somewhere else,if you want,but we are going to find the cart that,liquid file and place the code at the,very end,click save and there you go so this is,fairly straightforward and easy to,understand,what this code allows us to do is,include,the file under the name of dgcart,upsells the file that we just created,so once you've done this you will go to,your products,then collections and you will create a,collection,that you will be using for the upsell,system,so manual name the collection upsells,this is important click on save,and then you will have to add the,products that you will want to,show in the cart page so let's see here,what we have we have three products i,will select,all three add,there you go and now let's see what it's,going to look like,go to your store find a product page,let's see product one add it to the cart,view cart and there you go we have the,upsell system just underneath we can add,any of the products and it's going to,update it,automatically there you go we can see,the price one,and the product two that i just added,please know that this tutorial will only,work if you have a cart page which means,that if your theme,only shows a drawer card or a mini card,then this will not be useful for you,another important detail,to understand about this system is that,it will only display,the same collection of products no,matter what you have added to your cart,which means that you cannot showcase,different kind of upsells for different,type of,cart products of course that's something,you can actually do in shopify,but the fact is that this is a free,tutorial and it will require,a lot more coding all right so before we,end the tutorial i will also explain to,you how you can actually customize,some of the details of the system so,let's go back to the code editor,open the snippet file and here at the,very top you have these four lines of,code,for example the first line is about the,collection title,so here we have set it to upsells,that's why here we have chosen upsells,as a title,so make sure that the title you add here,is the same as you have here,then you have the number of products as,limit,for example i suggest that you don't,change it make sure you don't add more,than four products,i think it's useless then you have the,title,that's shown in the cart page itself and,this is the default title that you can,customize as you wish,and you have also the title of the,button itself,and lastly if you want you can customize,the color of the,add to cart button itself so actually,the color here is the default color of,the theme,but if you want to change it to a,different color,all you have to do is come back to the,line number 10. here we have an empty,spot so here you will write background,then you will decide what kind of color,you want,you have to put it in the,hex color code so let's say i want to,put it to gray,this is the code for gray then i save it,refresh the page and here you can see,the color,is gray of course you have to be careful,about the,color of the text of the button itself,but,this is just a little tip so that you,can maybe change the,background if you want to i think i'm,going to,go back to how it was before and this is,pretty much it,i really hope you liked this video and,if you did please don't forget to,subscribe to the channel and like the,video,it will really help us grow and you,won't miss out on any of the coming,free and great tutorials,you
Congratulation! You bave finally finished reading what app keeps the cart anywhere on the page for shopify and believe you bave enougb understending what app keeps the cart anywhere on the page for shopify
Come on and read the rest of the article!