BACK

what is a cart drawer shopify

HOW TO CREATE DAWN CART DRAWER IN SHOPIFY | QUICK AND EASY 2022 welcome back graduates so today i'm

EcomGraduates

Updated on Feb 12,2023

HOW TO CREATE DAWN CART DRAWER IN SHOPIFY | QUICK AND EASY 2022

The above is a brief introduction to what is a cart drawer shopify

Let's move on to the first section of what is a cart drawer shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

HOW TO CREATE DAWN CART DRAWER IN SHOPIFY | QUICK AND EASY 2022

welcome back graduates so today i'm,going to be teaching you something,amazing that you can do with dawn and we,all know dawn theme does not have a,slide-out car and it's the most,frustrating thing in the world so you,know what we went ahead and made one now,all of our other tutorial videos they,always start out as a free tutorial and,we end up adding a small price to the,snippet and we will be doing the same,this time around now as a reason for,that the slide out cart was not easy to,create it was a pain but we got it,working it works flawlessly we've tested,it on multiple stores that are active,and it works amazing,so,there's more,by purchasing the slide out cart you're,going to be entered into a giveaway to,get your store designed for free,and by us by professionals now if you,want to go look at our portfolio you can,go to ecom graduates.com and you can,view all the portfolio pieces that we've,done we've worked some work with some,pretty big,brand names out there and we've done a,phenomenal job i know we have because,our reviews speak for themselves go to,our facebook page you'll see all the,reviews i think we have 77 positive,raving reviews,by real clients and you can actually see,on our website the clients who love to,review you can see video testimonials so,you're going to want to do this i,promise you you'll you'll love it you'll,love the work that we do for you and we,want to do it for free we want to do,this often we want to do maybe,every other month we'll do a free,giveaway where we go and design and,overhaul someone's theme or their store,and maybe make a case study out of it,and go over why we did what we did and,how it can help you improve conversion,rates because we know it works in the in,the industry we know what's what's,working for a lot of people we know what,tactics people are doing and we also,stay up to date on current trends for,you know marketing and driving traffic,on the site on the on the website side,of things we don't do facebook ads we're,not experts in that we work with,partners who handle that,um,so anyways,our our previous tutorials we taught you,how to add a fancy announcement bar with,with awesome options like this this uh,timer uh a marquee scrolling text,feature a parallax uh with uh image and,video functionality with with a wide,array of different customization options,uh this custom html section so you can,add maps and various elements this faq,right here this instagram section and,all those videos you can all those links,you can find in the description below to,go and watch those or you can just go to,our channel and see the various,tutorials that we've done without,further ado let's go and check out the,say uh the slider the slide out cart,what you can expect and uh what it does,it's a slide-out car and it does what it,does,so right here just like every other,setup cart you can adjust the quantities,and remove it let's go and make a,purchase and go add to cart here it,opens up you can change the quantity,delete it with that button you can view,the cart page if you want,now we will be rolling out updates to,this uh we'll you know we're thinking,about adding upsells in the cart,announcement bars free shipping,thresholds um various things that you,can do with the slide-out car and this,is this is specific to dawn theme we,haven't i haven't tested this out on,another theme but it's working,flawlessly with dawn um if you're a,developer you can probably change the,code to get it to work on another theme,by all means go do that,um,but this is specific to dawn theme and,what we're doing is we're trying to turn,dawn theme into a premium template theme,that you can use on your ecom store,because dawn theme is a great theme,we also have our own themes,feel free to go to our website you'll,see,eg smartshop and eg big store,eg smartshop is a free theme,it's a very very fast free theme with,the basic functionality that you need to,get your store up and running,with the ability to build upon it more,in the future,and then eg big store is a premium theme,that we're we haven't quite announced,yet but you heard it here first we have,a premium theme for sale,it's called eg big store and we'll have,a video demonstration of that soon but,anyways let's get to it you guys are,here for a tutorial on how to add a,badass slide-out cart to your store so,as always what you want to do is you,want to click on online store and you,want to find the theme that you want to,edit and this is the one i believe i,want to edit so let's preview that real,quick and make sure there's no slide-out,cart there's no slide-out cart,let's close out of this and we'll keep,this open and now what you're going to,do is click action edit code,and i have a written description on how,to do this and this is what you'll be,getting it won't look like this you'll,just see text and everything in a text,file with the tutorial steps and just,follow along with this video with the,text description so that way you don't,get lost i know i move fast i apologize,guys i try to go as slow as possible,so the first step is to open up layout,so layout and theme.liquid so we're,going to click layout we're going to,open up theme.liquid,and we're going to see what else am i,telling you to do so we're going to find,the section footer and we're going to,replace with this code so let's just,copy this to our clipboard,copy and we're going to find footer and,the best way to do that is if you do,ctrl f or command f to find if you're on,a mac we're going to type in footer,and we found it and we're just going to,highlight this and we're just going to,paste right over that,let's fix this formatting shall we,and hit save,all right so what's the next step,next step is to go and find header and,that's in your sections header.liquid so,we're going to close out a layout we'll,go to sections,and find header,and what we need to do is we need to go,and find this block of text now the,easiest way to do that is you don't have,to go and find all for this this just,just cut uh copy and paste or copy the,class names right here and we're going,to do that ctrl f command f option again,and luckily it's already open so we,don't have to do that so now we found it,now whenever i refer you to an open tag,and a close tag that's what this is so,you see this a right here a space href,equals and then you have a closing like,a forward slash a this is a closing tag,this is an opening tag and as well so,this is a closing tag this is also a,closing tag and you see how it just kind,of,it wraps it so here's here's the open,tag and here's the close tag that's the,best way to find where it ends so then,all you have to do is go like this boom,now we're going to we're just going to,delete that,and,right here it's we're saying,go and uh paste this here eg header cart,icon,we'll go back,and we're just gonna paste that and,we'll hit save i'll leave that file open,then what we need to do next is go into,our assets folder and find cart hyphen,notification.js,very easy so go to assets,go to essex,our hyphen notifications now we're going,to go and find more code so let's go and,just highlight this,we'll find this in our file,and we found it and another way to find,where this ends just see this little,open bracket here it highlights the,closing one so we're just going to go in,and,i believe it we want to replace it so,yeah we're going to replace it with this,code,right here,and,oops,highlight this again paste over it,whoops get rid of those don't,accidentally do what i just did,there we go,yeah so if you accidentally highlight,like certain code like that just,get rid of it it's fine then hit save,now,whoops i didn't mean to open up vs code,now what we are going to do,is we are going to go and we got to,create a file so we are going to call,this file eg header car icon and it's a,snippet so we're going to go into our,snippets folder here,so close out of this go to snippets add,new snippet just paste,the file name,and we're going to grab the code below,but here's the code right here,whoops highlight it too much,and just copy this,go into your file,paste,and then just hit save,now,now we have to create a section called,eg hyphen cart hyphen drawer,so now we're going to go to sections,close out of snippets go to sections,paste,create section now we're just going to,pay copy this long block attack,there you go,copy,now just highlight all this get rid of,it we don't need it we're going to paste,right over that,we're going to hit save,so now we didn't have,a cart and now guess what we have a,slide-out cart and it's that easy didn't,take much time at all so again this file,is free for now and i hope you guys,enjoyed this tutorial i hope it brings a,lot of value to your store and i hope it,helps you,generate a ton of revenue um and again,this is free for now and by purchasing,this snippet file you will have to have,an entry into,our our giveaway which will be ending in,one month from today so today is march,10th it'll be ending on,april 10th so march april yeah april,10th and uh we're gonna and and if you,do win we're gonna make a we're probably,gonna record a video we're gonna have it,live from most likely in our facebook,group on our youtube channel and we're,gonna you know hopefully we get a lot of,entries i really do hope hope you guys,enter because this would be kind of cool,to go and design someone's store for,free we like giving back to the,community you guys are the reason why we,get up in the morning you're the reason,why we produce these videos and you guys,are an amazing community i know we're a,small community of graduates but i love,the community we're building and you all,are amazing and you know you guys,leaving comments and and just reaching,out to us gets us pumped up you know we,we really are happy to help you all out,and we want to see you all succeed,that's why we do what we do,so anyways guys thank you so much for,watching make sure you subscribe like,the video comment below any questions or,concerns or anything at all any,suggestions that you have any tutorial,videos you want us to make we want to,hear from you we mean we serve you,that's what we're here for so as always,guys thank you so much for watching,until next

Congratulation! You bave finally finished reading what is a cart drawer shopify and believe you bave enougb understending what is a cart drawer shopify

Come on and read the rest of the article!

Browse More Content