how to edit shopify mobile site

I'm going to show you how to edit the,mobile version of your Shopify store and,really customize your store differently,on a mobile and on desktop so first let,me go into admin okay on my store,customized so let's add a gallery go to,the bottom pad section gallery so there,it is here's the new gallery and now,what I want to do I don't want to show,this on a phone,how am I gonna do that open up the,website I'm gonna inspect that element,not there yet I have to save here it is,so if I make this screen small you're,gonna see that it's also here so on a,mobile phone it would be visible on a,computer would be visible now what I'm,gonna do right now is make it invisible,on a mobile phone so that's right click,and inspect this element this is Google,Chrome so I want to go through these,until I find the one that is the whole,row so it's right here they should have,the ID of Shopify section so I'm gonna,copy this section number then I'm gonna,go back here and I'm gonna go to the,custom HTML if you don't have that you,can just click Add section and add,custom HTML so in this HTML I'm gonna,add style tags so for example let me,just get rid of this or I'll just put it,right here,style that's the opening one style,that's the closing one and then I'm,gonna write at media max width 450,pixels and opening brackets closing,brackets so what this line means is it's,saying that anything that's in here is,gonna happen when the phone is small,when it's 450 pixels and less which,means you're probably on a mobile device,so what we want to do when our mobile,device is not show the gallery so I'm,gonna paste what I have this section ID,I'm gonna put a hash in front of it and,then again Open bracket close bracket so,now what's in here is what's gonna,happen to this section at this time so,all I'm gonna do is display:none which,means it's not going to display and if I,click Save let me go back here and,refresh,so it's here as you see but then if I,make the screen small it's not there,anymore,it should be under this video it's not,there so that's how you do it it's very,simple and I'll show you a reason why,you would want that so you can see that,I did it for this image right here,because this image is just one picture,so if this is on a phone it would be too,small you can't read anything and I,could show you that let me go here and,remove that refresh this and now let me,make it small and you'll see that it's,way too small and you can't even see,anything so that's just one time that,you would probably want to do this and,then if you wanted to do the other way,around you would just write min-width,450 and then that would make something,only visible on the phone instead of,only visible on a computer so you could,really have two different pages on,different devices and yeah that's how,you do it,thanks for watching

Congratulation! You bave finally finished reading how to edit shopify mobile site and believe you bave enougb understending how to edit shopify mobile site

Come on and read the rest of the article!