how to align the shopify buy button in wordpress

what's up guys i'm paul and welcome to,the channel so back in 2020 i did a,tutorial on how to use shopify with,wordpress and even though that video has,gone on to become one of the most,popular ones on this channel it is also,the most disliked video on the channel,as well and i think the reason for that,is there's a few things i missed out of,that video that not only you guys have,pointed out to me but i've also realized,myself the more i've played around using,shopify with wordpress over the past 18,months or so since i made that video so,i thought it was about time i sat down,and did an updated tutorial and cover,off some of the things i missed in that,original video so with the instruction,out of the way let's get this tutorial,started,so the first thing i need to talk about,is what you can use this with because,this is a tutorial for using shopify,with a self-hosted wordpress site for,some reason this method doesn't work,with hostedwordpress.com sites i don't,know why that is now some people have,told me that it does work with the,business and e-commerce packages but i'm,not paying 33 just to figure out whether,or not this method works or not i've got,better things to spend my money on so,this tutorial is just using shopify with,a self-hosted wordpress site so now that,we know we're going to need a,self-hosted wordpress site you're also,gonna need an account with shopify as,well and if you haven't already got on,these i will leave my affiliate link in,the description below and what this,means is if you go through that link i,earn a small commission at no additional,cost to you but it is massively,beneficial to me so thank you to anybody,who goes through that link it is very,very much appreciated now one of the,things people asked a lot in the,question section on my other video was,how do you actually sign up to shopify,like because that's the package you're,going to need to use this you don't want,any of the other shopify packages and,shopify doesn't make this abundantly,clear as how to do this so i'm going to,show you how to do it so what you want,to do is you want to go into your,shopify dashboard go into settings then,click on plan,and when it loads,click on change plan and it'll bring up,all the options that shopify has for,plans but you don't want any of these,options at the top as you can see i'm on,a development account but you'll have,this when you're on your trial as well,but what you want to do is you want to,actually scroll down to the bottom and,see where it says remove your online,store now this wording can be quite,scary to some people but what this,basically means is they just remove the,website builder from your package and,then you're able to sign up to the,shopify lite package for nine dollars a,month and all you want to do is click on,that button and follow the instructions,on the following pages and you'll be,able to sign up to the shopify lite,package so now that we know how to sign,up to shopify how to sign up to the,package that you want it's time to get,through and actually see how this,actually works so the first thing you,want to do is you want to actually add,the buy button sales channel to your,shopify dashboard and you can do this,when you're on your free trial in fact,it's worth going through the free trial,and just making sure this is going to,work for you and your business before,you actually go through and sign up to a,paid package but what you want to do is,you want to click on this plus icon here,next to sales channels and it'll bring,up a list of all the sales channels that,are available now not all of these are,going to be available if you've signed,up to shopify lite some of these will be,removed but what we want is this option,here buy button so if we just click the,plus icon there what it will do is it,will add that to our shopify dashboard,and it will go through all this redirect,thing while it's installing it coming,with this page and then it will go back,to your original dashboard and as you,can see we've had buy button added under,sales channel here,now we're nearly good to go now before,we can actually go through and start,setting a buy button up you need to,first go through and create your,inventory because if you've got no,products or collections on your site,you're not going to be able to create a,buy button now i'm not going to show you,how to do this in this video i've done,another video which i'll link up here,showing you exactly how to set up a new,product but there are a couple of things,you want to make sure are set up in your,product listings before you set up a buy,button so if we just go into our,products we'll click on any product here,what you want to make sure is turned on,is you want to make sure the product,status is set to active you also want to,make sure the buy button is selected,under the sales channels as well if,neither of these are selected you're not,going to be able to create a buy button,around that product so whenever you,create a product when you save it make,sure it's set to active and also it's,available on the buy button sales,channel as well because then you'll be,able to create your buy button,so with that bit of the way let's go,through and actually create a buy button,so what we're going to do is go into buy,button,and click on create a buy button now you,have two options available you can,create one for a single product or you,can create one for collections now for,this video i'm mainly going to focus on,the product one because there's more,things to discuss in that one but i will,quickly show you how to set up the,collections later on in the video so,what i'm going to do is click on product,buy button and then you select the,product that you want to create the buy,button for that you previously created,now for this tutorial i'm going to use,the signet ring so click on that so it's,selected then click select and it'll,bring up the customization options for,the buy button now when it comes to,layout style there's three options that,you can choose from there's the basic,one which is just the basic button,you've got the classic one which is kind,of like a product card type thing and,then you've got a full view which is,like a full product listing then you've,got the action that happens when people,click on the button and you can have it,so it adds the product to cart or it,adds the product directly to the,checkout but there is another option,available if you go with the basic or,the classic option and that is you can,have an open product details option and,what this does is it opens basically a,full view listing of your product so you,can add the description to this i think,this is a pretty neat touch actually,because you can have kind of the best of,both worlds depending on how you're,going to have it displayed on your site,now one thing i will say is if you've,formatted your product description when,you've created the product so maybe,you've had bolding or bullet points,italics things like that they won't show,up in this description here when you're,looking at the preview but when you,actually copy this code over into your,wordpress site it will actually show all,these formatting options it just doesn't,show them in this preview for some,reason i don't know why,so those are the different options that,are available and those are the,different actions that people take when,they click the button so if this one,will just do it so it adds the product,to cart,then you've got your button style,options and what you can do with this is,you can choose to round off the corners,at the bottom more if you want to with,the button corners option you can also,make the button wider if you want to as,well or narrower depends on what you,want when it comes to the colors of the,button you can change the background,color and you can also change the color,of the text on the button as well and,you can also change the typography so,you can change the font and you can also,change the size of the font as well so,there are a few customization options,when it comes to the look of your button,as well,so next we're going to look at the,layout options,and as you can see there's a few,different options but it depends on the,actual layout option you choose whether,it's the basic the classic or the full,view as to what actual options here,because it does vary between the,different layouts because there's,different options that are available,same options a lot here,but what you can do is you can change,the image size so you can change it from,small to medium you can also show,pictures of additional product images,that you may have on that product,listing you can change the alignment so,you can change it so it's aligned to the,left or the information under the,product picture or you can have it go to,the right depending on how you want it,styled on your website with this i'm,going to keep the image small you can,also change the text on the button as,well now one thing that really does get,me is they don't capitalize the cart i,don't know why shopify does that but i,like to have a capital letter at the,start of ad and cart just something i,like to do you can also add a quantity,field if you want next to the button and,what this allows is people to buy,multiple quantities of that product,should they want to so this is going to,depend on the product you're selling as,to whether you want this or you don't,want this it's up to you then you've got,color options for the product title and,also the price then you've got your,typography option so you can change the,font style and the font size for your,title and also your price as well i'm,going to take the quantity field off,because i don't want to,so what you do is come out of that one,and then you've got your shopping cart,options so as you can see the shopping,cart appears as a pop-up on the right,hand side and this is exactly what it's,going to do when it's in your wordpress,site as well you're just going to have,this cart appear so it looks like it's,basically part of your wordpress site,it's going to be quite a seamless,transition,and what you can do is you can change,different headings and different texts,within the cart page you can also choose,to show an order note field so if,there's any special instructions you,want the buyer to leave you can get them,to do this in that box here and then you,can change the colors as well that,appear in the cart so a few options,there,now you might see that the detailed,pop-up option is grayed out and this is,because if you want access to these,options what you're going to have to do,is go,and change the action button to open,product details and then you can go in,and you can edit the pop-up,so let's say there's certain things that,are only available when you select,certain options when you're customizing,the button but once again you've got,similar type of options you can change,the text you can also show the quantity,field as well if you want to change the,colors and then change the typography,very similar settings are available in,the last one,now the final one is one of the things i,did fail to mention in the last tutorial,i did and that's talking about the,checkout so if you can actually go into,advanced settings you'll see the,different options for the checkout so,you can have it appear as a pop-up or,you can have it as a redirect within the,same tab,now i'm not going to show you what this,looks like just now but i will show you,what this looks like when i actually,copy and paste this code into my demo,wordpress site you can actually see what,these two different options are like,because say i missed it from the first,video so then once you're happy with all,the settings you've got it looking,exactly how you want it to look what you,want to do is click on next in the top,right hand corner and it will give you,the code that you need to copy and paste,into your wordpress site,easiest way to do this is just click on,copy code and it copies it to your,computer's clipboard and then you want,to go into your wordpress site and you,want to create a new page now you can,create a post or a page it's completely,up to you whichever one you want to do,for this video i'm just going to add it,to a new post so we'll click on add new,post add a title,call it test ring,super original i know and then what we,want to do is we want to find the custom,html block in the gutenberg editor,that's what we're using in this one is,the gutenberg editor not the classic,editor that some people are still using,so this click on the plus icon and you,can either choose to search for in here,so you can search for html as you can,see i've already been using it or you,can click on the browse all option and,it will bring up this sidebar so you can,find it from that one,so click on html,add that one to your page and then all,you want to do is paste all of that code,into the box it's as simple as that then,you can preview that,and it'll show you exactly what it's,going to look like on your site,and then we'll click on publish,so it can show you exactly what that,looks like in the front end of your,store so right click,open in a new window and there we go,and if you click on view product,brings up the pop-up recall click on add,to cart it adds it to the cart on the,right-hand side it all works really,really well it's a really seamless,transition considering you're just,copying and pasting code,but let's talk about the checkout,options because say i missed it from the,last video,so what i'm going to do is show you both,of the ways that the checkouts can,actually work so for this one we'll,click on pop-up this was a product i,created earlier,we'll clear the cart on this one,so we'll add that one to the cart,and then we'll click on checkout and as,you can see it appears in a new window,this pop-up if you're doing this on,mobile it'll open up in a new tab i've,already tested that one out so that's,what it does on mobile devices and then,the customer will just go through and,fill out all the information etc etc on,the shopify cart and as you can see this,is actually hosted on shopify servers,because it's going to be your shopify,address not your wordpress address,so let's come out of that one,remove it from the shopping cart and,let's go to the redirect,so if we click on this one add this to,cart and then click on the checkout for,that one as you'll see just redirects,your website to the shopify checkout now,to me this is a really seamless,transition and unless people are paying,attention to the url at the top they're,not going to know that they've gone from,your wordpress site over to the shopify,checkout so this one is really good but,i have found a small snag with the,redirect option for the checkout and,that is that as standard when the,customer goes through and completes the,checkout and goes through the order,confirmation thank you page there's no,option that shopify includes to redirect,them back to your wordpress site so,they're just kind of stuck on the order,confirmation page but luckily for you,guys i've spent the morning actually,figuring out how to do this and there's,a slight workaround that i've actually,figured out that i'll show you exactly,how to do and this includes adding a,content box to your checkout page now,what you want to do is you actually want,to go into your settings so we're going,to come out of the buy button option go,into settings,go into checkout and if we scroll all,the way down to the bottom there's an,additional script option for your order,status page and what you want to do is,you want to add a little bit of code now,this is available on ecommerce gold and,i'll leave a link to this tutorial the,written tutorial in the description,below so you can go and get this code,for yourself and you just want to copy,this bit of code here so we'll copy that,and then we'll paste that onto the order,status page and all you want to do with,this is you want to insert the url that,you want to use here so for this i'm,going to use,https,slash,e-commerce,gold,dot co,and we're going to have that so it's,click here,to go back and continue shopping or,change that too,once you're happy with what you've put,in and the url that you've changed,simply click save and it'll save that,and if we go back into this checkout as,you can see there's no way for me to get,back to my wordpress site i just can't,do it so if i refresh this,you'll see that there's a new box added,and what i can do with this and what,your customers can do is they can,actually go back to your wordpress site,so if i click there,it takes me back to my home page now,it's up to you which page you want to,use you can use your homepage your shop,page whatever it is you can use it but,that is a way you can actually add a,redirect option to your checkout so your,customers aren't stuck on the order,confirmation page hopefully it'll just,make the process a bit better for your,customers now as i mentioned earlier you,can also create a buy button for your,collections as well and i'll quickly,show you how to do that so we go back,into our shopify dashboard,close the settings option down go into,buy button click on create a buy button,this time we're going to choose the,collection option not the product option,click on that choose the collection we,want i'll go for all rings,and it'll bring up all the products that,are included in that collection now one,thing i didn't mention in the products,was if you've got variable products so,you've got product variations you can,also have that so it appears as well you,see on this product here i've got,different ring sizes available and,people can select that from the drop,down menu there,and basically a lot of the options are,very very similar because you've got the,action that people can take when they,click on the button so you can have it,so they either add the product to the,cart go directly to the checkout or open,the product details option which brings,up the full product listing,i think that would probably be the,better option but it's up to you,whichever one you want to use then,you've got things like your button style,these are exactly the same as what we,covered in the product one basically all,these options are the same as what's in,the product one because it's basically,doing the same thing and then it's this,exact same process to copy this code,over now you don't have any control in,terms of layout options as to how many,products are actually shown which is a,bit annoying because it does depend on,the amount of products in the collection,as to how many products it shows per row,you have no control over that,unfortunately but what we're going to do,is we're still going to copy this over,so we're going to click on copy code,there,go back into our product listing or our,page on wordpress we're going to add,another block we're going to add another,html block,paste the code in there,click on preview and as you can see it,all appears there so if you click on,view products it'll bring up all the,different sizes that are available the,variations if you've got variations or,if you've just got a normal product,listing it'll just,enable it so the customer can buy from,it very simple works in a very similar,way to what the normal product listing,does,so that's basically how it works it,works really well i'll just show you,what i mean by all the formatting comes,over i think it's on this one that's the,better one as you can see i've got,different formatting options here so,i've got bullet points i've got folding,that appears on the front end of your,wordpress site even though it doesn't,appear in the preview when you're,actually creating the buy button on,shopify but it does appear on the front,end of your wordpress site i thought i'd,just clear that out before i actually,wrap this video up so that's how you use,the shopify buy button with wordpress,it's really quite simple but it may take,a bit of time to actually copy all the,code over from shopify to your wordpress,site but before you click on this video,i do just want to mention a couple of,drawbacks that come with using the,shopify light option with wordpress that,you may not be aware of,the first one is you can't save your buy,buttons in shopify it just doesn't allow,you to do it for some reason i don't,know why it's a really frustrating thing,because it'd be awesome if you could,actually save your buy buttons and then,go back in and edit them later so if for,some reason you decided you wanted to,change the color of your buttons what,you'd have to do is you'd have to go,through and create a whole new buy,button again you'd have to go through,the whole process and copy the new code,over and then paste it into your,wordpress site you can't go in and edit,the existing buttons it's just a really,frustrating feature but on the flip side,of that any changes you make to your,product listing in shopify so if you go,in and you change the description it,will automatically update that on your,wordpress site you don't have to worry,about that,the second drawback with shopify lite is,you can't create customer accounts or,your customers can't create accounts so,they can go in and see their order,history and things like that it's just,not a feature that's available with,shopify lite that's only available if,you actually have a fully fledged,shopify store which you pay 29,a month or whatever package you decide,to go on but with shopify lite you can't,have customer accounts it's just one of,those things that they don't include so,if you trying to get repeat customers,things like that you want people to be,able to access their order history then,maybe shopify light isn't going to be,the best option for you maybe something,like ecwid or something like that may,work better,and the third thing isn't a drawback but,something you need to be aware of,because of the way shopify works with,wordpress with you just copying and,pasting the code over all of your orders,etc are managed through your shopify,dashboard they're not going to be,managed on wordpress because no,information is actually stored on,wordpress so from a security perspective,it actually does work out better so if,your wordpress site gets hacked they're,not going to get any of your customers,information because none of it is,actually stored on your wordpress sites,all stored on shopify so that's where,you go through and manage everything,like refunds printing orders,changing fulfillment statuses things,like that you do all of that on your,shopify dashboard you don't do any of it,on wordpress so i hope this video is,more helpful than the first one and i've,covered more points in this video to,hopefully give a better overview of how,you actually use shopify the shopify buy,button with wordpress if you found this,helpful please drop a like on the video,because it does help the channel out a,lot also if you haven't already signed,up to shopify you can use so using my,link in the description and that is very,much appreciated so thank you so much,for watching guys i really hope you,found it helpful stay awesome and i'll,see you in the next one

Congratulation! You bave finally finished reading how to align the shopify buy button in wordpress and believe you bave enougb understending how to align the shopify buy button in wordpress

Come on and read the rest of the article!