hey guys I wanted to revisit a video,that I made a few months back about the,Buy button inside Shopify now one of the,things that I realized after I made that,video is having a little bit of context,around where this buy button would be,used could be quite helpful so what I,wanted to do is I first wanted to go,over what are sales channels and how,they are used on the Internet so when,you're thinking about a sales channel,what is a sales channel well a sales,channel is anywhere where you find,customers so an example of a sales,channel is Facebook Instagram Amazon,these are all places that you would be,able to obtain a customer and when a,customer comes through one of these,channels they will be recorded,separately so that you can individually,market to each individual one now,Shopify maintains support for a number,of channels they have plug-ins for all,sorts of the big-name marketplaces that,are out there however there are some,competitors that they don't have native,integrations for some of these,competitors would be other CMS's so,something like WordPress wicks or,Squarespace you might want to use the,power of Shopify to do your fulfillment,and your order management and your,inventory control but you might want to,keep your website on another platform,that you're more used to using or maybe,you don't want to fit the expense of,moving everything over to Shopify and,you want to continue to grow on the,platform your width but you want to take,advantage of all the power of using a,system that is designed specifically for,taking orders so in this video what I'm,gonna do is I'm gonna go over how to use,the Buy button how to create it inside,Shopify and then I'm gonna show you how,to install it into the three most common,platforms that are used for websites so,I'm going to show you how to install it,into WordPress I'm going to show you how,to add it to Wix and then I'm going to,show you how to add it to Squarespace,okay before we get started you're gonna,need a few materials in order to do this,so the first thing you're gonna need is,you're obviously gonna need a Shopify,store so I've left a link down below,where you can sign up for a 14-day trial,and get going on that side of things the,other thing that you're gonna need is,you're gonna need a product installed on,that Shopify store I have a tutorial,which I'll link up above here that will,let you go and see how to add a product,properly into Shopify then the other,thing that you're going to need is,you're going to need access,whatever sales channel that you want to,add this buy button to so if you're,doing it on Wix or you do any WordPress,you're gonna need those logins okay so,we're on our dashboard here and we want,to have a look on the left hand side and,we've got this menu item this is sales,channels right next to it there's a plus,sign so if we click on the plus sign,it's going to ask us to add which sales,channels that are available now these,are the sales channels that are approved,by Shopify and they do a seamless,integration with these services what,we're gonna look for is we're gonna look,for the one that says buy button so if,we go down to buy button we're gonna hit,the big giant plus and we're gonna add,that to our store,now what Shopify is going to do is it's,going to take that button add it to the,store it's going to refresh the,dashboard and then it will come back and,allow us to start configuring a Buy,button so now that it's gone and,installed the Buy button app we can go,create a Buy button all right now we've,got to create Buy button now we need to,decide on which product we're going to,include in our store now we can have,products or we can have collections for,the sake of this demo I'm gonna go and,pick a product that has stock and that,is,set to visible okay,now we're on the configure the product,button we're going to configure the look,and the feel of our buy button so when,we start off the first thing we want to,do is we want to choose a template now a,template comes in basic a button or,enhanced you see on the right-hand side,things are going to be changing,depending on what template you choose,now each individual template is going to,be used in different situations and I'll,get more into which situations these are,going to be used on down below but for,the purpose of this demo let's start off,with the basic okay so we have a basic,and we the show and it shows our product,our project title our price and our Add,to Cart the next thing we need to do is,we need to choose an action now under,the action you have three options you,can either direct shoppers directly to a,checkout so that when they click the,checkout button it will take just that,one product image take them over to a,checkout page which will actually show,up in a modal message and let them check,out the second option is add products to,a cart and then the third option shows,the product detail now depending on what,your use case is you want to change the,action to be conducive to the,environment that you're going to be,using in it in the sake of this demo I'm,going to select add product to a cart,because I want to show you guys what it,looks like to have the cart on another,site so that you can get a full,experience of the whole checkout process,alright moving down we can then go down,to the size of the image that we want to,put on our Buy button typically I like,the small image it keeps everything come,packed and especially when you're,placing it on another site you don't,want it to be too big,alignment tells you where you want it,left center or right and then you can,hit the option which is going to show,additional product images so if someone,clicks on another product image they can,see the different images that you have,set up on the product okay now we have a,button style and,next sew on button style text this is,talking about the button that we've got,down here we can go and change the text,size because use the color we can change,the padding so how wide the the button,is we can also turn on the quantity,field and change the button text now if,we come back we're gonna get down to the,next piece which is the font styles now,I want to spend a couple seconds talking,about fonts here hunts on the internet,have been traditionally a very difficult,thing to reproduce and mostly its be,based on a little bit on technology but,also on copywriting so there are,different fonts that are available for,print advertising as well as web,advertising the fonts that are getting,pulled up in this directory are fonts,that are coming from the Google font,library they have been fonts that have,been purchased by Google and they have,been placed on the the Google font,library that are free for you to use now,if you're using systems like wicks or,Squarespace they are going to be using,the same font library so that you'll be,able to match the font with the part,that you're looking for however if you,have a custom font you are not going to,be able to use the Buy button in this,editor to use that custom font you can,only choose from the fonts that are on,this list so just a small important note,to make so now that we're on shopping,cart this is a shopping cart that slides,up from the side now if you had selected,option a back when we were choosing what,kind of button we wanted the action for,it to click on you're not going to need,to configure this because that's going,to take you directly to the checkout,page however if you selected option B or,C I in this case and select an option D,then we are going to need to configure,the look and feel of this this mobile,message so we can go in change some of,the shipping information we could change,a couple of fields and we can change the,button text okay so now that we've,finished configuring the button to look,and feel the way that we want we can go,up and generate the code so we can go up,to the right here I'm gonna hit generate,code and it's going to give us a modal,window which will have some code that,we're in a copy we are then going to,click to copy this to the clipboard and,then we're gonna head on,to the site that we're going to install,it on alright so the first place we're,gonna go and install this code is on,WordPress so I'm gonna go and pull up,our WordPress demo site that we're going,to use and I'm gonna log in okay so now,that I'm logged into WordPress I'm gonna,go and add a new page now there are a,bunch of places that you can add this by,button in WordPress you can add it to a,post you can add it to a page lots of,options there for the safest demo I'm,just gonna create a new page because I,don't actually want this button live on,this particular website but it will give,us all of the information that we need,in order to test it so we're gonna add a,new page and we're gonna come to the,page editor now WordPress has recently,updated the way that they do page,editing it used to be just a content box,that you could put in there but they've,now instituted new blocks so we want to,actually click on the add block button,and we want to go through the list of,elements that they have here the one,we're looking for is under formatting,and it's called custom HTML so the,difference between code and custom HTML,code will actually render code on the,page and put it in a box with some,borders and stuff around it so that,people can actually see the code custom,HTML will actually put custom HTML into,your page this is the option that we,want so we're in a custom HTML and then,we're going to paste in the HTML that we,got from Shopify okay once we've done,that we can hit the preview button it,will generate a preview for us and it,will pull up that product page now if we,have a look on the the products on the,page we can switch through images and we,can hit the Add to Cart the cart will,show up on the right and then we can hit,checkout and it will open up our,checkout page and allow us to process,our order now we know as we normally,would,okay so that's how we install the Buy,button inside of WordPress now let's,move on to Squarespace all right I,pulled up my Squarespace site here and,now we're gonna go and add that by,to the Squarespace site so for me to log,into the Squarespace site I hit ctrl,escape on my keyboard and it will allow,me to go into the editor and once I'm in,the editor the next thing that I want to,do is I actually want to go and add a,page to my site so I'm gonna go to pages,and I'm gonna go and add a section I'm,gonna pick a blank section for the sake,of this demo so that it's going to add a,new section to the bottom on my site and,scroll me down to it and I click on it,alright so we now have our new page we,now have to edit the the block that,we've added and we need to click on the,little raindrop here which allows us to,add a block now once we're under add a,block what we want to do is we want to,go down to more and new Squarespace this,is where it's called code so depending,on the system that you're in they're,gonna have different taxonomy x' for the,different pieces that come together so,we now have code we can now go and paste,in the code that we've gotten from,Shopify and we can hit apply now because,we're using javascript,most of these editors protect you from,running JavaScript while you're editing,your page so if you have a look at my,Squarespace screen it says that I have,that Squarespace has blocked embedded,scripts and we can't save them can't see,them but with news we can hit save okay,and then we have to exit out of the,editor in order for us to see the script,enabled so what I'm going to do is I'm,actually going to log out of Squarespace,by clicking on my name,and now I can go back to the page go,down to the bottom and we can see that,the page that I've just added now has,the card it still has the same,functionality that it did on WordPress,it just looks a little bit differently,inside our template okay I'm gonna head,over to Wix now and we're gonna go,through and we're gonna set up the same,thing from the Wix page so I've gone and,created a website inside of Wix I've,used one of their templates and now what,I'm going to do is I'm going to add that,HTML that we copied over from Shopify to,our Wix site so the first thing I'm,gonna do is I'm gonna click on add and,it's gonna come up with our menu on the,left hand side what we want to find is,we want to go down to more now once we,click on more we're gonna have a bunch,of options available to us the one that,we want to grab is HTML frame now let me,just explain that Wix has a couple of,limitations it doesn't allow you to cut,the paste embed code directly onto the,page because of the way their editor,works but they do allow you to do a HTML,iframe it does have some drawbacks,if it's too big for the frame it's gonna,get these scroll bars along the right,hand left hand side but for the sake of,this I think we're gonna be able to get,it to work so we have our little gray,box which adds in our code we want to go,to edit code and then we want to paste,in the code that we got from Shopify,once we do that,Wix is going to update and it's going to,give us our code on our page we then,need to drag the box that it sits in big,enough so that it will show the entire,HTML block that we just created,once we've done that we can hit the,preview button and we can see now the,Add to Cart is on Wix now hopefully it,ad cart here is the drawback on Wix is,that Wix,because you have to put it inside an,iframe the cart only or the cart only,shows inside that frame that could,correct it you've created so if you're,using Wix as your website for editing,your stuff you should use the first,option if we were back on Shopify,as your checkout item so your action to,be clicked this should direct shoppers,directly to check out that is the Box,you want to select if you're on the Winx,lat form so let's do that and we'll,update that so that you can see how that,works so we're gonna copy that to,clipboard we're gonna go back in to our,editor we're going to edit the code and,we're gonna paste in the new code that,we that we just updated okay great,preview the site,and when it loads and we hit the Buy Now,button it's going to take us directly to,the checkout so this is the best user,experience that you can get if you're,using Wix and you want to connect,Shopify to it so that you can sell your,products through Shopify okay guys,that's it for me today I hope this was,helpful I hope you were able to follow,along as we added Shopify to your,existing CMS don't forget to Like and,subscribe to this video I try and make,new videos every Thursday remember,always make sure that you take a backup,of your site before you start working on,it as well as you shouldn't be editing,live code because when you do that you,run the risks of having mistakes happen,that could cause your site to go down,but other than that I hope you guys are,having a great day I hope you have a lot,of fun and we'll catch you in the next,one
Congratulation! You bave finally finished reading what is the cost to add shopify to my website? and believe you bave enougb understending what is the cost to add shopify to my website?
Come on and read the rest of the article!