Posts

Setting up an Accessible Shopify Store

Ecommerce has come a long way in accommodating consumers with disabilities. I’ve addressed over the years many accessibility aspects of online shopping, from screen readers to lawsuits.

Shopify, the focus of this post, is a rare ecommerce platform that supplies Voluntary Product Accessibility Templates, documents explaining how accessible its product is for users with disabilities — impaired vision, quadriplegia, Parkinson’s, multiple sclerosis, and more. Shopify provides several VPATs for different aspects of the platform, such as the checkout process and the default “Debut” theme.

The voluntary character of a VPAT can sometimes mean it lacks details and accuracy. Still, Shopify’s VPATs give a lot of useful information.

Screenshot of a VPAT page on ShopifyScreenshot of a VPAT page on Shopify

Shopify provides VPATs for different aspects of the platform, such as the checkout process and the default “Debut” theme.

Any VPAT has to be interpreted carefully. For example, the Shopify Checkout VPAT applies only to the checkout process — adding items to the cart is not covered. Theme VPATs have an enormous number of “partially supports” flags because those fields are supported only if the store owner (content creator) provides the required info. VPATs address the accessibility of a product, not the content. So while VPATs help assess some aspects of Shopify, they don’t answer the entire accessibility question.

Shopify has published an accessibility policy and an accessibility plan. Both are promising signs for the future of accessibility at Shopify.

Nonetheless, relying solely on info from a vendor is generally not the best way to gauge its accessibility.

How Accessible?

How accessible is a Shopify store? To answer, I used a dual approach: (i) creating a new site to learn the native accessibility features and (ii) exploring an established store with products, integrations, add-ons, and more.

Creating a new site shows me what you’re likely to get with a fresh template. Exploring an established site — in this case, a prominent U.S.-based direct-to-consumer company — shows me the impact of a professional theme and real-world challenges.

My overall impression is both scenarios can result in a reasonably accessible site. However, there are definitely gaps.

Templates

Shopify merchants can choose to create custom templates, use stock templates, or purchase commercial templates. Shopify itself controls much of the checkout process and design. But the theme controls significant aspects of the site, and that can result in inaccessible features in your store.

I found many helpful accessibility features in my testing. Still, major accessibility flaws were present in the commercial theme but not in Shopify’s default “Debut” theme, exposing the variability.

One feature that isn’t on Shopify’s broader architecture is inheriting characteristics from a “parent” theme. Some systems allow modifying parts of a theme while still utilizing updates for the unmodified portions. Shopify doesn’t do this. So modifying a commercial or Shopify-provided theme creates headaches when implementing future theme upgrades.

The accessibility problems I found covered the entire gamut — from “confusing but functional” to “completely unusable.”

An example of “confusing but functional” appeared in the header of both themes I tested. Both include a collection of controls that toggle a menu, link to the user’s account, control a search function, and send the user to the shopping cart.

In both sites, all of these controls worked, had accessible names, and were usable by people on assistive technology such as screen readers. But the controls were confusing. They functioned in two ways: open a modal, or provide a normal link that sends somebody to a new page. However, they’re marked up in four ways.

  • “Menu” is a button marked up as a drop-down disclosure widget but opening a modal.
  • “Search” toggle is a link that opens a modal.
  • “Account” is a normal link.
  • “Cart” is a link marked up as a disclosure widget but opens a modal.

All are functional, but they’re extremely inconsistent and can create much confusion for a blind or vision-impaired shopper.

For the sighted user, none of this likely matters. A sighted user with a mouse generally doesn’t know whether a control is a button or a link, and it doesn’t matter whether it’s marked up as a disclosure widget or a modal. But the differences do matter to users of screen readers who form expectations about how the interface functions based on how it’s described.

A more intermediate flaw is the missing labels in the commercial theme. The “Quantity” input was only marginally functional by keyboard and was unlabeled. A user on a screen reader would have a difficult time discovering the purpose of the field.

A more severe element, again in the commercial theme, is the product-variation selection system. It was entirely non-functional from the keyboard and screen reader. A user of assisted technology would be unable to choose a size, color, or other product variation. Since these are critically important for many products, it’s a severe issue.

However, neither of the two material issues were present in the default theme. That’s clear evidence that Shopify values accessibility and has done the work to ensure accessible options are available. However, like all content management platforms that allow theming, it’s the storeowner’s responsibility to ensure that the chosen theme supports accessibility needs.

