how to add a shop now button on shopify

what's up guys welcome back to a new,video in today's video we are going to,learn how to add,a button to your shopify website or to,any page of your shopify website,this is very useful for people who are,trying to link their shop now button to,any page on a shopify website just to,give you an idea,we are right now on a collections page,of my shopify dev website,and if we scroll down right now let's,say i want to add a button here,so that it looks something similar to,this latest,rivals this is the page with the button,and this is another page where we would,be adding the button,so in order to do that the very first,thing you need to do is go on,the button factory.com slash button,generator,you can find this link from the,description also,on this link you will find a button,generator for your website,if you scroll down you will see a test,button which is called your cta copy,and if you want to change this to,anything let's say,we would just write for example latest,arrivals so the text would be changed,now let's change the font of this,and let's change the size of this also,just gonna make this 15 so it's a bit,smaller and look better,and let's change padding 20,and 15 actually let's make this,10 perfect so it looks a bit small,yet better now and if you want to change,the style of the button,to me rounded rectangle looks better but,if you want to change it to fully curved,sides,it can do that also i'm gonna keep it as,it is,if you want to change the background,color of the button let's change this to,black okay,and that's it if you want to add shadow,or any other effects you can add it here,once you finalize the look of the button,from this website click on,embed and from here you will find a css,code,now there are two ways to add button one,is you can directly link the button,through this link,but this way is not really preferable,since it will look something like this,and sometimes if the image doesn't load,on the browser,you might not see the button so it's,always preferable to add a button with,html and css,and as we are following these many steps,why not just add html and css,instead of just adding a link so once we,have got the css code,now what we need to do is go on your,shopify backend account,you can see right now i am logged in to,my dev store now from here you need to,go to online store,then go to themes of course from themes,go to actions and edit code,you will see all the theme files from,this menu now let's say you need to add,button on the collections page,so you will need to edit the template of,the collections page,if you'd like to add the button,somewhere else then you would need to,edit the template of that page for now,since it is a collection page,we'll edit the template of the,collections page here you will see list,of all the templates,if you scroll down under sections you,will find collections template dot,liquid,you need to open this first and once,this is done the next step is to open,theme.liquid which you can find under,layout,let's open this so once you have opened,theme dot liquid,the next thing you need to do is add,your style sheet here,for that first we'll go to assets,you can find this out from the list on,the left assets,then add a new asset,create a blank file and give it a name,let's say,custom one dot css now add asset,now again go back to theme.liquid files,put your cursor in the file and press,ctrl,f so that you'll search for a file name,search for css and you will see,it will pop up a column for css right,now there are four,style sheet one is timber one is theme,here,we'll just copy this or you can copy the,upper one whichever one you want,and paste it just below it now we'll,rename this to,custom one dot css because that's what,we give the name of custom css file,so you can see here we just created an,asset called custom1.css,and then under theme.liquid we copied,one of the last css style sheet,pasted it here and then we changed its,name to custom1.css,i hope this is not too fast and if you,are still confused about anything,you can just go back to the video and,watch it again so once the stylesheet,has been pasted,click on save now again go to,collectiontemplate.liquid file,this is the code of this whole,collection section,excluding header and footer so anything,we add here,will be added between this divider and,the top divider that is header,everything between the header and the,footer on this page is the collection,section template,which is this one now what we are going,to do is,scroll all the way down and you will see,here the pagination is ended and just,above it one of the division also ended,so here we'll create a new division,division class let's just,give it a name a for now,and that's it and we'll,close the division so we have added one,more division,to the collections page now what we'll,do is add the code for the button,once we click save now next thing is,go back to the button factory page copy,this css code,and again go to custom1.css which we,just created,and here create a name of the button dot,cta latest,arrivals one open a bracket,go down paste whatever we copied from,here,so we'll just paste this here,once this is pasted press enter and,close the bracket,make sure to add the dot before the name,of the button so this will be the name,of our button,once this is done click save again,and go back to collection template dot,liquid where we just created a division,called class,a here instead of a replace it with the,name of the button without the dot,so our button name is cta latest,arrivals one,copy it and paste it in place of a,now here just add the text of the button,so what we'll add is latest,arrivals so once this is done click save,again,now let's go back to our collections,page and create a duplicate of this page,in order to see the difference,that's it you can see a button is now,showing on collections page,and it looks exactly the way we created,on the button generator,if you had linked the image of the,button then it would show something like,this,which looks a bit blurry so it is always,better to add a button as an,html and css i hope guys you have found,this video helpful,if yes do give thumbs up and subscribe,for more shopify tutorials and,if you are still facing an issue or if,you still have any specific requests,feel free to add in the comment section,or you can also email me at ravi,at twinklepc.co you can find my contact,link from the description,bye bye take care and see you in the,next video,you

Congratulation! You bave finally finished reading how to add a shop now button on shopify and believe you bave enougb understending how to add a shop now button on shopify

Come on and read the rest of the article!