How To Edit the Mobile View on Your Shopify Store

For growing brands on Shopify, creating an optimized experience for mobile site visitors is becoming increasingly important. The best place to start with mobile optimization is straightforward: ensure that the mobile site design is unique from the desktop view and tailored to a smaller screen size.

In this guide, we’ll cover various ways to edit the mobile version of your Shopify storefront to help you ensure that your brand is well represented on mobile devices.

The Importance of Having a Great Mobile Experience on Your Shopify Store

It didn’t take long for mobile devices to become the preferred way for people to use the internet. 

Back in 2011, only 6.09% of internet traffic came from smartphones. By May 2024, that figure had jumped to 60.08% (plus, an additional 2.07% of traffic now comes from tablets). 

So, whenever someone visits your Shopify store, odds are that they’re doing so from a mobile device. If you don’t provide a great mobile experience, a lot of people who otherwise may have placed an order will just back out of your site instead.

When designing the mobile version of your store, keep these best practices in mind:

• Menu navigation: The smaller screens of mobile devices can make it more difficult to navigate a site — you should take care to ensure visitors can find their way around. For example, when mobile users open your navigation menu, the page they’re currently on should be highlighted so that they know where they’re starting from. This is especially helpful when the initial page the visitor lands on isn’t your homepage.
• Visibility: A common problem with mobile sites is that important information, such as an error message indicating that a form field has been filled out incorrectly, is often hidden from the visitor’s view. For a less frustrating user experience, use features such as autoscrolling and popups to show visitors alerts when necessary.
• Tappable elements: Navigating a site with thumbs is much different than navigating with a mouse. Tappable elements such as menu options and CTA buttons need to be relatively large and spaced apart — otherwise, the user will have a hard time clicking on what they want to click.
• Text size: Small text may not be much of an issue on desktops and laptops, but it can be nearly impossible to read on mobile devices (especially smartphones). 
• Clutter: Often, an amount of content that would be appropriate on the desktop version of a site is just too much for the mobile version — in such cases, you’ll need to either streamline or entirely remove some elements for the sake of usability. 

The World Wide Web Consortium’s guidelines on mobile accessibility can also help you ensure the mobile version of your site works for visitors with visual impairments and other disabilities that can affect internet use.

Customizing Your Mobile Layout With the Shopify Theme Editor

It’s easy to view the mobile version of your site while you’re using the Shopify Theme Editor:

Step 1. Log in to your Shopify account and select the sales channel that you would like to customize. 

Step 2. Click on the “Customize” button next to your theme. 

Step 3. Near the top-right corner of your screen, you’ll see buttons for toggling between the different editing views — your options are “Desktop”, “Mobile”, and “Fullscreen”. 

Step 4. Selecting the “Mobile” view will show you what the mobile version of your site will look like as you make edits. 

Depending on which theme you’re using, you may also be able to make mobile-specific edits, such as adjusting the sizing, styling, or positioning of certain elements when the visitor is using a mobile device.

It’s certainly convenient that there’s a mobile view editor built directly into Shopify’s backend user interface, but the customization options available here are often fairly limited. Also, there are some themes that don’t support mobile editing in the Shopify Theme Editor at all. 

Editing Your Mobile Site Design Using Custom Code

For a higher degree of customization, you can manually edit your site code rather than rely on the Shopify Theme Editor. 

The trick is to set conditions based on the size of the visitor’s screen. 

For example, let’s say your homepage has a featured products section that you think looks good on desktops but adds too much clutter to the mobile version of your site. 

To make this section disappear from the mobile version while remaining on the desktop version, you would follow these steps:

Step 1. Log in to Shopify and select the sales channel that you would like to customize.

Step 2. Open the “…” dropdown menu next to your theme and select “Edit code”. 

Step 3. Open the “Assets” file and select “base.css”.

Step 4. By inspecting the page, you can find the ID of the element you want to hide on the mobile version of your site. In this case, that ID is “shopify-section-template–16282159284373__featured_collection”.

Then, add the following code to your “base.css” file or the theme’s primary CSS file. 

@media (max-width: 767px){
  #shopify-section-template--16282159284373__featured_collection{
    display: none;
  }
}

And save your changes. 

Now, the section will still be shown on the desktop version of your page. 

But it will be hidden on the mobile version. 

Again, this is just one example of the mobile-only edits you could make when writing your own code — the possibilities are endless. 

Editing Mobile Experiences on Shopify With Shogun

Shogun offers the advantages of both methods described above — it’s as easy to use as the Shopify Theme Editor, yet it provides you with just about as many customization possibilities as writing your code from scratch. 

Indeed, there are only a couple steps involved with editing the mobile version of your Shopify store in Shogun:

Step 1. After downloading Shogun, open the app and select the page that you would like to customize. 

Step 2. This will open the page in Shogun’s visual editor. Here, you can use the screen setting buttons located near the top of the page to toggle between four different views: desktop, laptop, tablet, and smartphone (notably, this gives you more viewing options than the Shopify Theme Editor). 

For example, selecting the smartphone view will show you what your site looks like on smartphones as you make edits.

You’ll be able to design a different version of the page for each of these four types of devices. Whenever you select an element, you can use the “Edit on:” options to apply styling choices for certain devices but not others. 

You can also determine whether elements are displayed at all on certain types of devices with just the touch of a button (after you’ve selected an element in the visual editor, this option can be found in the “Visibility” settings). 

Another useful feature for editing the mobile version of your store is Shogun Insights. To access this feature, click on the “Shogun Insights” icon in the left sidebar of the visual editor. 

Shogun Insights evaluates your page based on accessibility, best practices, performance, and SEO, grading each of these factors on a scale of 0 to 100. A score of 100 means no changes are needed. If the score is less than 100, Shogun will tell you exactly what you need to do to get your score up and improve the page.

Here are a few examples of potential issues that may be identified by Shogun Insights:

• Use images with the correct image resolution: This message indicates there are images on the page that don’t have the “Responsive” option switched on — once this option has been enabled, the size of the image will automatically adjust to the size of the visitor’s device.
• Adjust the size of buttons and links: As mentioned above, the size and space between your tappable elements will need to be relatively large in order for them to be usable on mobile devices. Try expanding your buttons to at least 48×48 pixels and adding some more space to clear this alert. 
• Use readable font sizes: The font size of 60% or more of the text on your page should be at least 12px — otherwise, mobile users are going to have a hard time reading your content.

Overall, Shogun provides you with all the necessary tools to build a great mobile experience as well as the insight you need to confidently confirm that you’ve done so.