The Shopify theme store, unfortunately, does not identify themes that are accessible.

Content

Shopify’s duty is to ensure merchants have the means to create accessible content. Shopify provides a small editable area for product descriptions and another area to upload product media. The content editor offers basic formatting of text, inserting of tables, and adding images and video.

Product descriptions. The text formatting tools emphasize structure over appearance and don’t have features for modifying the color or size of body text. This likely leads to creators using structural headings for larger body text, which may create an improper document structure. However, the lack of font size and color tools also lowers the likelihood of the store owner creating color contrast problems or omitting a heading structure entirely

The table inserter is simple, with no mechanism for creating accessible tables. It’s still possible, however, by switching to the HTML markup view to customize the table code directly.

The image interface prominently shows the alternative text field, likely encouraging its use. But it does not explain alternative text to help editors understand its purpose.

Videos are supported only by inserting embeddable code from an external provider, shifting the accessibility responsibility to the provider. Video players from Vimeo or YouTube, for example, are effectively accessible. Other providers may not be.

Overall, merchants can absolutely create accessible product descriptions in Shopify, with, again, a couple of caveats. First, using tabular data requires editing the table code directly to ensure accessibility. Second, avoid the temptation of using headings to increase the font size of body text.

Uploading media. Store owners can upload a variety of media types, including videos, images, and three-dimensional models. All will be displayed according to your theme’s media templates. The interface is simple but provides an alternative text field only for the media thumbnail. Also, there is no way to provide captions for videos. You must upload a video with open captioning to make it accessible.

Usable, with Homework

Shopify has provided a usable, accessible interface for store owners and shoppers. However, much of the accessibility burden falls on editors and theme developers. Shopify does not provide significant help in guiding owners towards accessible themes or helping them create accessible product content. In short, do your homework to avoid accessibility lawsuits.

Shopify Announces Online Store 2.0, More

Shopify announced significant changes to its ecommerce platform aimed at performance, ease of use, and empowering developers. The company also announced a new revenue-sharing model, giving app and theme creators 100% of revenue up to $1 million each year.

During a live event on June 29, 2021, called Shopify Unite, aimed at entrepreneurs and the Shopify development community, the ecommerce platform demonstrated several updates and changes, including what it termed “Online Store 2.0.”

The complete presentation, which ran for about 75 minutes, is available on YouTube.

[embedded content]

Online Store 2.0

For small business owners and managers, the most significant announcement may have been the aforementioned Online Store 2.0 or at least a portion of it.

“Today I am going to show you the biggest and boldest upgrade we have ever shipped to the online store,” said Vanessa Lee, Shopify’s online store product director. “Our goal is to give more power to developers while making it even easier for merchants to leverage that power and build their storefront.”

[embedded content]

Shopify has rebuilt three areas of its online store, according to Lee:

  • Themes and the online editor,
  • Store content,
  • Developer tools.

Unless you are a developer, the new online editor and the forthcoming content management system will likely be the most impactful.

Shopify updated its templating language, called Liquid, which now includes an editor similar in performance to WordPress’s Gutenberg, released in 2018, or to the page editors in Squarespace and Wix.

This upgraded editor may replace some popular Shopify apps, including the Shogun page builder.

If the demonstrations Shopify shared are indicative, the new online editor will make it possible for small and midsized businesses to easily create new page templates and populate them with data without writing code — assuming the theme employed makes use of Shopify’s sections and blocks.

Netflix’s recently-announced merchandise store uses the new theming approach, for example. And Shopify has released a new theme called Dawn that is an “open-source reference theme, built for performance, flexibility, and ease of use. It uses Online Store 2.0 features, including JSON templates, which support app blocks and sections on all pages,” according to Shopify.

Screenshot of Netflix's merchandise store home pageScreenshot of Netflix's merchandise store home page

Netflix’s merchandise store uses Shopify’s new upgrades.

In addition to the new editor, Lee shared a “sneak peek” of Shopify’s soon-to-be-released content management system.

“We know that content is super important when it comes to expressing a shop’s brand, and soon you will be able to create entirely new custom [content] types…you will be able to create content once and publish it to all of your channels, including the online store,” Lee said, adding that Shopify planned to work with existing content management platforms in some way.

