how to add related products in shopify

what's up guys today i've got a highly,requested video ever since i actually,showed this site in a previous video,and um people noticed this other options,feature people have been asking me for a,tutorial on how to build this feature so,today we're going to do that this is,that tutorial and this feature is what i,like to call a related products block,what do i mean by a block well it goes,inside of the product information,section so that's everything to the,right of your main product image,these are your blocks we can click add,block and as you can see i have a custom,one with a lightning bolt,called related products okay we can add,that and well i've already added it to,this page,and as you can see i've changed the,heading to other colors and we showcase,the other colors of this bottle it's,really useful because we can drag it,around and of course these products are,connected using metal fields which i'll,also show you how to set up to link,products together using the product,reference meta field this time actually,so there's actually a couple uses for,this as i see it the most common one i,think will actually be these other,colors and this is a very common,situation when you've split your product,into separate colors instead of using,color variants and just one product this,is a valid strategy right so some stores,they want to have more products or for,seo reasons they want to have a separate,product page for each color and that's,fine the most high profile site that i,know of that does this is gymshark and,as you can see they've got almost the,same kind of thing this related products,block which links to the other products,on their site the other colors that is,but these are not actually color,swatches these are completely separate,products the second use that i see for,this is when products are simply related,then you would not have the heading,other colors you would have like related,products or,um you know complete the set,for example so this is matcha tea it's,made in a bowl and you have to whisk it,to make the drink,so we right complete the set and we,upsell,these products to our customer so i,think this is going to be a really,interesting video for you if you're,learning shopify development because i,think this is a common task that you'll,be asked to do if you want to start,freelancing or something,and you'll be using the product,reference meta field and also you'll be,creating a custom block but if you're,also a store owner or you have no coding,experience you just want to implement,this feature to your store don't worry,about it it's going to be really easy to,follow this video you don't need any,experience and you can copy and paste as,much as you want from my code you don't,actually have to follow the video as,usual in my videos you can grab all the,code from my website so go to ed.codes,and then click on tutorials and then,find this tutorial lastly before we get,started with the tutorial i also want to,let you know that i'm trying something a,little bit new with this video it's kind,of an experiment i've actually spent a,little bit more time and more effort,building a advanced version of this,feature and i'll be selling that as a,downloadable product so this is going to,be really easy to install you simply,copy and paste it into your store and,it's got a few extra features basically,more design settings in the sidebar we,can change the heading we can change the,column width we can change the way that,the image fits we can show a secondary,product image when you hover over the,image which you can actually see in,action on this store and my favorite,feature of this is probably the tool tip,so when you hover over you get to see,the product title and you can customize,the design of that tool tip as well,and you can also add some extra,informational text below the product,like that,and you can change the design of that,text as well so yeah this is for sale on,my gum road profile at codes.com the,link will of course be in the,description it's 20 bucks i think that's,pretty affordable like if you were to,get an app for this feature then that,app would usually be like five dollars,or ten dollars a month and you know in a,few months you would already have paid,that much whereas this is,buy it once and you have it for life you,also have unlimited downloads of this,product for life so if i update this,product which i will be doing to add,extra features to it you can re-download,that for free okay so i hope that didn't,sound too much like a sales pitch the,thing is that i'm really trying to,create a win-win for you guys and for me,because like right now the shopify,ecosystem is completely reliant on apps,right and i think that there is,definitely a space for these little code,add-ons that you would add to your store,and they're lightweight they seamlessly,integrate into your store into your,theme editor right they don't slow down,your store like apps you don't have to,pay for them monthly you know and yeah,if you're using a theme like dawn and it,just doesn't have a feature that you,need,then,i'm gonna try and build those features,you can request a feature from me i,might build that you get that feature,really affordably literally like 10 or,20 times cheaper than if you were to,hire a developer for custom development,to build that and i get to transition,from freelancing to being able to,sell my,code as a digital product and help lots,of people at the same time so that's,what i'm really hoping for so yeah with,all that said let's get started with the,tutorial for the basic version and you,will find the link to the pro version in,the description okay so i'm going to be,looking at my blog post here just to,kind of keep me on track so let's start,with creating the meta field if you,don't know what meta fields are at all,if this is your first time seeing,metafields then it's basically extra,fields that you have on the product page,for example in the admin so here we have,the title field here we have the,description field right but we can now,also add our own fields at the bottom,here for example i have this material,field and it lets me select a material,these are fields that you can set up,yourself,and so that's what we're going to be,doing,for the related products also we want a,field that says related products and,that lets us select from a list of,products so let's do that from any page,on your shopify store you're going to,click on settings and then you're going,to go to meta fields we're setting up a,product meta field so you're going to go,into products these are the various meta,fields that i've already created for,other tutorials you might have a blank,page here and that's perfectly okay or,you might have something relating to,apps,either way we're going to click add,definition to create a meta field and,we're going to call this related,products,okay,next the name space and key this is kind,of like an id this is something that you,use in the code to get the value of this,matter field so if you're going to be,copying and pasting my code then you,want to give it the same name as i've,given it so mine is product underscore,info dot related underscore products and,you can grab that from here as well so,in the description,you don't have to put anything but i,recommend just putting a link to this,youtube video for example,just so that the next time you know you,know what this is for you know what's,going on just call it related products,and then put the link to this video or,something like that so that you remember,how to use it this you can ignore this,because this is like for app development,so just leave it blank,and finally the most important part is,you're going to select a content type,and the content type is going to be,product and,even if you're going to be using just,one related product you still want to,select a list of products because we,want the ability to select a list of,products select more than one product in,this related products block and yeah,that's pretty much all we need to do so,you're going to hit save and now you,have this related products meta field,now when you go to a product page like,this water bottle page,you refresh,and you should see that a new meta field,has appeared at the bottom of the page,here's my related product meta field,when i click into it i will now see this,button saying select products and i can,select from any product okay so what are,the related products for this i'm,looking at this blue water bottle right,i also have a green and a gray water,bottle,so i want to add those,options as the related products or in my,case this is going to be the other,colors i'm going to give it the title of,other colors if you want you can also,add the product itself and that will,work like if you want to show all the,options in that related products block,but i think it makes sense to leave that,out and now i'll save and now those,products are linked together so your,next question might be do i have to do,this for every product especially if you,have a large store if you have thousands,of products you're probably thinking do,i really have to do this for every,product going into it into the product,admin page adding those meta fields one,by one well you might want to check out,another video that i did which is called,three apps to bulk edit many fields,unfortunately at this point apps is the,only solution there used to be kind of a,hacky way to do it,which i showed in this video how to bulk,edit metafields you can try watching,that video but i think this method does,not work anymore since shopify's latest,update so yeah this one will show you a,few apps that will let you bulk edit,midfields really quickly but for now,let's move on with the tutorial so okay,to summarize this part you basically,have to define your matter field you,define the meta field then you fill out,the meta fields and if you have a large,inventory then go ahead watch this video,and find the most suitable method for,you to bulk edit your metafields now we,move on to the next part which is adding,the code that will actually output these,meta fields to the page at this point,the best way of working is to open up,two tabs the first tab will be the,customize screen on the theme that,you're working on so i'm actually,working on this one dawn related product,block tutorial it's an unpublished theme,but for you it'll probably be this one,so hit customize while holding control,or command to open that up in a new tab,and i'm also going to open up,the code editor by clicking on actions,and then edit code shopify has recently,updated the interface of this code,editor i really like this it has this,button here so you can make it full,screen which is a bit easier to work,with and as you can see the file we're,going to work with i already have it,open it's main product dot liquid,but it won't be open for you just search,for it main dash product,dot liquid this will be the same file in,all the free shopify 2.0 themes and once,you have this file open you're going to,search for the schema okay the schema,will be at the end of the file it won't,be,this one we're actually looking for this,schema in curly braces and percentage,signs this is usually at the end of a,section liquid file,and this defines what settings are going,to be,in the sidebar here inside the theme,customizer so,inside the theme customizer what you,want to do is navigate to a product page,because if you're not familiar with,shopify this sidebar changes depending,on which page you're on right so we're,going to navigate to a product and here,we can see the product information,section and this section has blocks,inside of it and what we're going to be,doing is adding blocks to it so where,was i now the settings schema right the,settings schema defines what shows up,here so when we click add block,everything that's available here,is listed inside of the schema so these,are our blocks and we have type app type,text,type title price quantity selector and,these are also all the blocks that we,have available here price,text title,um quantity selector right and you can't,see all of them under the add block,button here because some of them have,already been added once and you can't,add them multiple times like this,quantity selector and the buy buttons,anyway we're going to be adding our own,and you can do this by going directly,under this blocks list we're going to,add it as the first one in the list,because there's no difference uh what,order they're added in so we're going to,be adding our own block and i've already,written the code for it you can copy and,paste,but,basically the type is going to be,related products to new type the name is,going to be related products i've added,this lightning bolt emoji it's just a,basic emoji you can copy paste and,add emojis into shopify here which is,pretty cool and then it's got a few,settings like the actual heading text,the heading font size color and then the,border that's going to be around the,related product image,just copy all of that,including the little comma at the end,copy it's going to be like this you're,going to make a space here,and paste in now if it pastes in a,little bit wrong we're just going to fix,that up it's not going to cause an error,or anything if you save it this way but,it's going to be,harder to read a little bit more,confusing than if it was nice and clean,so we're going to,put your cursor here hold shift,and then click on the line that's like,not indented properly,and we're just going to hit tab a couple,of times so that this bottom curly brace,is in line with like all of the other,blocks curly braces and yeah that looks,right to me that's more readable hit,save that's all we needed to do for the,settings schema so now when we refresh,you should see that we have,a new block available we have the,related products block available when we,click add block,so now you can add this to the page and,you can drag it where you want but,you'll notice that nothing shows up,that's because we've only added it to,the sidebar to the schema right but we,haven't added the code the actual html,that will be output when we add this to,the schema right so just save for now,save with this block added,and we're going to do the next part the,main code the code that is output,so let's go back into our main,product.liquid file,and you're going to look for the word,case you're going to search for the word,case because,there is this case statement or this is,kind of like an if you're familiar with,an if statement but case is like when,you have lots of ifs,and so the way it's written is case,block.type so,in the case of the block type being you,know app text title in,each case,what do we want to output right,so we have this when and then we have,under it what we want to output,so we're going to do the same thing so,we have when related products,copy all of this i'm going to go through,it with you once we paste that in,put your cursor approximately where you,want it to be,paste again if it pastes in a little bit,weird,we're going to highlight all of that,that we just pasted in and then we're,going to tab in until it's like when and,then one level,lower so like it's inside of this when,and you're gonna hit save,okay and now you're actually done i'm,gonna explain the code right after this,but if you go back to your theme,customizer and you refresh if you have,added this the block to your page then,you will now see your products appearing,here if you don't see anything appearing,at all then check that your products are,actually in stock and available not a,draft or anything like that and that,you've set up the meta field and you've,added those products to your main,product but now that's really all you,need to do the last thing i want to,explain before i get to explaining the,code,is that,you might want to add this only to some,products not across the entire store but,only specific products that have this,related product thing or only specific,products that have multiple colors for,example and to do that you're going to,want to use,templates,so you can,create a template right,and we're going to call this a like,product,with,colors for example and then you can,apply that template to,um,each of your products that you want to,use that template right here right so as,you can see i have a template called,backpacks and a template for the matcha,tea product as well if you don't really,know how to use templates if you don't,really get what i'm talking about right,now i've already made a very in-depth,video about templates and i've showed,you lots of examples so i definitely,recommend watching this video if you,want to know,how you can add this across,different types of products and yeah,that's that's all if you just want to,get this to work now next i am just,going to explain what is going on in the,actual code here okay so i'm not sure,how many people are actually interested,in the code here please let me know in,the comments if you want me to go like,more in depth in code in future videos,but i'm just going to run through kind,of what i think is the interesting parts,of this code,starting from the top,uh we have when related products right,so when this block is selected here's,what we're going to output,and before we output anything we have,one check and we're checking if the,product actually has the meta fields,filled out because for products that,don't have any related products added to,the meta fields we don't want to output,anything at all right so just,if and and if at the very end so we're,not going to output anything from this,block if the meta fields aren't filled,out next we just um assign a variable to,the related products array so the,related products that we add here it's a,list right so like it's an array the,array is accessed like this through the,product. meta fields namespace key and,then dot value that's how we get the,array and we can assign that to the,variable related products just so that,we don't have to write that out each,time,and next we just have another check,we're gonna,loop through all of these related,products and we're gonna check that at,least one of those products is available,because like if both of these products,were out of stock then we wouldn't,actually have anything to show here,right and so there would be no point in,outputting like just the heading and not,anything not any product at all so we're,just doing a check,where we loop through them and if at,least one of them is available we'll,assign this has one product variable to,be true,and then we can use that variable to,wrap the rest of our code so it's,basically like if it has at least one,product available then we're going to,output something,right so that's all this top section is,doing really,we check that the meta fields are filled,and we check that those products are,available and then we go ahead and we,output the html that we want so,starting from the top again,this is the heading we can output the,heading text by doing,block.settings.heading,and if you're new to the schema this is,using the id that we set inside of this,schema so this is the id field and this,is says heading,so you're in blocks so you go block dot,settings,and then dot,any of these,ids,so heading font size heading color we're,using those as well here and here for,our inline styles for the heading next,we just have a div to wrap all of the,products,we just give a block id so that it's,unique and then we have the actual loop,um so for product in related products if,it's available,we output a link,and inside of that link is the product,image and there's nothing really that,interesting going on here for each,product we can of course grab the url we,can grab the title or whatever we want,uh for that product we can grab the,images,just doing this to grab the first image,you can also do,you can also write featured image like,this this you might find this a little,bit interesting but this is the title,attribute that we can use in any link,and what it actually does is,sets up a really easy,tool tip so when you hover here this,gray tool tip that shows up is thanks to,that title attribute so,in that title attribute we would output,the product title but,if you wanted if you had say another,meta field for that product's color,then,you could,do something like that,right you could output just the color,instead of the entire title you know,name space would be whatever whatever,you named your meta field so yeah that's,that's something else you could do,an output in that tool tip of course if,you watched the first part of this video,i demonstrated a more advanced tooltip,one that i actually styled with css,looks a lot nicer,that's in the pro version which is,available on gumroad and then down here,we have the styles the css and there's,nothing special going on here either,usually you would put styles in a,separate file,but for the ease of use of people copy,and pasting this i just put it all,together and since it's not that long,right here just some basic styles but,the main thing that you might want to,change is the width of each column,so each column is just one quarter width,right now uh one quarter one quarter so,four of these would fit in here but you,can make it,so that three of these fit in here so,each one becomes larger or that two of,these fit so you would do that by,changing to like 33 percent for one,third column uh 50 for just two columns,but in that case these both would be,quite large and i think that'd be a bit,too big so i prefer,you know keeping them,at like a one-quarter column and yeah,that's it here we're also outputting the,border color,inside of the css,so that's it for this tutorial guys i,hope it was helpful if you like more,coding tutorials like this then check,out the shopify liquid coding playlist,also the next tutorial will be on a very,similar feature something that people,have asked for a lot which is the,complete the look right so we have these,like this color of shorts and then we,have the matching products for that so,it's almost the same thing except,instead of this being a block,it's a section and each of these is,actually a block so yeah if you don't,want to miss this tutorial then make,sure that you subscribe and hit the,notification bell as well so that you're,notified,okay,now the pro version of the code for this,tutorial is on my gum road,edcodes.gomrow.com,i'm going to be doing this a lot more so,feel free to request,these shopify add-ons,if there's something you want me to,build just a reminder the pro version,has like an advanced tooltip um it has,the secondary image on hover,it's got a slider for column widths it's,got a few more design settings for the,text and lastly guys if you're still,watching this then you might be,interested in a free community that i've,set up on discord this is just to chat,about code customizations for shopify,about themes anything this is for,developers for store owners it's for,everyone and you can also get in touch,with me here if you want to and you'll,find the invite link in my about page on,my youtube channel so yeah guys that's,all for today as usual let me know if,you have any questions in the comments,and i'll see you next time

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

Come on and read the rest of the article!