Optimizing Storefront for Mobile Shopping

Shopify Staff (Retired)



Over the last two years, our shopping habits have changed dramatically. When faced with limited access to in-person shopping, we were driven to our devices to buy online. While this was a trying and transitional period for both consumers and merchants alike, it has developed into a new normal where ecommerce is the way of the future. Merchant’s are continuously altering their strategy to adapt their storefront to offer the best online shopping experience for their customers. 


Here are some important points to consider when optimizing your website to serve your clients on the most popular device: mobile!


The journey to your website


Some routes taken to reach your website are becoming more accessible than others. These routes are determining what type of screen your customer is using to view your website. For instance, two of the best ways to market your store is through advertising on social media channels and reaching out via newsletters


When a potential customer is scrolling through social media platforms on their mobile phone, they are being fed targeted ads and word of mouth business shout outs among their following. More often than not, they will be redirected to the social page of your business and land on your website through links in your bio or the products tagged in your posts.


The same journey applies when receiving newsletters. When we’re on the go, our email accounts remain at our fingertips through mobile devices. When a newsletter from your business appears, any links of interest for your potential buyer will be redirected to your website.


With both these influential experiences happening on mobile devices, importance should be applied to designing a user-friendly website for smaller screens.


Designing on large screens for small screen shopping


Typically, when we access our Shopify admin panel to work on our storefront or settings, we are likely using a desktop or laptop computer. Using a larger landscape to visualize the entirety of the storefront is usually preferred but it’s important to pay attention to how it translates on the smaller screens. 


If you head to your Theme Editor (Online Store > Themes > Customize), you will see three screen options to design from in the top right corner:





Shopify’s platform is designed to seamlessly transition your theme’s sections and content from desktop to mobile without issue but there may be some little details you wish to adjust. 


For instance, when using the Studio theme, you can have an “Image Banner” section with an “Email signup” section below it. On the desktop, the break between both sections includes an image border. However, when you look at how this translates to mobile, you can see that the image for the banner is stacked on top of the text which means the section break line is text heavy. 





Some may not prefer this kind of break in sections. By checking the mobile setting, you are able to catch these little things and rearrange sections to satisfy your preferences both on desktop and mobile.


Utilize your theme to the maximum


With Shopify’s 2.0 themes, our developers have incorporated “Mobile layout” settings for the majority of the sections you can add to your pages. Many are intended to allow you to make aesthetic and practical changes. For example, you may prefer to have 4 columns of featured products on the desktop view but just 2 columns on mobile. 


Why make such subtle changes to the layout of your sections? Try to think of it as avoiding effort for your visitors. We never want a customer to have to do the “two finger zoom” to see your products better on a smaller screen. Browsing on mobile devices is all about featuring products 1 or 2 at a time. 


Continuing with the example above, if you were to keep that row of 4 featured products on mobile view, the images that are meant to grasp the attention of the customer are going to be smaller and less predominant while scrolling. However, should you have 1 or 2 per row, it will draw their attention to the product with more ease. Ultimately, adjusting these types of settings allows you to make subtle changes between views that will improve your visitors' mobile experience in your store. 


Something to note here is that the above scenario is based on Shopify 2.0 themes. Should you be using a third party theme, then I would recommend reaching out to the theme developer directly if you have any questions on how to utilize their theme section set up to better serve your customers on mobile screens. All supported third party theme developers have a contact section through our Theme Store


In the end, mindfulness towards a visitor's experience of your store on both large and small screens will go a long way. Continuity between desktop and mobile views is important to ensure your brand appears professional and user-friendly regardless of device size. 


I suggest observing your tendencies when shopping on your own mobile device. What are the things that stop you in your tracks? Did anything catch your attention? What was missing? That kind of awareness will prompt you to consider how your own store is presented on multiple screens. Making small changes to mobile settings is sure to convert sales long term and, in time, you will notice returning clients who simply enjoy shopping on your website.

Promotion image (Anonymous)