Screenshot of Shopify's content management interfaceScreenshot of Shopify's content management interface

Shopify plans to give store managers more options for content.

Zero Percent Revenue Share

Perhaps the second most interesting announcement at Shopify Unite was the company’s new app and theme revenue sharing model.

“We have always said we want to create more opportunities for our developers and our partners than we take for ourselves,” said Shopify President Harley Finkelstein about 57 minutes into the live event.

“The opportunities keep getting bigger. Last year our partner ecosystem generated $12.5 billion in revenue. And that number is up more than 84% from 2019,” said Finkelstein, adding, “that is four times more than Shopify made, and that is the way it should be. We only succeed when you do.”

Finkelstein went on to say that effective August 1, 2021, Shopify would no longer take any share of the revenue from apps or themes up to $1 million per year sales. After $1 million in sales, Shopify will take 15%, reducing its previous revenue share of 20%.

Although the company also introduced a registration fee for apps after August 1, 2021, the new revenue-sharing model encourages developers to create apps and themes for Shopify. It may also seek to avoid some of the app-store strife seen in mobile, such as the recent lawsuit between Epic Games and Apple.

Developers

App and theme developers heard plenty of good news, beyond the new revenue model, during the live event.

Improvements. Shopify improved its documentation and command-line interface, added GitHub support, and created a new developer console for performance testing.

Checkout API. Shopify introduced checkout extensions, a set of extension points, APIs, and user interface components — all could be used to build apps for checkout.

Storefront API. Shopify added to its Storefront API, allowing for new cart capabilities, including the ability to pass relevant buyer context (such as country or state) with the GraphQL API and a new option to query physical store inventory to power buy-online-pick-up-in-store solutions.

Hydrogen. Shopify has a new React-powered “developer toolkit that includes scaffolding to help get you up and running with only a few clicks, and a set of React components to help you build the foundation of your commerce website, so you can focus on styling and designing the features that make a merchant’s brand unique.”

Resources

Shopify also released articles and resources related to the Unite announcements.

Charts: Shopify’s Share of Global Websites, Ecommerce Sales

Shopify launched in 2004 in Ottawa, Canada, when its founders were dissatisfied with existing platforms to sell their snowboarding gear.  Fast forward to 2020, and Shopify is a global brand. Total 2020 revenue will exceed $2 billion. Its common shares trade at roughly $1,000 each. More than 1 million merchants in 175 countries sell on the platform.

Approximately 39 percent of global websites in Dec. 2020 use no content management system. Another 39 percent of global sites use WordPress. Next is Shopify at 3.2 percent. This makes Shopify the largest ecommerce-only platform, representing 3.2 percent of all global websites in Dec. 2020, up from 1.9 percent in January.

Shopify reported roughly $61 billion in gross merchandise volume across its platform in 2019.  Total global ecommerce sales in 2019 were roughly $3.5 trillion. Thus Shopify’s share in 2019 represented 1.7 percent of the worldwide total.

The number of merchants that use Shopify has steadily increased, topping 1 million as of Dec. 31, 2019. The average annual revenue per merchant, however, remains modest at $61,100 in 2019, up from $42,857 in 2017.

8 Marketplaces for Themes, Templates, Plugins

Themes, templates, and plugins can simplify the creation and customization of a website. Here is a list of marketplaces to access themes, templates, and plugins. Several of these marketplaces also offer other digital assets, such as graphics, fonts, and videos.

Envato Market

Envato Market

Envato Market

Envato Market is a giant marketplace for creative digital assets: ThemeForest for themes and templates; CodeCanyon for plugins and code scripts; VideoHive for video effects and stock footage; AudioJungle for royalty-free music and audio tracks; GraphicRiver for fonts and graphic assets; PhotoDune for stock photos; and 3DOcean for 3D print models and computer-generated textures.

ThemeForest offers thousands of themes and templates for business sites, blogs, landing pages, and marketing emails as well as for ecommerce sites across many shopping carts. CodeCanyon lists nearly 35,000 code scripts and plugins for WordPress, CSS animations, JavaScript, and more.

Envato also offers Envato Elements, a subscription service for unlimited digital downloads of 53 million creative assets, with individual plans for $16.50 per month, as well as Envato Studio to hire a creative or technical freelancer.

MOJO Marketplace

MOJO Marketplace

MOJO Marketplace

