On June 29th, Shopify announced the release of Online Store 2.0, a set of features and feature improvements that make themes and theme apps easier to build, more flexible and more maintainable.
Note: These features were announced at Shopify Unite 2021. Watch the full Shopify Unite 2021 stream.
Online Store 2.0 features are available on any development store created after June 29, 2021.
Our themes are all being updated to fully support the new features of Online Store 2.0, with expected availability in early August of 2021.
If you're experiencing slower load times on your site, there are a few things to consider to improve performance.
Review and remove apps
It's always good to periodically look over your installed apps and remove any you don't absolutely need. Apps, even simple ones, often add a large amount of additional page weight and loading time due to the fact that they are most often initialized after the theme has loaded, causing a delay before their content appears and the page finishes loading.
Disabling apps in Shopify admin dashboard doesn't always completely remove the app. Please refer to the app's uninstall instructions or their support team. Our team cannot help debug app conflicts or remove them for you.
Consider your home page and video content
It's tempting to load a lot of content on your home page with the vast amount of sections we provide, but do so responsibly. The more sections you add, the larger the page is and slower the loading time is. We lazyload our images, dependant external APIs, and some other content, but that only takes us so far. Also, videos are much more data-heavy than images and will affect your site speed on slower connections. Limited content is the king when page speed is your top priority.
While we have rigorously tested our themes to perform well with page speed tools in a typical setup, due to the fact that your site content and your app choices drastically affect speed times we cannot guarantee your store will meet certain grades and are unable to further help improving speed scores beyond the advice above.
Working with multiple product variants can be challenging task. When there is only one variant, say size, Shopify tells us if a variant is in stock so we can visually show that to the user.
In the above example, Shopify sends us something like this:
- XL - sold out
One option with four variations to handle, nice and easy. If we add two color variants, we go from 4 possible options to 8. 4 sizes x 2 colors gives us a lot more information to deal with, and Shopify sends it to us in a big list of all the possibilities:
- S Black
- M Black
- L Black
- XL Black
- S Camel
- M Camel
- L Camel
- XL Camel
We take these options and split them up so you have some user friendly buttons or dropdowns, rather than one long list of all the options to choose from. Determining which combination is available is difficult on the code side — especially if you had 3 options with 5 variations each. That's 125 total possibilities and a much longer list to sort through.
If we used the same color and size options above but removed XL Black and L Camel, we'd get a list of only 8 instead of 10. Shopify doesn't tell us those don't exist since they're never been set on the product page.
In earlier versions of our themes, and most themes available, the only way to know the status of a variant is to send a query to Shopify with the variant's ID and get a response back of available, sold out, or not available — with that we could update the add to cart button with either Sold out or Unavailable.
Below is an example of what happened when you clicked on XL Black, a variant that isn't available on the shop.
That's not a great experience for your customers.
With this new feature, we get ahead of any possible disappointment by proactively marking unavailable items when the page loads and as you click through them:
This prevents your users from accidentally finding themselves with an option they cannot purchase, like a Large Camel or XL Black product here.
Sold out variants
Sold out variants will not be blocked off. This is because a number of apps, like back in stock notifications, require sold out variants to be clickable.
Shopify recently launched an integration with Google’s Pagespeed Insights tool for measuring online page speed performance. Their tool will give you a rolling 7 day average mobile speed score for your major pages using a Moto G4 device (released 2016) on a 3G network as their baseline.
Optimizing your online store speed can improve the shopping experience for your customers, make your store more discoverable, and increase conversion. Several factors impact your online store speed, including the following:
- Third-party libraries and services
- Analytic libraries
- Theme features
- The number and size of images and videos
When you see the results of your test keep in mind that there will always be a balancing act between making sure your site is fast and offering the features and content that make your products desirable to potential customers.
A word of caution
While speed scores are a helpful gauge, they aren’t everything. An ultra-fast store still needs to be a convincing store in order to convert. Speed tests are designed to test worst-case scenarios that may be far from your customers’ actual experiences.
Speed matters but it's best optimized as a final stage of a proven business. Focus on your products, content and marketing first and keep in mind that even wildly successful businesses have low speed scores:
|URL||Mobile Score||Desktop Score|
1. Be ruthless about the apps you include
Apps are by far the biggest contributor to poor performance in an online store and are your best starting point for improving site speed. In one test, a developer found that adding just 6 apps to Shopify’s feature-light Debut theme brought it’s score down by 52 points.
There will always be apps that are crucial to your particular business but for those other “maybe this will help” apps you’ll want to take a more comprehensive look at if the app could be helping your store enough to justify its effect on your site speed.
Apps are loaded in by a variety of methods and some are more efficient than others. For any apps you decide to keep, it’s worth checking with the app developers to ensure that their app and its assets are loaded in at the most efficient time.
- Remove any unnecessary apps
- Ensure apps are installed efficiently with app developers
2. How important is your video or GIF content?
Video and GIF files are much larger than images and take longer to load. Videos can also share colorful details about your product that traditional photography can't match. If you sell a complicated or feature-rich product, it might make sense to keep videos on your product pages, even if they result in slightly slower load times.
- Is all your video content necessary?
- Use videos over GIFs when possible
- Avoid Vimeo for video content
3. Consider page length
Generally speaking, longer pages will take slightly longer to load in at first. When possible, we recommend keeping your content short and to the point. It’s better to do more with less, both from a speed perspective and, most importantly, for keeping your customers interested and engaged. As mobile continues to expand its dominance, statistics show mobile users read half as many pages and spend half as much time on site compared to desktop, making this a good opportunity to rethink your content strategy.
That said, it’s important to compare tapping vs scrolling for your given situation. Customers need more convincing to tap on a link and navigate to a new page than they do to scroll down a page they are already on. This means that a longer page, while slightly slower to load, could result in more engagement as the user would interact with more content in the long run.
- Rethink your marketing points: could they be more succinct?
- If you have a large inventory, consider the number of products shown on collection pages
- Reduce the use of multi-slide slideshows
What we’re doing
We’ve designed all our themes with a balance of quality and performance in mind and, while we do tend to believe in higher-quality fast experiences over more basic experiences but extremely fast experiences, we are constantly improving our performance techniques and will continue to release new versions with further speed improvements.
Amongst other optimizations, here’s what you’re already getting when you use our themes:
- Lazyloading of all images, background images, and video content
- Our quick view balances speed vs. responsiveness by preloading content and lazyloading the cart form and images
- All themes offer pop-over cart styles that eliminate unnecessary page changes
- Perceived performance enhancements across all themes: image loading and product filtering animations, checkout button animations, between-page animations, and more
- Streamline offers instant product pages with progressive background content loading
- Streamline's side-scrolling collections load more products on-demand
- Streamline first loads critical styling only, loading in further styles as needed
- Motion offers on-page collection switching through subcollections
- Impulse offers on-page collection filtering
- Expanse offers quick-buy option from product tiles
The bottom line
Ultimately, only you can decide what trade-offs between functionality and performance are the right decisions for your business.
- How Apps Affect Load Speed
- Pingdom Testing Tool
- GTMetrix Testing Tool
- Google Pagespeed Insights Tool
Klaviyo and other email marketing platforms use customer tags in order to sync newsletter subscribers to lists that can be used for email marketing campaigns. You may find the following instructions that indicate the requirement of a newsletter tag in order to sync your subscribers to a Klaviyo list.
The good news is this has already been done for you in our themes. No additional changes are needed. Any visitors who subscribe to your newsletter will automatically receive the newsletter tag that you'll see when viewing your customers in the Shopify admin. Klaviyo will automatically sync these subscribers based on that tag being applied.
For any further integration questions or support, please refer to Klaviyo's documentation.