BACK

show variant title cart shopify brooklyn theme

How to add an add to cart drawer button on Collection Pages - Shopify Brooklyn Theme/TimberJS hello

Studio Raven

Updated on Mar 15,2023

How to add an add to cart drawer button on Collection Pages - Shopify Brooklyn Theme/TimberJS

The above is a brief introduction to show variant title cart shopify brooklyn theme

Let's move on to the first section of show variant title cart shopify brooklyn theme

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 add an add to cart drawer button on Collection Pages - Shopify Brooklyn Theme/TimberJS

hello welcome back to studio raven today,i have a special video,for everyone using shopify,shopify is a fantastic ecommerce,platform which lately has seen,overwhelming growth in the stock market,that's because this platform,is pretty much the second best ecommerce,platform,on the web right now so today we're,going to be looking at,one of the free themes in shopify that,theme,is going to be brooklyn brooklyn,is a free theme which you can download,that is widely popular because of its,stunning visuals,and the ability to add what's called a,cart drawer,just to show you what it is that we're,going to be discussing today,the cart drawer is a type of,shopping cart on an ecommerce website,which instead of,linking the user to a cart page,opens up on the side shows all of your,current items in your cart,and allows you to check out from there,increasing conversion rates,and allowing people to continue shopping,instead of being redirected,to a cart page which can interrupt user,workflow,and overall be slightly worse for an,e-commerce,user experience we can see here that,on uh you know on the brooklyn theme,when we,add to cart it opens up the cart on the,side it shows us a checkout screen,uh it shows us a little blurb here about,courage we've added courage to our cart,and we can add more quantity we can,remove quantity as well,and it really is overall just a great,user experience,and we can close out from there now an,interesting question and,of course this is just a theme setting,that you can activate on the theme for,free,however this video is to show you how,could you get this same,add to cart on the collections page,here we have a collection called cartoon,network,with dexter courage and johnny bravo,and if we were to click on one of these,then it would take us directly to that,product page,and of course we could add that product,to our cart from the product page,but what if you wanted to have an add to,cart button,directly on the collections page,we can actually see here on the shopify,community forums that somebody asked,this exact question they say i have the,cart drawer enabled for product pages,but how do we extend this to the,collection pages consisting of multiple,products,how do we extend ajax cart drawer to,collection pages,i have an add to cart working but not,the ajax drawer and he goes to post,some code here if you are more technical,i'm going to go into slight,technical detail and if you are less,technical i'll be showing you exactly,what it is that you need to change,in order to get this working so,we can see here for the slightly more,technical folks that the shopify,timber git repository this repository,is for timber js timber js is what,the brooklyn theme uses in order to,implement,the cart drawer so if we scroll down,the first thing we see in the,documentation for shopify timber,is a deprecation warning for those of,you who don't know,deprecation in computer programming is,when,something is no longer officially,supported and we can actually see here,that these,some of these files have been updated,six years ago,four or five years ago on average some,were updated two years ago but this is,just the readme,so this hasn't been officially,maintained,in quite some time and so that's why the,forums may have gone dead as you can see,this question is from 2016,it is currently 2020 and there still,have been no replies,posted um so,how can we do this if this is something,that nobody,is responding to how can we get this,done,well let's take a look in the code so,at this screen this is where we can edit,the code for the template,to show you how to get here you would,navigate to your online store in the,shopify admin,panel then you would select whichever,theme is your brooklyn theme,and then click edit code that will open,up,this area here where you can take a look,at the code,and i do recommend that if you aren't,technical to try to have someone a,little more technical either look over,your shoulder,or work with this for you because you,wouldn't want to make any changes that,end up breaking your store,i would also recommend that as i am you,make these changes,on a store that is not published live,as you can see i have debut published,live right now,and brooklyn is just in my theme library,it's best to make any code changes in,a store theme that is not currently,published that way your users aren't,seeing anything,wonky while they're actually using your,store,now then i'm just going to go ahead and,collapse these,and where to begin let's begin,in the sections,so brooklyn has a section called,product template as many themes do it's,pretty standard,this is the code that's rendered when,the product is,loaded that all product pages take from,this,template so what we want to take here,is i'm actually just going to control f,and say form,so from line 155 where i am where it,says capture form,classes i'm going to highlight that,all the way until i see end form on line,240.,i'm going to go ahead and copy this code,now that i've done that i need to figure,out,where is this in the theme code,well this is actually called the product,uh,grid item oh i think it was in the,snippets to the,product grid item here it is,then we can see here this,is the code that's loaded for all the,products,on that grid so we have here the,product wrapper i guess i'll go ahead,and paste,this code at the bottom,and i'll save just to see where that,landed,i may have to play uh place it just,underneath that div,to come looking for looking a little bit,more coherent but let's see so if i,refresh the page,okay perfect so this is step one,now that we have this code in you you'll,notice that it says sold out,now this of course is not the case all,three of these items are digital items,they have no product inventory and,therefore can never be sold out,we do have to change a few things in,this,form i'm just going to format this so,it's easier to read for me on my side,what we're looking for is current,variant now we want to change,current variant just to say,varying and,yes we want it to say variant i'm going,to look for,current variant again okay,we're going to change that to variant,looks like that's,all that's here so i'm just going to go,ahead and save,again and,let's refresh the page aha,so now that we've changed it to use the,variant that's actually in,each of the product grids rather than,the variant that would have been on the,product,page we now see that it's adding to cart,correctly so from here,what do we do next well some of you may,think we're done,but if we go onto this page and we click,on this add to cart it does in fact,work however it's completely skipping,the cart drawer and it's going directly,to the cart page,if i click on the cart you can see that,the cart drawer is still activated on,the page i'll go ahead and hide this so,you can see that better,so what gives why is it that when i,paste this code,onto the collections page it's,completely ignoring the fact that we,have a cart drawer,well what we actually need to do now,that we have this is we need to,register these add to cart buttons so,i'm going to go ahead and remove this,item from my cart sorry dexter,and we are going to initiate the last,step so i'm going to close all these,folders again,i'm going to go into assets and i'm,going to look for,theme.js.liquid now this is where things,start to get,a little bit more technical,copying and pasting that code from,product template,to here was easy enough changing current,variant to variant,was also easy enough you may,be a little bit overwhelmed by what you,will see in this file,but let's go ahead and open the theme.js,dot liquid file now this,file is very very large there's a lot in,here there's a lot to take,in but what we're looking for is we're,actually looking for,the add to cart,aha so we have an add to cart selector,this is inside the ajax cart this is,again,what's adding the item to your cart and,then interacting with,the timber js to actually load the cart,on the page all you need to do is,control,f for add to cart form,and the only result you should get in,your theme.js if you haven't had,other developers working on it is this,section here,where it says if the theme settings uh,are equal to drawer then we initiate,the cart drawer all we don't need this,whole,if statement all we need is this part,here,so i'm going to go ahead and copy that,code,go into the product grid item and,underneath,i'm going to type script,i am going to paste this code in,and i'm just going to steal something at,the bottom here,this document.js if you want to skip,forward so that you can,simply type what it is that i have typed,in this section and you don't want to,watch me construct this then absolutely,go ahead,um okay but for those of you who are,more code friendly it may,be easier just to watch and so,we are now complete with almost the,final step,so now what we need to do is we need to,make sure that this,id is unique,in order for us to make sure that this,id is unique,what we can do is we can look for,this uh piece of data here so let's,command f for the section id,and anywhere we see the section id we,want to replace it,with the product id,so just keep hitting enter and control f,if you're using an ide,then you can simply do this all in one,sweep,and so that takes care of everything,there,now what we need to do is completely get,rid,of this plus section id,and we will type the product id,here i'll copy that,paste that here as well and,i'm going to save and i'll come back to,this and freeze frame on it of course,you could just pause the video here,but let's go ahead and make sure that,this works so i'm going to go back,to my collection page i'm going to,refresh the page,and then i'm going to add dexter to the,cart,and lo and behold our cart drawer has,opened,we can close this add johnny bravo,and johnny bravo ads and what's really,great about this is if i add another,johnny bravo,it updates to two and now we can,interact with this,entirely the way we want and our,collections page,now has an add to cart button,again i'm going to leave this screen up,as i do my outro,but thank you very much for watching i,hope this has helped answer some of your,questions i understand that this,question is a little bit old,but i know that it's relevant so again i,wish you all the best of luck and if you,have any questions or you'd like to see,me post a video on any topics that are,shopify related,you know please post them in the,comments and i'd be happy to address,them,have a wonderful day stay safe bye

Congratulation! You bave finally finished reading show variant title cart shopify brooklyn theme and believe you bave enougb understending show variant title cart shopify brooklyn theme

Come on and read the rest of the article!

Browse More Content