MOJO Marketplace is a leading platform for digital goods, connecting 5.8 million users to 7,500 items. The site offers themes, plugins, and services from designers and developers. MOJO lists 1,580 themes and templates for WordPress, Shopify, Joomla, Magento, HTML, email, and more. Sellers receive a commission of at least 50 percent. The rate increases for exclusive sellers.

Creative Market

Creative Market

Creative Market

Creative Market is a marketplace for creative content producers, with nearly 32,000 shops and 5 million products. Its content includes themes, templates, graphics, fonts, photos, design add-ons, and 3D elements. It sells themes for Shopify, WordPress, OpenCart, Drupal, Joomla, Ghost, Magento, Tumblr, HTML, and Bootstrap. Creative Market provides various tools for sellers to track statistics, keep up with customers, and manage support. Sellers keep 60 percent of each sale.

Codester

Codester

Codester

Codester is an online marketplace where developers and designers can buy and sell ready-to-use web development assets. These include themes, app templates, plugins, scripts and code snippets, graphics, and more. Sellers receive a commission of 70 percent with no minimum number of sales required.

Fantero

Fantero

Fantero

Fantero, part of Freelancer.com, is a marketplace for web design content with a collection of over 2.5 million items. The marketplace features templates, plugins and scripts, graphics and web elements, photos, videos, and 3D models. Fantero has themes and templates for WordPress, Joomla, Photoshop, HTML, and more. Fantero sellers keep 50 to 75 percent of each sale.

Template Monster

Template Monster

Template Monster

Template Monster is a large marketplace for quality digital products. The site lists nearly 58,000 themes, templates, plugins, and graphics, including Bootstrap-based website templates, HTML5 and CSS3 ready-made solutions, icons, logos, user-interface elements, and more. There are ecommerce themes for Shopify, Magento, PrestaShop, OpenCart, VirtueMart, MotoCMS eCommerce, and more. Sellers earn 65 percent on each sale.

WooCommerce Marketplace

WooCommerce Marketplace

WooCommerce Marketplace offers free and paid themes and extensions for the open-source WordPress plugin. The site contains elements developed by WooCommerce as well as third-party developers. Browse themes by industry, or customize a storefront. Find extensions for payments, shipping, marketing, subscriptions, store management, and more. Theme and extension developers can earn 60 percent of the net revenue from the sale of their exclusive elements, or 40 percent for non-exclusive.

WordPress.org

WordPress.org

WordPress.org

WordPress.org, the site to download the WordPress content management system, is also a directory for more than 57,000 plugins and 7,800 themes (as well as shops that provide GPL-licensed themes and premium support services) to transform a WordPress site. For developers, WordPress.org offers a Plugin Developer Handbook and a Theme Developer Handbook for submitting elements to the directories.

Shopify’s App Store Is Good and Bad, Says ‘Unofficial’ Expert

Kurt Elster’s “The Unofficial Shopify Podcast” has been downloaded more than 1 million times. His agency, Ethercycle, helps Shopify merchants drive revenue and profit. And his newsletter at KurtElster.com contains tips and strategies to scale a Shopify store.

“I eat, sleep, and breathe Shopify. I even have a Shopify license plate,” Elster told me.

You might call Elster the unauthorized Mr. Shopify. I recently spoke with him about the platform, notable merchants, and his pet peeves, among other topics. What follows is the entire audio version of that conversation and a transcript, which is edited for length and clarity.

Eric Bandholz: Tell us about yourself.

Kurt Elster: I’ve been a Shopify expert since 2011. I have worked on Shopify exclusively since 2015. I eat, sleep, and breathe Shopify. I even have a Shopify license plate.

Bandholz: Is Shopify the place to be? Is it still hot?

Elster: Yes. Over a million merchants are on Shopify. Some of the real power of it is the partner ecosystem. They’re up to 12,000 partners. Having access to an army of people who can help you grow your store, whether it’s through apps, integrations, or professional services, adds a ton of value to the core platform.

Bandholz: What are you seeing from people who reach out to you for consulting? Are they larger companies on the Shopify Plus side? Or startups?

Elster: It is all over the board. Right now there is a gold rush into ecommerce. I am seeing more new store builds than ever before. Our clientele tends to be Shopify merchants who have bootstrapped and validated their business. They approach us to take it to the next level.

