how to add products to a page in shopify

hello everyone i'm going to show you,today,how do you add a collection of,products to a single page,you can see right here i have my pages,hello world,that's just the title of my page and i,have some,generated content right here this is,just a,lorem ipsum generated content,it's just a regular page and if we go,look at this from,our admin panel online store,pages,this is what it is all right and this is,just using the,page template what i'm going to show you,to do is how do you add,a collection of products right here,now if we take a look at the,page in our admin panel right here,you'll notice that we don't have,any sort of tags that we can tag our,page there's not a whole lot of metadata,that we have,access to we really just have the title,and the page contents and that's about,it,so what we have to do here is we need to,at the very bottom this is just the the,strategy or the method that i'm going to,show you how to do,is i'm going to put in here all caps,collection and then i'm going to put in,the handle of my collection so i'm going,to put in here men's let me show you,what i mean by handle,let me save this it's going to be men's,if i go over to my products here,and go to collections,what is a handle so this is men's if i,look at this men's collection,if we scroll all the way down to the,bottom edit website seo,you'll see that this is the handle i'll,show you where that gets used,in the code and just for,comparison's sake let's go look at,women's stress,what's the handle for women's stress we,see it's women's,dash dress,all right what we just did is we added,that handle to,our collection or excuse me not our,collection but,the handle of our collection to our page,we had an uppercase collection and then,men's now it's important that this right,here is,the exact handle of the collection that,you want to see,on that particular page,all right now let's go into our themes,here i'm going to edit,debut because that's what we're looking,at right here this is the debut theme,pages hello and,edit code now where is the,the code for this,and let me just close out all of out of,all of this,if we go to our left hand side,under our templates section right here,this templates folder,go to page.liquid and this is what it is,it's not a whole lot how can we tell let,me just delete this real quick,make sure a lot of times what i like to,do is i like to just remove something to,see if this is the actual,piece of code that we should be looking,at if i refresh,oh it went back to my different preview,so give me a quick second here let me,go to themes,and let's just pre-build from here one,more time,the url,pages,hello world there you go we don't have,any content it's gone,because i deleted it from here now if i,undo that and save,refresh here it is and now we see we,have our collection,down below here which isn't something,that we necessarily want,right but we need that there because let,me show you what we're going to do here,we're going to write in our code i am,going to,write some liquid code here that what it,does,and let me just show you real quick here,first and then i'll explain it,i'm going to create a variable so assign,and i'm going to say page content,array equals page content so this,page.content right here,this will give you the contents of the,page so that's just something that,you have access to based on shopify's,objects that we have access to the,liquid objects and,we're going to have this thing that's,called a filter add this thing that's,called a filter,split on the word collection,now you can probably guess where this is,coming from right this is if we go to,our page,that's what we're grabbing and what this,does here,is this piece of code it,splits the page content based on where,it,finds this collection so what it,essentially does is it creates something,like this,we have our content that's pretty big,let me just,see if i can make that smaller,here we go,that's okay we'll do do it that large,where it creates this array,and the first thing in the array,is the lorem ipsum right and so it's the,lorem,ipsum just like that,that's the first thing and maybe it's,actually better if i don't use,my annotations here give me a second,i'll just write it out code right here,it creates this array,let me just copy this and this first,thing is the lorem ipsum part,right it basically says okay anytime you,get to the,collection word or if you find that,collection word,go ahead and separate it out meaning,that,this top part right here is going to be,separated from,what comes right after that collection,word,so we see we have our loan ipsum right,here what it does is it says okay we,have lorem ipsum,all the rest of that content and then we,have men's,that's what it essentially does this,page content array by doing this split,now because we know that,to get something out of what's called,an array what we can do is i'm going to,assign,page content equals,this array and then,we want to get what's called the index,of that array how do you,access,again how you access i'm just going to,write some,gibberish right here,how do you access the very first element,what's called an element of this ray,you do an array 0 you get the name of,that that array,and you put zero in there because in,programming you start counting at zero,not at one that means that if we do page,content array,one that should get us mens,so that's what we're going to do,all right so i can literally just copy,this,paste it let's just give this page,collection and these variables you can,name these variables,however you want that's just what i'm,naming them,but page one so this right here should,return mints however,you have to be careful be careful about,this because if we go look at our page,i'm just going to open this up in a,different,tab here if we open up the hello world,it looks like great that you can just,grab men's,but truly behind the scenes if we click,on the show,html there's actually html tags,and notice how we have these p tags,right here,men's has a paragraph tag right here as,well so when you do your split you're,actually splitting up,the html and if we do,split up on collection what comes right,after collection,it's this p men's and p,tag so what we have to do,is we actually have to let's go back,into our code here,is we can't just leave it like this,because we're still we're going to get,those p,tags so we need to strip html,and this is just a a method that is,available to us,and then strip new lines these are just,two methods that are available to us,that shopify allows us to to write when,we,are bringing in a string,all right now this should really return,only just the,men's word the handle,now what we can do in here is this page,content,let's just set it to page content page,underscore content and save it and if we,refresh our page,we close out of that other tab,now we don't see that collection men's,anymore,what's neat is what we can do now now,that we have the,the men's out of here that's what the,page collection does,we can start writing our code and i'm,just going to start writing,uh i'm just going to add my own html,code here,you can figure out the styling i'm not,it's not going to look pretty,but let me show you you can say div,class equals page width,this is where you'll have to figure out,how you want to style how you want your,collections to look class equals grid,and then let's just do a quick h1 tag,page collection so we can see what is,the value of our page collection,oh it can't just be that it has to be,surrounded and,curly brackets there you go,this should return men's let's find out,to find out if that's true,refresh there we have it we have men's,and again it's not,centered it doesn't look the prettiest,but i'm just wanting to show you how do,you add products in here you can figure,out the styling,on your own so we have men's right here,that's great,now this is where we write some some,code in here what are we going to say,with our curly brackets and our percent,symbols for,product in now,just about everywhere throughout your,code you have access to this,collections what's called a collections,object,and what you can do is say something,like let me show you,you would put something like men's in,here do dot products,do your you want to end your four and i,let's just do a quick,paragraph tag here,and say product dot title,just like that i just want to show you,what that looks like,if i refresh,oh we're not seeing it in here,collections oh because i have,a typo there you go it's product,not product there we have all of the,products of meds,basketball and if i do women's or we saw,earlier women's dress,i think it's a woman's dress or maybe,might be women's dresses,yeah here goes women's dress we see,sundress cocktail green,we now have access to this this product,right here,so we're just naming this whatever we,want we're saying for each one of,that collection's products do something,so we could say,and let's just make this look a little,bit prettier div class,equals grid item,let's say this is medium up one third,that's the product title if i save that,and refresh,sundress cocktail green and then,we can add an image here as well right,so image,source equals product let's grab the,featured image and i'm grabbing this i'm,not writing this,i'm not just making this this up right,here let me just show you here real,quick,let's make this a large for the image,filter,and save let me refresh,there you go we now see the images and,where am i getting all of this from this,is really being,this is really coming from our,documentation if you go to the shopify,documentation look at the liquid,reference,you look at the objects right here and,we go down to products,or product everything on the right hand,side these,are the different attributes or the,methods that you can call on the product,object to return a number of things,like we have featured image right there,so it becomes very useful if you are,familiar,with the documentation and it's not,terribly hard it's actually really,simple one of the,the better documentations that i've seen,for an application like shopify,all right so we have our sundress we,have our cocktail we have green right,here and if we really wanted to,if we look at our product right here we,should see that there is a,url product url,if we really wanted to we could,let's just surround our product title,right here and maybe i'll just put that,on a separate line so,it it looks a little bit neater say,href ahref equals,i'm going to end it first,and then here within those double quotes,you can say product,dot url,save it refresh,okay it's now links and if we click on,it let's just click on cocktail,or let's just click on sundress and i'll,just show you either way,this is our sundress and then we'll,click on cocktail,perfect click on green it brings us to,that product page,all right and this should work for any,page,now let's just go into our pages now,that we have our code right here,feel free to pause it and copy it but if,we go into our page right here,and we add another page let's just call,it foobar,you i should try,give universa theme a try,please subscribe to my channel,and then again remember you have to add,collection,be very specific about that and,women's address save it,if we go look at this page now view on,your online store,i hope we get this we do perfect it,didn't,it didn't uh preview my my other theme,so this is still the debut theme,you should give universal theme a try,please subscribe women's dress and if we,just change that,because i know we have it right here as,well so if we just change this to,men's shirts for example oh,save this,now in our foo bar page,this is men's shirts why is it still,showing me sun dresses,oh oh that's because ah something i,forgot to do,let's go take a look at our code,i did not do this i think i,i should have it be calling something,else because right now it's only calling,women's address,what it should do is it should grab the,page collection,so let me grab that page collection,save it's a good thing we tested this,refresh oh,see now this is now previewing,a different theme that i have let me,just,preview one more time go grab,our page right here,pages hello world this is men's right,here,and then if we go into fubar,these are men's shirts,and if we let's just go back to our,pages here,hello world let's have this be,um women's,i think that's one i think that's a,collection,so oops sorry hello world,perfect if i refresh,there you go so on the hello world page,we're looking at women's shirts and then,in our foo bar page,let's just go back here click on foobar,we're doing men's shirts and just to,show you that it works let's just say,shoes,because those are the handles of my,collections,if i refresh this one there we have it,we have men's shoes right here and then,in our hello,hello world page we have women's shirts,so it's dynamic it's based on how you,want to,or whichever collection handle you have,right here,meaning that your pages you can have,many pages,and each one of those shows a different,collection of products,and it wasn't that much code all we have,to do is make sure that we come up with,some sort of convention,right here so we have a convention in,our contents,and then in our piece of code,or in our code edit code,go to page.liquid template and,we had to add these up top that's how i,did it,where you split that page content by,collection,you grab the first part and then you,grab the second part,make sure you strip html strip new lines,and then this is all we added,so we're now referencing this which is,coming from,up top here and then in our collections,page collection,that right there is pointing to whatever,that handle is,it's now dynamic and if we go to our,collection page,you can create a link you can view the,the image right here and really you have,access to,all of the right now that you have,access to the product,object you can have do any of these,things you can put the price on here,if you'd like you can make the entire,image,a link if you'd like completely up to,you,so now that you know how to show the,collections products,on a page it's really what you whatever,you want to do with it,you want to make you want to make it,look nicer style it completely up to you,but now you know how to add a,collections products to,any one of your pages

Congratulation! You bave finally finished reading how to add products to a page in shopify and believe you bave enougb understending how to add products to a page in shopify

Come on and read the rest of the article!