Why you should focus on how to make the Shopify website mobile friendly.
Not laptop, not PC, people are using mobile as the main device for shopping online. And this trend continues to rise. Check out some stats below:
- According to Statista, in 2021, 70% of the retails website traffic in 2021 comes from mobile
- In some particular areas like South Korea, 65% of the total online transactions were made through mobile
- The share of mobile usage also reaches 67.2%
- With this trend, it is forecasted that mobile usage will increase to 72.9% in 2021
Mobile is being used as the main device to do online shopping especially in the regions that lack other digital gadgets (PC, Laptop,…).
If you’re running an eCommerce business in 2021, it’s essential to make sure that you have a mobile-friendly store to not miss out on these potential customers.
This article will cover some of the basic tips on how to make the Shopify website mobile-friendly.
Table of Contents
Why mobile-friendly design is important?
Improved SEO rankings
One of the reasons that may convince you to focus on how to make the Shopify website mobile friendly.
Understanding the shift of people towards using mobile, Google’s already favoured site that’s configured for mobile users. You can find the statement of Google here.
If your page is mobile-friendly then it would significantly increase the rank on google search. This is easy to understand as more than half of Google’s organic searches are from Mobile devices. According to Merklein, 63% of Google’s organic searches in the US are from mobile.
This means that if a customer somehow reaches your site via Google search but your site’s mobile design is bad then they would just hit return. Consequently, your site’s bounce rate increases and the ranking score decrease.
You can use this tool provided by Google to see if your site is mobile friendly.
Better conversion rate
Another reason that may convince you to focus on how to make the Shopify website mobile friendly.
Although mobile has a lower conversion rate compared to desktop, you must still have a mobile-friendly store in order to capture all potential customers. Allowing the customers to shop with any devices they like means that you’ll get a higher conversion rate. According to Monetate, the percentage of mobile users that convert is 2.03%.
In a multi-device shopping journey, mobile is also the main device that customers use as an “intermediary touch”. This means that if you have a great mobile page, it would significantly increase the chance of customers buying the products.
A multi-device shopping journey is when you use different devices in order to complete a purchase. For example, Jason uses a laptop to add a list of shirts to a cart on an online store. On his way to work, the store sends a push notification to his mobile phone to let him know that the shirt is available at a retail store nearby. Jason stops by the retail store to try out the shirt and complete the purchase.
Better customer satisfaction
Focusing on how to make the Shopify website mobile friendly also makes customers satisfied with the experience on your store.
The research of Sterling Research and SmithGeige for Google pointed out that consumers care a lot about a mobile site of a store:
- 75% of respondents said they prefer a mobile-friendly site
- 67% of respondents said they only buy from a mobile-friendly site
- 61% of respondents would change to another site if they couldn’t find what they were looking for in a store’s mobile site
- 52% of respondents would less likely to be engaged with a store if they offered a bad mobile experience. Even if the respondents liked that store a lot, only 50% would choose to stick to the site.
- 48% of respondents thought that if the store didn’t have a mobile-friendly page, they didn’t care about the customer enough
If a customer had a good experience with the store via mobile phone then they would come back or rate the store highly. Rating or reviewing as it directly contributed to the success of the store.
Now you already know that you have to focus on how to make the Shopify website mobile friendly. Let’s start with some basic tips you can apply to your mobile store.
Tips to create a great mobile design for Shopify users
Don’t use the navigation bar
Space is really precious, especially on mobile devices when the screen is only 1/10 compared to that of the desktop. The navigation bar is one of the useful features on desktop/laptop as it helps customers to find what they are looking for when they’re browsing your site. But this takes too much space on the mobile website.
You can use that space to add text, images or content, it’s a matter of optimizing your space on the mobile website.
Then what’s the replacement for the navigation bar? I would suggest using a hamburger menu. This can help visitors open it whenever they want to. It also avoids blocking half of the visitor’s screen all the time when they’re browsing your page on mobile.
Just as a cart drawer, the hamburger menu can be pulled from the left side of your screen to show various menu items.
You can also use a single-page layout if your content is thin and you can include it all on a single page (not recommended).
Optimize and minimize file size
Google takes a lot of factors into consideration when it comes to ranking pages on mobile. One of the most important factors in a website is website speed.
And you might already notice that an image’s size directly affects the loading time of a site. If you have too many high-quality images on your page then it takes a considerable amount of time to load your site. This can have a negative impact on both user experience and also your ranking score.
“Goldfish are said to have an attention span of five seconds, which is approximately two seconds longer than a visitor to your website”
The sentence totally sums up the nature of visitors nowadays. If it takes longer than 3 seconds to load your site, then they would probably skip.
How to?
You should pay attention to the 2 most important attributes when resizing an image
- Quality: don’t have to talk much about this attribute anymore, it directly impacts the file size of an image (I would recommend keeping your file size around ~100kB).
- Resolution: resolution also has an impact on the file size. You should try to optimise the resolution of an image. Don’t make it too small to reduce the file size, customers can’t see it. But for example, if your page only shows up to 1200 px wide, then it’s no use to have an image of 3600 px wide. Resize it to 1200 px to get the best value.
Try to find the right balance without sacrificing too much the quality of the image.
You should also try to use the right image format. Currently, there are 3 basic formats:
- PNG: use lossless compression, meaning that the quality of the image in this format will not change. And the file size is larger compared to JPEG.
- JPEG: use lossy compression, meaning that the image’s file size can be reduced by discarding some information
- GIF: best format for the animated image. Use lossless compression.
I would suggest using JPEG for images that have lots of colours and PNG for simpler images that have fewer colours.
If you’re a Shopify’s store owner you can use apps for better SEO image optimizer. Image Optimizer + Compression is one of the best apps in this field out there
Link phone number and Addresses
One of the basic things you can do on your Shopify mobile store but most people do not recognize the importance of it.
Have you ever browsed a store on a phone and wanted to call the shop owner. You found their contact number on the contact page but the phone number is not linked. You then had to switch back and forth between the browser and the phone to type in the phone number. This is really annoying!
This is really important especially for sales-reliant sites such as a Shopify store. You should try to make visitors contact you in the easiest way possible.
Make your phone number clickable. Follow the steps below to do it:
Step 1: This is the basic link tag
<a href=””></a>
Step 2: Add your phone number between the quotes
<a href=”0123456789”></a>
Step 3: Add tel: to the beginning of the number
<a href=”tel:0123456789”></a>
Step 4: You can add some text if you want to (Optional)
<a href=”tel:0123456789”>Add your text here</a>
You should also try to link your address to google map
Step 1: Always start with a basic link tag
<a href=””></a>
Step 2: Go to google map, type in your address and get the share link
Step 3: Add the link between the quotes
<a href=”https://goo.gl/maps/xqcVSvJW69Ks9DwZ9″></a>
Step 4: Add the text you want to
<a href=”https://goo.gl/maps/xqcVSvJW69Ks9DwZ9″>Address: U.S. 67, St. Louis, MO, United States</a>
Linking your address to Google Maps can make customers find your store easier.
Make popups more friendly
Popup has been listed as one of the “intrusive interstitials” by Google in 2017. It prevents the customers from accessing the content they want to see and sometimes can be “annoying”. Consequently, Google punishes sites with many popups by reducing their ranking score.
However, as a marketer, popups still have many benefits and we can sacrifice some of the SEO aspects for it.
Some tips to make popups on mobile more friendly
- Make it small enough to read
- Don’t spam your customer’s browser with multiple popups
- Make your popups closable
- Make popups specifically targeted to the right customers. You don’t want to ask the same customer for the email address TWICE. It’s annoying.
- If the content of the popups is really important then you can consider adding it as a section on your page. Google won’t penalize you for this.
Optimize Forms for Mobile
To make it simple, forms require typing. If you make a long-form your visitors have to type a lot. And mobile typing in general suck.
For a small phone, this matter is even worse, the keyboard takes up half the screen whenever you type something. Sometimes, the customers can’t even see the type of information they need to fill in.
Form is essential for marketers and store owners. This is where you collect precious data from customers. What we need to do is to make forms on mobile less intimidating. There are 2 practices you can apply:
- Reduce the number of form field
What you need to do is throw out the unnecessary field to make your form looks neater. Or you can even combine related fields altogether into 1 field. For example, instead of having 2 separate fields: First name, Last name you can combine them to Full name.
- Break your form into multiple steps
If you can’t manage to make your form short then you should break it into multiple fields. This should help to make the form looks less intimidating. Besides you still can collect some of the customer’s information in case they bounce from your form.
Utilize Collapsible Sections/Accordions
If your site offers lots of content then you can try to use accordions to save some space.
Accordions work as a container that holds content. In the normal form, they’re just header, but when the customer clicks it the content appears right below it.
This is a useful feature as it allows your visitors to browse through your page and look for the content they need without having to skim through a bunch of copies and images.
Customize the size of the banner
A large number of customers undoubtedly visit websites through different types of mobile devices. That’s why displaying banner images for different screen sizes has become vital.
The banner size can have a major effect on how a page perform – and the right choice can in fact boost your ad effectiveness
What should you optimize first?
Banner size and mobile menu are 2 things that you should focus on optimizing first. These 2 features are quite important, takes lots of space and can easily be recognized. You can easily apply other tips later. Banner size and mobile menu can be added by using Apps or Outsourcing.
Apps
To customize the size of the banner you can use
Professional Banner Slider by Extendons
You can customize banner dimensions, apply it on full width, change slider animation, manage slider interval and add unlimited images for display. You can select from 8 exciting slider effects to make your store more eye-catching.
To customize Shopify mobile menu you can use
Outsourcing
Most of the apps required you to pay on a monthly basis and this can be quite expensive in the long run. Besides, features on the apps might be limited and can’t fulfil your needs.
Using outsource to do the work for you can help ensure a high-quality result because they’re professional. Not only that, you only need to pay once and you can use their services forever. Hiring outsource also spares you time to focus on managing your store rather than spending 24/7 fixing your site.
Conclusion
Having a mobile-friendly store is very important nowadays as most of your visitors use mobile devices to browse your store. It helps to improve the user experience on your mobile site and increase SEO ranking. Consequently, you’ll get more customers and see an increase in your conversion rate as well as revenues.
It’s time to implement the above techniques in reality. As a certified Shopify partner, HappyPoints are happy to assist you with:
Customize size of banner images for multiple devices
Don’t hesitate to contact us if you have any further concerns.
This article is a part of an ebook that provides a step-to-step guide to customize your Shopify theme, feel free to grab the full free eBook: Top 12 DIY Shopify customizations to drive sales
Writing Reference
<1>https://www.ecwid.com/blog/care-about-mobile-friendly-store.html
<2>https://futureholidays.co/the-importance-of-mobile-ecommerce
