how to add shopify buy button to squarespace

hey and thanks so much for checking out,our bijou,template we're so excited about it um,and it's perfect for online shops,a quick note before we dive in on how to,integrate it into squarespace,if you already have a shopify you do not,have to do all of the product,creation stuff that we're going through,but we're just covering everything from,a to z,so today we're going to be showing you,all about how to integrate shopify and,squarespace,and we're going to be doing that using,the shopify buy button so although the,styled square doesn't,offer shopify templates we do offer,squarespace templates,that you can go ahead and integrate,shopify with which is,such a great option this is great if you,want the beautiful design,and all of the cool content creation,options that squarespace offers,but you are heavy on selling products,you are a product-based store,and you want to have all of the,capabilities of shopify and the user,experience of,shopify especially when dealing with,shipping adding inventory keeping track,of orders everything like that,what you need in order to do this is you,will need a shopify subscription,shopify lite which is 9.99 and a,squarespace subscription,you don't need a squarespace commerce,subscription so with the normal business,um squarespace and the shopify lite it,actually ends up being the same price,as a shopify subscription for actually,selling products,which is really great there are a couple,different ways to utilize,the buy button one is by product and,what is by collection,my collection is a lot faster and a lot,easier,by product is a lot slower and a little,bit more tedious but we're going to go,over both,just in case,so here is how you use the buy button,with collection,if you already have a collection within,shopify it makes this,so much easier you click collection buy,button,click on the collection you want to,insert into squarespace,and then voila here it is so um you can,change a couple of different of the,options you can have the person,view the product buy now add to cart,however you want to change the button,you can also change,a lot of the different options like the,colors,the typography and everything like that,right now it's pulling something i did,later in this video,and i did that within the part where we,talked about how to integrate,individual products um so it saves all,that which is amazing,so that's why it's pulling typography,that's already matching what we have,going on on our,um squarespace sites but later in the,video i'll cover how to do all of that,um so there's a lot of different options,as you can see but how it looks in the,shopify,page is how it will look plugged into,your squarespace page,which is amazing so now you can see,those options,and here i'm just playing around with,how to utilize it,and what it will look like when the user,actually clicks on it which is always,good to see,so now what we're going to do is we're,going to go ahead and,click next,and then the code populates copy code go,over to your squarespace site,i have an earrings page made um,and what you would do is you can see,this from later in the video i'll,actually show how i did these two,those were the individual products and,some different options with individual,products,but you would just click the little,arrow you would search for the code,block at the top once you find it,click on it and then just go ahead and,paste in the code apply,and then just click done and save once,you're out of preview mode,um you'll see how it looks like on the,page and voila,that's it,so this next part i'm going to be,talking about how to do it if you don't,have products yet in shopify,and if you're going to choose to do the,individual product method,so the first thing you're going to need,to do is you're going to need to create,your products and shopify so like you,would with a normal shopify website,you go go ahead and do the description,the price,the variance the inventory,all of the photos all of the collections,everything like that,so now we're going to go ahead and,create the button the buy button that,we're going to be putting into,squarespace,following what's going on along with,screen you are going to select the,product you want that buy button to,apply to,and then what you're going to do is,you're going to customize actual button,so you can customize what it looks like,how big it is how small it is the colors,the shape,and everything like that,after you're finished you're going to go,ahead and click next once you click next,copy code so now we're in,squarespace you're going to select the,code block,so what you're going to do is click the,little arrow thing search code,click code and then just go ahead and,copy,and paste in that code,and now you'll see the button populated,one of two ways that you can do this you,can add the product,into shopify with all the information,and then it will populate once you paste,in the code,or you can do that in squarespace and,then just the button will populate once,you do the code,totally up to you i would recommend,actually doing all of the information in,shopify,and then just pasting in the code so,that everything populates easily and,you're not doing double the work,so here's how it looks with the products,information already inserted as you can,see i put the,photos and all of the information in,here,now i'm going to go to the buy button,again and you'll see that it's already,saved all of our settings,so we just have to create the buy button,for that product,and click select and then when we do it,um you'll see that the cart,is already done but that's the basic so,if you go to the classic you have the,one photo,full view has the multiple photos and,takes up more space,so it's totally up to you how you want,to do it and,how you want everything to look i'm,going to go ahead and change all of this,so that it matches the branding on,the squarespace template and you can go,ahead and find that by going into the,back of the squarespace template,and clicking into the editable version,of squarespace,going to home clicking design,and then going into fonts and then,you'll see all of the fonts that you use,so squarespace does have a lot more,fonts than shopify does so i would,recommend,just going in and picking something,similar if they don't have the exact,fonts,so i'm gonna go ahead and look through,all of these and,find the one that best matches the,others so that it's kind of,indistinguishable,and just going along with the same vibe,now that i've found the fonts i'm going,to go ahead and change the color so that,it's black and not gray,again shopify will save this so you,won't have to do that every time this,every time it'll save it for all future,products that you want to use the buy,button for so that's the good part you,don't have to repeat it,a million times so once you're done with,that you're going to go ahead,and click next,once you click next copy code again back,into the back end,and then when you put in the code here,you'll see that it's going to populate,all of the product so that you don't,have to do double the work that it's,already all done,in there again if you did want to do all,of the,product stuff within squarespace you do,have that option and then just the buy,button in shopify,let's say you wanted two products side,by side all you would do is go ahead and,put it in the code again,and then what you would do is you would,move it drag the little box,that populates after you save,next to the little box that populates,from the other code,so here you can see them stacked and in,the different views,and then when we go back into editing um,you will see what it looks like side by,side just by dragging,like that and then clicking save and,then you can see what it looks like,and here is both desktop and mobile view,and if you do like that side-by-side,option i would recommend doing the buy,button for the collections instead of,the products like we did at the,beginning,of this video it will save you a lot of,time,so now i'm going to hand it over to,sarah and she's going to walk us through,how to make sure this cart button,appears on every page,so now that you've added your buy,buttons to your shop,page what we're going to do is,we are going to add this,cart symbol here this little tab,on every page of your website this,does take a little bit of coding but um,it's just a couple,really simple steps and we're going to,walk you through how to do that,so you'll notice at the moment that,if you navigate away from a page,with a buy button,you'll notice that the cart,disappears and we don't want that we,want the cart to show up,throughout the website so you're going,to,navigate to your shopify account,and you're going to create a buy button,it doesn't matter which product you,choose,um we're going to want to choose the,a basic layout style and,here i want you to,design the button with your brand,colors and with,just however you want it to appear on,your website so if i go back to the page,let's just say you wanted this cart,sim uh the little cart tab to be blue,to match your brand then you're gonna,want to,make those changes here and update,the button styles in shopify,your button is perfect it's ready to go,you're going to click next,and you're going to copy the code,now return to your,squarespace site and click,edit and,scroll all the way down to the footer,area,you're going to click edit footer,and you're going to add a code block,element so type in,code and select a code block,and here you're going to paste,the code provided by shopify,save that,so now we can see that we have,an add to cart button in our footer,which is not ideal,however if we navigate to any other page,on the website,we can still see the add to cart symbol,so the reason for that is that the,footer is,universal so anything we apply to the,footer will show up on,every page,now what we're going to do is,navigate to design,custom css,and you're going to copy and paste,the code snippet in the description,below,now we also have to use,a chrome extension,it's called the squarespace collection,and block identifier,we will um tag that below,so that you can go download that,extension,but once you have installed the,extension simply click on the b,and you will see uh these blocks,that have the the block ideas,of all the elements on your website,now we want to select the block id,with the button so in this case it's,right here so try to add um your code,block,for the embedded button somewhere where,you'll easily be able to grab that block,id,so if you click on the block id,it will be copied to your clipboard and,then what i want you to do,is just grab this,um outdated block id,and command v paste,the updated block id so i'm just gonna,turn off,the block identifier,and here we can see that our shopify,button,is now gone so we're going to save that,and that's it we're all done,the last step here um would be removing,the cart,the squarespace cart so we are going to,edit,edit site header go to,elements,and we are going to,switch this toggle off so cart here turn,that off,and that will remove our cart,save that and you're all done,thanks so much for watching i really,hope you decide to buy our bijou,template um i'm going to throw in a,little video here just,showcasing the beautifulness having,beautifulness of it if that's a word,and feel free to email us with any,questions at all,so,you

Congratulation! You bave finally finished reading how to add shopify buy button to squarespace and believe you bave enougb understending how to add shopify buy button to squarespace

Come on and read the rest of the article!