We do a lot of front-end work, setting up the theme. That’s the hardest part for merchants. Many merchants can’t see the forest through the trees on their own website. They spend more time on it than anybody else, which makes it tough to see minor issues. So having a third party do it could be beneficial.

Bandholz: What are some of the biggest mistakes people make on Shopify?

Elster: The best part about Shopify is the app ecosystem — the app store. And the worst part about Shopify is the app store. No matter what feature or integration you need, there is probably one or more apps for it. And, likely, they’re all reasonably priced. Some will even be free. But it is easy to get addicted to apps. You start playing app roulette. You think, “If I just get the right one, it’s going to seriously boost my sales.”

Well, no, it doesn’t work that way. But the larger problem is as you install these apps, each one has a payload. Each one adds weight to the site, and they also add to your monthly recurring expenses. So if you’ve got one app, fine. If you’ve got eight apps, fine. But 40 apps — that’s a problem.

I have been retained more times than I can count just to figure out installed apps — which ones to keep and which to remove. So that’s a trap that people can fall into. It’s similar to WordPress plugins.

My current pet peeve is the main menu. It’s the front door to an ecommerce site. It’s how visitors find products. But if I load up a random independent online store, the main menu is “Home,” “About,” “Blog,” “Contact,” and then there’s a single word that says “Shop.” And it’s a drop-down menu. That’s the most important part! It’s entirely hidden behind a drop-down.

Go to major ecommerce sites. None of them do that. The main menu is devoted to shopping. All of that other stuff is in a secondary menu or the footer.

Bandholz: Tell us about some innovative brands.

Elster: My favorite client at the moment is Hoonigan, an automotive lifestyle brand. They sell lifestyle apparel, mainly. At one point years ago they had the most viral video on YouTube for a car video called Gymkhana that’s like half driving. Think if you combined driving and, I don’t know, a Cirque de Soleil show. It’s quite the activity.

It’s stunt driving, basically. It’s very cool. So it went viral, and an automotive lifestyle brand was born out of that. It’s a very creative team, about 30 people in Long Beach, California. They do a phenomenal job in their marketing, their designs, and their ads. They have built a community. That’s the magic that a lot of brands miss — building a genuine sense of community.

Bandholz: We’ve talked about Shopify themes. Do you have recommendations for themes? There are a ton of them.

Elster: I have opinions on Shopify themes. So does the theme team at Shopify. I have talked to members of that team at the various Shopify Unite conferences. The team is extremely selective as to what’s in the theme store. Themes that are ultimately approved typically have limited options and settings to make them easier to use and less intimidating.

My favorite in the last couple of years is the Turbo theme by Out of the Sandbox. They’ve been consistently updating it. I love it. I used it on [Jay] Leno’s Garage. I’ve used it on CORSA Performance. Just an endless list of sites.

But even though Out of the Sandbox has several themes in the store (including popular ones such as Parallax and Retina), Turbo is not in there. That’s because it has a ton of options jammed into it. I don’t think it would ever be approved because it’s intimidating to a new merchant.

There’s a balance there. If you’re launching your first Shopify store, I wouldn’t start with a big, expensive theme. I would start with a simple free theme and then switch to a bigger, more involved one later.

And the last thing I would do is buy a theme from whatever marketplace. Anytime we’ve used themes outside of the Shopify store, we have regretted it. Again, the team is extremely stringent about what gets in there.

Bandholz: So how do you differentiate websites when the bones are the same?

Elster: That a common fear. It’s unfounded, however.

For example, I live in a subdivision with, perhaps, 200 houses. Three are identical to mine. All three look completely different because they have different landscaping, different lots, they face different directions, and they have different decor and paint. They don’t look like the same house.

The same is true of themes and even more so. A theme is just a way to showcase your content and brand. But don’t use the default styling, colors, and fonts and just insert your logo. At the very least, change the colors and typography to match the brand. It sounds simple, but a lot of people skip it. Change the design of the header. That will immediately alter the entire feel.

Bandholz: A lot of companies with huge catalogs have shied away from Shopify. Is that a valid fear?

Elster: No. We’re working on a large site right now. I wish it were public so I could tell you the name. It had 80,000 products when we started working on it. It now has 120,000. By the end of the year, we’ll have 200,000.

