Does My Shopify Store Render Well on All Device Screen Sizes?

Does My Shopify Store Render Well on All Device Screen Sizes?

Google Analytics is a great tool to get vast amounts of information about your Shopify store website visitors, impressions, conversions, demographics and other data. UA (Universal Analytics) has been around for years, but it will be deprecated on July 1, 2023.

Google will happily convert your old UA account to GA4 for you, but in doing so, the automated process may not be the best way to move to GA4, especially if you have important properties to convert - so we recommend upgrading to GA4 yourself manually or hire a professional to do it for you. 

Now on to the cool stuff!

If you have used GA4 to review data about your Shopify store, you may have seen a chart like the one below one. It includes some very important data, such as "Users by Screen Resolution Over Time". To access this information in GA4, simply login to your GA4 Account and, on the bottom left, you will see an option that says "Tech" with a drill-down arrow. Under the drill-down, click on Tech Details and the information about Engagement by Screen Resolution will be displayed as follows in this example.

My Web Concepts Shopify Partner GA4 Screen Size Blog

 

So what exactly does this screen tell us?

The screen has interesting information about Visitors (New and Returning), Engagement Time and most importantly for our example, Average Engagement Time by Screen Resolution. Why is this important? Simply put, you can see if there is a problem with your Shopify store rendering on various devices and screen sizes. 

For example, In the Tech Details Screen Resolution GA4 chart above on Line 6, you can see that the Avg Engagement Time for the device with a screen size of 414 x 896 was only 4 seconds. The question is why was the engagement time so short? We would  expect that a well designed Shopify store, with an engaging home page that has a lot of useful information on it, would have a longer engagement time and 4 seconds is no where near enough time to read what's on the home page.

Perhaps, your Shopify website is not rendering correctly on a particular size screen and as a result,  the visitor is leaving right away without even reading the information on the home page, causing you lost sales! How would you know if that is the case or not? Better yet, how on earth do you test all those device screen sizes without having to purchase several mobile devices which would be extremely cost prohibitive? 

The solution is easy actually, and there is a feature in the Chrome Browser that lets you do the testing of various screen sizes free of charge! It's called Developer Tools. To use Developer Tools on your website, simply visit website on the internet, then go into Chrome Settings, More Tools and choose Developer Tools from the menu. After doing so you will see a screen like this:

My Web Concepts Developer Tools Screenshot

 

Don't be intimidated by all the code on the right side of the screen, instead look on the left side of the screen, where the picture of your store is. Just above the picture is something called: "Dimensions Responsive". Simply change those two values for Width and Height to the sizes you want to test. In our example we want to see if our store renders properly when the screen size is set to 414 x 896. Change the Width and Height to each screen size shown in the GA4 screen and check that your website looks ok when set to that particular screen size. If it doesn't render properly on any particular screen size, you will need a Shopify Developer to fix it for you since it may involve coding.

In our case, the website looks just fine at the 414 x 896 screen size, so we are sure that the visitor didn't leave in 4 seconds because of a screen size issue. Perhaps he/she left because the website was not relevant to the search that the person conducted on Google or maybe, in our case as Shopify Website Designers, they were looking for a service that we do not offer, such as an Etsy website design. But at least we know the website looks fine when viewed at 414 x 896 screen size. 

For more information about the services we provide to our clients, visit MyWebConcepts.com for more information.

 

Back to blog