BACK

how to edit mobile view on shopify

Shopify Code Editing: How to Make Changes for Mobile Only hello everyone,welcome back to the channel

Shopify Deep Dive

Updated on Feb 08,2023

Shopify Code Editing: How to Make Changes for Mobile Only

The above is a brief introduction to how to edit mobile view on shopify

Let's move on to the first section of how to edit mobile view on shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to edit mobile view on shopify catalogs

Shopify Code Editing: How to Make Changes for Mobile Only

hello everyone,welcome back to the channel today we are,going to show how to make changes on,your shopify store but for mobile only,for example this is my shopify store,homepage,i have a big hero image,i have four products in my featured,collection,right after the featured products i have,an image with text section,however this image in the section looks,like a product to me on the mobile view,i don't want to confuse my customers so,i decide to hide the section but in,mobile only,i still want to keep the section for,desktop,let me show you how to do that first,let's use the arrow button on the html,inspector to find the html element for,the image with text section,then copy the id of the element we will,need to use it later,then let's click the theme.scss link on,right side of the css rules in the html,inspector,it will bring us to the source code of,all the css used for our shopify store,let's start a new line and enter at,media brackets inside the brackets,let's put max width colon 767 pixels,which means the following css rule only,applied to devices with screen width,smaller or equals to 767 pixels,now paste the id we copied from the html,element after a hash,it is a commonly used css selector to,find element by the id,then we put display equals none in the,css rule,we can see the image with text section,is gone on the home page,let's copy what we wrote here we are,going to paste it into the code editor,in shopify,search css in the search box and click,the theme.min.css,remember that different themes may have,different css file names,we may need to click a different file if,you are using a different theme,scroll down to the end of the file and,paste in our code,save it and go to refresh the home page,we can see the image with text section,indeed got removed in the mobile view,let's check the desktop view to make,sure the image with text section is,still there,as expected we still have the image with,text section on the desktop view,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 edit mobile view on shopify and believe you bave enougb understending how to edit mobile view on shopify

Come on and read the rest of the article!

Browse More Content