Certainly we had to manage some things. But the site is now one of the fastest I’ve ever worked on. When we first started, it took 30 to 40 seconds to load a collection page because of the number of products we were filtering through. But Shopify is giving us new technologies such as React. A catalog with six figures worth of product can load in two to three seconds.

Bandholz: I could talk all day about Shopify. Unfortunately, we don’t have all day. How can our listeners find you?

Elster: My Twitter handle is @Kurtinc. Other than Twitter, the best way to reach me is via my newsletter. Head to KurtElster.com, sign up for my newsletter. It comes from my actual email address. You can hit reply, and it will go to my inbox.

Bandholz: Everyone should listen to your podcast, “The Unofficial Shopify Podcast.” It’s amazing.

Elster: I’ve got opinions.

Assessing Google’s ‘Core Web Vitals’ on Shopify Themes

Google recently announced “Core Web Vitals,” which are new performance metrics that will become a search ranking signal next year.

From the announcement:

Earlier this month, the Chrome team announced Core Web Vitals, a set of metrics related to speed, responsiveness and visual stability, to help site owners measure user experience on the web.

Today, we’re building on this work and providing an early look at an upcoming Search ranking change that incorporates these page experience metrics. We will introduce a new signal that combines Core Web Vitals with our existing signals for page experience to provide a holistic picture of the quality of a user’s experience on a web page.

Core Web Vitals consist of three new metrics:

  • First Input Delay measures how fast users can interact with the page; a good value is less than 100 ms.
  • Cumulative Layout Shift measures the visual stability of the page content; a good value is less than 0.1 seconds. Some pages move content when users take action, which can be frustrating.

You can quickly check these metrics on your site by installing “Web Vitals,” a third-party Chrome extension.

Google displays the new metrics in Search Console, PageSpeed Insights, and the Chrome User Experience Report.

Changes in Lighthouse 6.0

PageSpeed Insights is powered by an open-source tool from Google called Lighthouse, which was updated to support the new metrics, among other changes.

From the release notes, which appear below with slight clarifications, we learn that Google removed three metrics from the score calculation and reduce the weight of a couple of others.

TTI’s [Time to Interactive’s] weight has been reduced from 33% to 15%. This was in response to user feedback about TTI variability, as well as inconsistencies in metric optimizations. TTI is still a useful signal for when a page is fully interactive, however with TBT [Total Blocking Time] as a complement, variability is reduced. With this scoring change, we hope developers are more effectively encouraged to optimize for user interactivity.

FCP’s [First Contentful Paint’s] weight has been reduced from 23% to 15%. Measuring only when the first pixel is painted didn’t give us a complete picture. Combining it with measuring when users can see what they most likely care about (Largest Contentful Paint) better reflects the loading experience.

Max Potential FID [First Input Delay] has been deprecated. It is no longer shown in the report but is still available in the JSON. It is now recommended to look at TBT to quantify your interactivity instead of Max Potential FID.

First Meaningful Paint has been deprecated. This metric was too variant and had no viable path to standardization as the implementation is specific to Chrome rendering internals. While some teams do find the FMP timing to be worthwhile on their site, the metric will not receive additional improvements.

First CPU Idle has been deprecated because it’s not distinct enough from TTI. Total Blocking Time and Time to Interactive are the go-to metrics for interactivity now.

Cumulative Layout Shift’s weight is relatively low, though we expect to increase it in a future major version.

Google states that the new methodology will result in Lighthouse scores to (i) worsen by at least five points for 50 percent of all worldwide sites, (ii) remain unchanged for 30 percent of sites, and (iii) be “noticeably higher” for 20 percent.

Field Data vs. Lab Data

The new Core Web Vitals primarily focus on “Field Data” — data from real users. “Lab Data” is a simulation and doesn’t necessarily reflect real-life experience. PageSpeed Insights places Field Data above Lab Data, as shown in the screenshot below for a Shopify site, which does not, incidentally, pass the Core Web Vitals assessment.

PageSpeed Insights places "Field Data," from real users, above the Lab Data, which is simulated.

PageSpeed Insights places “Field Data,” from real users, above the Lab Data, which is simulated.

Google recommends using Lab Data while a site is under development and Field Data when it’s live.

Here’s an example of how Field Data is collected from real interactions. The Web Vitals Chrome extension doesn’t initially display First Input Delay metrics, reporting in light gray, “waiting for input.” To get a value for your site, mouse over the main site navigation.

