how to display two products in row n mobile shopify

hey everyone theme rhino from,themerhino.com,today we're going to be talking about,shopify product,grids we're going to be talking about,the benefits of them how to use them,what kind of,instances you would want to use them and,the different kinds of shopify product,grids,now what you're looking at here is,actually not a shopify product grid,but it is a shopify product carousel tab,also it has a tabbed carousel which,is a feature where people can switch,through the different,uh sections or collections in your,clothing store,but let's talk about what a product the,grid actually looks like so let's go,ahead,over here and hit add section and let's,talk about,different product grids so obviously,something to know is that every shopify,theme,is slightly different not every shopify,theme is created equal,you have some free themes you have some,paid themes you have some,paid themes that are better than free,themes and you got themes the free,themes that are,better than paid themes what i would,recommend is that everybody gets a theme,from a reputable source just to be,available because there are some,paid themes that people advertise for,free and they basically say hey get a,discount,get it for free meanwhile they have back,door access,to your business to your um livelihood,and they essentially are robbing you,from your shopify store and hacking you,so,that's just something to be aware of now,back to the the,um conversation of product grid so,whatever a product a grid is going to,look like is something like this,now in this case we have a product,tabbed grid which is one of many,different types of,variations that there are when it comes,to product grids,okay so essentially we have different,tabs here let's go ahead and just focus,on,one tab so let's remove all these,different tabs that we have,and by the way guys if you're interested,in this shopify theme that we're using,it's from wolff of shopify.com,i'll leave my affiliate link in the,description box down below along with,the discount code,it is the alpha theme this is the theme,that you're looking at,we also will show you how it looks with,the regular,woofer shopify theme which is a little,bit cheaper,but we'll just show you how it works so,essentially,you have a product grid and the purpose,of a product grid,is to show customers without customers,having to scroll,or flip through or select any kind of,collections or links,they get access to a whole load of,products and at many different times you,can,add different kinds of products to your,collection grid meaning,you can add um you know best sellers you,can add featured products,and you can segment between them you can,add a certain collection that you want,to add,and all this has to do with the the,selection through the collections page,so if you're not aware we have what's,referred to as a collections page,where if we go to here to products we,have a collections button,right and this collections button is,essentially the best way i could,help you uh think of it is the,categories button,right so i want you to think of,collections as just categories so,imagine,when you walk into for example a grocery,store like,let's say costco for example or walmart,they have different aisles,or different categories right they have,the baking section they have,clothing section they have fast food,section,in the same way collections work the,exact same so you have a home page,section,we have in this case we are selling,clothing and candy so we have,candy we have clothing we have best,sellers okay,so back to our store in our store design,let's go ahead,and hit this themes button online store,let's hit customize,so you guys can get a little bit of a,view here but,a product gallery or excuse me a product,grid,is like i said it serves only one,purpose and that's,to show consumers at large the different,types of products that exist,now what some themes will do is they'll,offer you different styles so,for example the alpha wolf they give us,different styles of how the product is,presented notice,that when i take my mouse and i hover,over each product right,we have what's referred to as the title,of the product,right and i'll just take a screenshot to,just show you here,we have the title of the product right,let me get my marker out,with the title of the product we have,the price of the product and then we,have the product,image okay now all these together,is referred to as a as a section in the,product grid,okay but once we hover over okay the,image,now what goes on the bottom is starting,to slightly change you can notice,instead of pink lemonade and the price,it says add to cart,and this little magnifying glass button,which represents quick view so if i,click on the quick view,it has a little pop-up and it shows what,the quick view is now it's not showing,up here,and the reason why is because we're in,preview mode but if we,exit to view the actual website from an,outside standpoint we could definitely,uh form a quick view right here and so,let's,let's have the page load let's hit the,quick you view button,and you can see it pops up okay so there,are different,options there but just something to be,aware of is the styles that's presented,in,so some people are not comfortable with,this style they might want to,change it up and so like i said,different themes come with different,options not every theme is going to,allow you to do this but,you have for example style one and style,one is a little bit different where,there's an,animation it comes in okay it it,changes up the style of the whole entire,configuration right we have style number,two,okay which by the way moves everything,to the left even if we were to add,title tabs here okay let's go ahead and,add a title tab,all right and we'll get to the title,tabs in a minute but then we also have,style three okay which moves a little,bit things to the,center the midpoint a little bit with a,view all products button,so you kind of get the idea we can also,make some changes to the amount of,products per row so if we want to add,five products per row we can do that,right one two three four five right so,we could do that here,we could also make it smaller and make,three products per row,right give it a little bit more focus,all these different things that we can,change within the theme,we can hit the view all products button,and it will take us,to a collections page in this case it,took us back to the home page,because i just never set up the button,link right but we can set it up to,wherever we want it to take ideally,you would want them to take them to the,collections page since the button says,view,all products right so just hit,collections all collections,right hit save or even all products,which would be,even more ideal products and selected by,all products,and then will be accompanied by a page,that represents all the products,in the store so if we go ahead and,select that bun view all products,we're accompanied by now all the,products in the store,okay which we can also make settings to,but this is a different kind of view,typically when you have a collections,page you have what's referred to as a,grid view so it's very simple,similar to the home page grid or the,homepage product grid,the only difference here in in our case,since it's a theme is that this is a,collections,uh page okay so the page is a little bit,different and speaking of different,pages and different themes we have,different features,available to us so this is a feature,where we can view everything,in a horizontal landscape almost right,where it's sideways as opposed to,a vertical landscape here now willful,shopify includes this feature,in both of their themes and you want to,check with your theme what kind of,features are available,and which one is going to be more,idealistic from a conversion standpoint,now let me just break down what i just,said in a more simple way,depending on how you present your,products you're going to profit more,there's no,uh argument about that you really can't,argue that,some products need detailed information,for,each individual product so this is the,wolf of shopify theme original theme,which is actually cheaper than the first,one,which includes also the same feature of,a product,carousel or excuse me a product tab to,grid,right let's go ahead and just zoom out,of the page a little bit so you guys can,get a better view here,notice how we have four products right,we have um,a we have it all contained within a,container okay whenever you see,something that's not full width,it's represented by a container these,are going to be different,words that you're going to want to be,aware of in the ux ui design world so,let's go ahead here and select a,collection page in this case,we're taking to the home page collection,and this is also that horizontal view,now we can make that change okay and we,have different styles that we can make,that change with a simple setting here,based on this theme this is the original,theme okay,this is the original wolf of shopify,theme that you're staring at here,the other theme that you just saw was,the alpha wolf theme and like i said,not every theme is the same you want to,be aware of that okay,so here instead of collection full width,we can select,collection uh excuse me instead of,sorry not this one but this one right,here instead of product list view,we have product grid view right and then,we can switch it back to a grid view,and we can select how many products per,grid we have the same settings here,we have a three product uh grid view we,have a five product grid view,okay and we have a four product grid,view so just be aware,there's different features there now,back to the home page when we create a,product grid there are different types,of product grids like i said depending,on every theme,in this case the original wolf of,shopify theme offers us,a tab to product grid that we can access,here we have,a title that's a shop ball we have candy,and clothing we can also,make changes to this by selecting the,different tabs and adding different tabs,notice we have a trending section,that we can now select products for so,if i want to add best seller to it then,it will select,the best seller as the trending and i,can change what it says here,instead of trending i could say anything,i could label it best,sellers and notice how it just changes,the way it does,so you just want to be aware of that,let's just go ahead and save our,progress there,and there clearly we have our best,sellers and let's let it just load for a,second,and when we select the best seller this,might might be it,like i said the the products that are,selected here you can just edit the,collections and create collections from,scratch,so now let's talk about application,purposes,the first question that i want to tackle,is can a product grid be the only thing,on a home page and the answer is,absolutely depending on the store i,remember the time when i had a clothing,store and we were testing different,optimizations this was the first,business that i ever had,and i came to the conclusion that,idealistically the only thing that,should be on the page,is a product grid and that actually,boosted our conversion rates at about,three percent,from from what we used to be at which,was about a point,six percent because this is when i was,focused on conversions then what i,noticed after that is including a split,banner,will help segment my audience because,what i did was,i actually started to join in two,different niches,we were selling fitness clothing one for,you know uh,males and then we had a female line all,on the same website,and what i realized was including a,split banner very similar to this,would be better for our audience the,only difference is the images were a,little bit smaller it was,probably it would end up at about this,area on the website and then the rest,was all,product grid okay we didn't have,galleries we didn't have contact us we,didn't have any of those,kind of information um on that website,and that's actually what we found that,boosted our conversion rates,at the highest rate mind you this was my,very first business uh,many many years ago and what i learned,was is that,depending on the different features that,you have on the website,it can optimize and it can change your,conversion rate,significantly and when i say,significantly i mean it and to give you,an example,we went from every hundred people,visiting,we would be lucky if somebody bought it,would usually be after every,thousand people two out of every hundred,people would have five people buying,all of a sudden we went from you know a,point one point four point five percent,conversion rate,to a five percent conversion rate we're,increasing the amount of sales we had,by a significant amount uh instead of,going from one sale every two to three,days,we went from three sales every day okay,so just be aware of the situation that,and,and we grew on and on past that and,that's really what started my kind,of journey in conversion optimization,now,different themes are going to give you,the presentations of these grids,differently,and i'll just kind of give you guys a,short example here is that,we have let's let's just navigate down,here to the product section,okay let's select here let's scroll down,we have different product views so we,have product version one,which is a product grid product version,two which is another product grid,product version three which is our,carousel okay product version 4,which is another view and another view,speaking of this view this is,also a a little bit more of a uh not,iconic but it's,definitely more classic and it's,definitely a little bit different so,this is a view,that we can view a product grid here,let's go ahead and select a collection,just to give you guys an idea let's,select the candy collection here,and let's select an image it's not,actually going to look like this just be,aware,let's select an image maybe this image,would work and let's hit,save here and what's going to happen is,this can be reformatted now,and this is just an example of another,form of collection,presentation or a product grid now in,this case it's not actually a grid it's,a slider,followed by an image followed by some,text and a,shop now button okay so this is just,another view that this theme offers,you want to go ahead and take a look at,what your theme offers,and something like this could be a huge,change in your business i'll give you an,example,if you're selling clothing for example,let's take yoga pants,and you come out with a new line of yoga,pants right,let's say uh like some some kind of,animal type prints and you have a zebra,print you have a cheetah print,you have a lion print you have a panther,black panther print,and you have some other print uh like,like a snake skin print okay,what you can do is you can include an,image right here and then you have the,different kinds,of prints here on the right so what this,does is it gives people a,visual a small visual of an example then,they can scroll through and see what,options they like in terms of the,products there are different settings,you can kind of set here,you can change the amount of products,that's being shown notice how this is on,auto rotate so let me just go ahead and,save my progress,if i don't click on that slider it will,rotate the products for me,automatically so watch my mouse i'm not,actually clicking on anything,notice how it's on the left here and,notice how on the right this is,scrolling through and it's moving by,itself,okay and that's just an auto rotate,feature when people are viewing the,website,and the products rotate like that just,another feature to catch people's eyes,sometimes the smallest animation could,make the world of a difference,for your shopify store so can a product,grid or some kind of product,presentation grid,work um by itself on your store and the,answer is,absolutely okay context is everything of,course,there are many chances where it's not,going to work there are many chances,where it's arg,where it is going to work you know if,you're doing a regular,facebook ad for example with an,incentivization a scarcity type ad,and you're driving traffic to a product,grid that can work alone,okay not to mention the type of,conversion rate benefits,that a theme like this offers when,people enter the website,when they see for example the stock,countdown timer the uh,social proof sales uh two-fold here,and the real-time visitor account social,proof so all of these different,cognitive biases,like i said we've we've spoken about,this before but they come together and,they create lollapalooza effect which,basically means,that when you have more and more,cognitive biases that just add up on top,of each other,the reality becomes much more real for a,customer,okay much more believable much more,understandable which then creates,sales or more sales essentially so,that's really all i got to say for this,video,if you guys have any questions on,product grids please let me know,uh and once again i'll leave all the,links to these themes that i'm using in,the description box down below,we have the alpha wolf theme which is,sitting right now at 455 dollars,on sale for 295 and we have the wolf of,shopify theme which is sitting at 159,uh on sale for uh on sale for 125,excuse me and let's see how much um,yeah so it's 125 and you get uh my,discount code i'll leave my discount,code in the link,uh my affiliate link down below if you,guys want to support the channel all,right,i'll talk to you guys later thank you,guys for watching peace out bye

Congratulation! You bave finally finished reading how to display two products in row n mobile shopify and believe you bave enougb understending how to display two products in row n mobile shopify

Come on and read the rest of the article!