embedding shopify into showit

hey there this is kristin with k,design co and today i'm going to be,showing you how to,embed a shopify buy button into,your show it website so the example,i'm going to be giving is actually using,my own website,so on my sales page for,my becca template i have some buy,buttons i actually use,thrive cart instead of shopify but you,can use shopify just as well,to sell your products so i'm today i'm,just going to show you um how i would,switch those out if i was going to be,using shopify so,i would um actually delete,the if there's an existing placeholders,in your template,um they're non-functioning buttons so,i'm just going to hide this one for now,so that we don't have it and i'll hide,the mobile version too,and first what you need to do is set up,your products,in shopify so i'm going to go ahead and,create a very basic demo product for,this example,so i'm going to call it rebecca,templates,here is my description,oops and then i will,add a picture which i have ready to go,here drop that in,i'm going to set my price,don't charge text don't track quantity,and it's a digital product so i don't,need that,as well so this is a very basic setup,obviously you're going to take more time,to fill out,the details for your own products but,just for this example,i'm just showing this as an option,and then i'm going to go ahead and save,actually i'm going to,check active and then hit save,and what you're going to want to do,next once you have your product set up,from a basic standpoint,is you're going to go over here back to,your sidebar and under sales channels,um there's a buy button option if,there's not a buy button option for you,just need to click this little plus sign,and then it should show up in this list,for you to add it to,one of your sales channels and so what's,great about the buy button,is that you can actually use it to embed,um products on your website without,paying for the full,shopify plan so the buy button is,available under the shopify light plan,which is a lot,um more affordable if you're not using a,full online store,through shopify so this is great if,you're just embedding products into your,site,um so i'm going to go ahead and click,buy button and then,create a buy button so you'll want to,click the top option,just to embed a product,select next and then it's going to give,me some options over here where i can,select the style,if you are it's kind of up to you how,you want to embed this,for my purposes i literally just i have,everything else designed on the page i,just want to put a button here,so i want my button to be as basic as,possible i don't necessarily need a,preview of the image with it,so i'm just going to hit basic so that,just gives me the button,and then it's going to ask what behavior,do i want to,happen after they click the button do i,want them to just add it to a cart,or to check out um,or open for more details so for this,situation,i would just say go direct to checkout,because of the nature of the product,it's not something that,people are going to be my multiple,templates probably so,but it depends on what you're selling so,i'm going to,say direct to checkout and then i have,the option to,change my buttons style so,um if i don't want rounded corners which,i don't because,all the buttons on my site are not,rounded i'm just going to pull that,slider,over to the edge if i wanted rounded,corners,obviously you could do so like that,um but i don't so that looks good no,rounded corners and then it's asking me,what button width i want,if i want it to match the other buttons,on my site i can take a look at,let's say this one for example,and then i see the width of that is 277,so i can go ahead and oh it's actually,increasing the padding on either side,so it might take a little bit of guess,and check to,um to format that exactly as,that one but we can get it close so um,i'm gonna,i'm gonna say that's pretty close maybe,not get down to 80.,okay so then i can change the background,colors,on my um button and again,i can reference what i'm using um on my,existing site,if i just want to pull the color that,i'm using,um on this one for the border i'm just,going to,open my color palette here and i'm just,going to copy that over so it's easy to,pull,i'll paste that in here and now my,button,matches the styling you can change also,the color of the text but i actually,want to keep it white i think that looks,good,um you can change the text font,so um,there's not custom fonts per se in this,option but you do have,many of the free google fonts as an,option so there might be a good,alternative that's comparable,to the font that you're using on your,site for me,lato is a pretty close,alternative to the font that i use on my,site so then you can just,change the sizing if you want if you,want to bump it up to be a little larger,or bump it down to be a little smaller,you can do that,i think 15 is actually pretty good so,i'm going to leave it,like that so another thing you can do is,you can also preview,what it's going to look like in,different browsers but essentially it's,the same,it just gives you some contacts there so,then i'm going to go back,to um my,advanced settings here just make sure,that is,accurate to what you want to happen if,you want the checkout to pop up,or you want to just redirect in the same,page you can do that i actually kind of,like the pop-up,um so i will leave that as so,and then we've already set the button,style,the layout under layout you can also,change the text for the buttons so if i,wanted it to be uppercase i could,actually change that to that,so by now um,if you had something that you wanted,people,to purchase multiples of that you could,add this,shell quantity field i'm gonna change it,back to desktop you,as an option i don't really need that,functionality so i'm just gonna check it,off,you could also change the alignment to,be left or right i think center,is going to work best so i'm going to,keep it centered,and then now that i have the button,close to how i want to look at it,i'm just going to hit next okay so now,i've generated a code that i just need,to copy,and then you're going to go straight,over to your site here,and then we're going to use an embed,code on the page,double click into the box,paste it into the box save,it and then,you'll see the button up here on the,page so now what i need to do,is just adjust the sizing so it's more,accurate,one thing you'll notice is that you,need to uh make sure that you're at the,default zoom um so you're actually,previewing the button,um at the size that it is actually going,to show on your page so,with here the button sizing is a little,bit off from what i have,but i could easily just change the,sizing to,match um this one so that they were even,if i wanted to do that and if i was,actually going to be placing this button,here,um with embedding buttons like this you,have you don't have as much control,over the look as you do in show it or,the show it,based elements but you can get them,pretty close so that it creates a,seamless experience so,now that i have my button on here um,you'll notice that i've created a new,element in the layers panel over here,i can rename that just as my buy button,so i know what that's referencing,and then i also want to make sure that i,click over to,my mobile view and,by default it's going to kind of create,this,long container that i don't really need,such a long container,um and then if you see this weird how,it's kind of squished,the text on top you can stretch out so,there it goes that's a better fit for,sure,okay and then i can go ahead and,center that using my center canvas,button,so that is closer to how we actually,want it and like i said you can,adjust any other buttons on the page so,that this the,widths and size matches but this is,at least close enough for example sync,so,now that i have my button embedded there,i'm going to go ahead and preview,what this looks like using my preview,button and show it,and i'm actually going to pop this out,so i can see it full size,so if i scroll down now i can see that i,have a buy button here,um since this is just a demo mine's,actually not going to work,since i do not subscribe to shopify,light,but once you have your,settings set up in shopify and you've,connected,your either paypal or,payment other payment integration then,you should be able to have a functioning,shop,so i hope you enjoyed this tutorial,please let me know if you have any,questions,feel free to put your comments below or,subscribe to,k designco youtube channel for more,tutorials have a great day

Congratulation! You bave finally finished reading embedding shopify into showit and believe you bave enougb understending embedding shopify into showit

Come on and read the rest of the article!