The Web Vitals Chrome extension doesn't initially display First Input Delay metrics, reporting in light gray, "waiting for input."

The Web Vitals Chrome extension doesn’t initially display First Input Delay metrics, reporting in light gray, “waiting for input.”

Updated Page Speed Study

Page Speed Scores of Every Shopify Theme,” my article in April, included a table of those speeds at that time using PageSpeed Insights, which, again, was Lab Data.

What follows is an updated table of the page speed scores for mobile and desktop of all Shopify themes using Field Data. I’ve also included the Lab Data scores from April with the percent change for each theme.

The table, which is sortable by column, shows only the overall page speed score. For a detailed report of all Lighthouse metrics for each theme, see the Google Sheet.

ThemeMobile (June ’20)
Page Speed Score
Mobile (April ’20)
Page Speed Score
Mobile:
% Change
Desktop (June ’20)
Page Speed Score
Desktop (April ’20)
Page Speed Score
Desktop:
% Change
Alchemy3262-48.4%7994-16.0%
Artisan3061-50.8%7797-20.6%
Atlantic6268-8.8%8699-13.1%
Avenue4348-10.4%7177-7.8%
Blockshop2737-27.0%7481-8.6%
Boost6177-20.8%9598-3.1%
Boundless7088-20.5%9197-6.2%
Broadcast36345.9%7477-3.9%
Brooklyn5672-22.2%8998-9.2%
California484020.0%9195-4.2%
Canopy4550-10.0%9397-4.1%
Capital3781-54.3%8898-10.2%
Cascade786913.0%98100-2.0%
Colors2953-45.3%8995-6.3%
Context2037-45.9%6779-15.2%
Debut7988-10.2%9799-2.0%
District7183-14.5%94940.0%
Editions4563-28.6%9097-7.2%
Editorial7889-12.4%9799-2.0%
Emerge37N/AN/A79N/AN/A
Empire6168-10.3%9099-9.1%
Envy1831-41.9%7981-2.5%
Express95N/AN/A95N/AN/A
Expression6770-4.3%9597-2.1%
Fashionopolism3274-56.8%7097-27.8%
Flow2053-62.3%6066-9.1%
Focal6162-1.6%9394-1.1%
Galleria373023.3%6978-11.5%
Grid3472-52.8%8897-9.3%
Handy2740-32.5%8285-3.5%
Icon2836-22.2%8493-9.7%
Impulse6068-11.8%8692-6.5%
Ira4566-31.8%8796-9.4%
Kagami4366-34.8%9197-6.2%
Kingdom4978-37.2%9798-1.0%
Label6379-20.3%9699-3.0%
Launch3348-31.3%6881-16.0%
Loft272317.4%8386-3.5%
Lorenza2930-3.3%70674.5%
Maker3048-37.5%7987-9.2%
Masonry4657-19.3%90882.3%
Minimal7178-9.0%9299-7.1%
Mobilia3653-32.1%6596-32.3%
Modular5073-31.5%9398-5.1%
Motion2932-9.4%84805.0%
Mr Parker3240-20.0%8095-15.8%
Narrative7180-11.3%95100-5.0%
Pacific2334-32.4%7381-9.9%
Palo Alto1529-48.3%4177-46.8%
Parallax353112.9%7982-3.7%
Pipeline5254-3.7%95932.2%
Prestige5166-22.7%9096-6.3%
Providence3941-4.9%76751.3%
Reach2633-21.2%7481-8.6%
Responsive2949-40.8%7593-19.4%
Retina178112.5%5758-1.7%
Showcase8182-1.2%9798-1.0%
ShowTime2425-4.0%8283-1.2%
Simple8392-9.8%9599-4.0%
Split6468-5.9%8292-10.9%
Startup3743-14.0%89863.5%
Story716410.9%9798-1.0%
Streamline3879-51.9%9199-8.1%
Sunrise6270-11.4%9099-9.1%
Supply7586-12.8%9499-5.1%
Symmetry3767-44.8%9398-5.1%
Testament55550.0%8694-8.5%
Trademark5460-10.0%8795-8.4%
Vantage4764-26.6%8090-11.1%
Venture88853.5%9399-6.1%
Venue2033-39.4%7281-11.1%
Vogue2947-38.3%8388-5.7%
Warehouse504122.0%94886.8%