how to change layout code on shopify

hello everyone welcome back to the,channel,today i am going to talk about another,common issue people had in customizing,their shopify store,let's take my shopify store as an,example i have a featured collection on,the home page and there are four,products in the collection,however i don't think the fact that,three products are in the first row but,only one product in the second row,when it is on the desktop i would like,to put the four products in the same row,so it looks nicer and more organized,let's go to the mobile view to see what,does it look like,it shows two products on mobile so it,seems to me to that each product image,is too small,so for mobile device i would like to,change it to have only one product per,row,how would i do that,first let's find those elements for the,products inside the featured collections,in the html inspector,we can see the four elements here are,for the four products if you take a look,at their css,class names you will find there are two,special ones,small one half and medium up one third,which means when users are browsing with,a small screen like a mobile device,each element takes half of the total,width and when users are browsing with a,medium or large screen like a tablet or,desktop,each element takes one third of the,total width,let's go back to our code editor and,update the code from there,search collection in the search box and,click the collection.liquid file under,sections,scroll down a bit you will find exactly,the same text string we talked about,small one half and medium up one-third,this is actually passed into a variable,called grid item width,if you search this variable you will,find that it is being written into the,class name of a html element which,represents one of the featured products,now we know where in the code we should,update,in order to show one product per row,instead of two in a small screen,we can simply remove small one half from,the class name,since by default it is one element per,row,and to show four products per row on a,medium or large screen,we can change medium up one third to,medium up one quarter,which means each element takes one,quarter of the total width,let's save the changes to the code and,go back our shopify store home page,now we have all the four products are,rendered in the same row in the medium,screen,let's see what shows on the mobile,device as expected,each row has only one product that is,all for today's video if you enjoy the,video,please give us a like or subscribe to,the channel see you next time

Congratulation! You bave finally finished reading how to change layout code on shopify and believe you bave enougb understending how to change layout code on shopify

Come on and read the rest of the article!