General Support

As of mid-2020, Instagram has removed the API that allowed themes to provide automated Instagram feeds as sections within the theme. Shopify has since instructed all theme partners to remove their Instagram feed sections.

If have an older version that includes the original Instagram feed section that is no longer working, Shopify's recommendation is to replace the feature with an app.

At the moment we recommend the free Section Feed app for its simplicity and ease-of-use.

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:

  • Apps
  • 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
allbirds.com 12 58
amazon.com 46 58
fashionnova.com 12 38
gymshark.com 6 25
kyliecosmetics.com 13 36
mvmt.com 17 47
shop.tesla.com 34 73
apple.com 39 72

Our advice

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.

Tips:

  • Remove any unnecessary apps
  • Ensure apps are installed efficiently with app developers

2. Do your customers need Quick Shop?

Quick Shop lets your customers open products directly from Home or Collection pages without having to wait for a new page to load. Most themes with quick shop will load those pages only once they have been clicked on, causing a slow-feeling delay between a click and seeing the results. We’ve chosen to preload the layout and only load in the slower parts of the product page (the “add to cart” form and images) once it has been clicked on.

While this lets us give your customers an instant response to clicking on a quick shop and does so in a performant way, it can have an adverse effect on recent speed testing tools. For Impulse and Motion in particular, try turning this feature off if you don’t think it is overly beneficial to your customers. Note that Streamline has a mobile-optimized quick shop that pairs well with its other features.

Tips:

  • Disable Quick Shop if non-essential (Impulse and Motion)
  • If keeping Quick Shop, remove any embedded video content in your product descriptions

3. 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. 

Tips:

  • Is all your video content necessary?
  • Use videos over GIFs when possible
  • Avoid Vimeo for video content

4. 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.

Tips:

  • 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

The bottom line

Ultimately, only you can decide what trade-offs between functionality and performance are the right decisions for your business.

 

Resources:

Impulse support Motion support Streamline support

Note: Shopify does not provide the ability to disable the PayPal Express button from your checkout pages. While the workaround below does make this possible (for now), support for this customization will be limited to this guide and is not something we can assist with via email.

When you enable the PayPal Express option in your payment settings this payment option will automatically appear on your checkout page. While for most this is desirable, we have found that some merchants would like the ability to remove this button at checkout.

As of right now, there is a workaround that makes this possible due to the fact that Shopify will either show your express checkout options on your Checkout or your Cart, but not on both. 

This means that if the "Enable additional checkout buttons" setting is enabled for your cart page, the PayPal Express (and other) buttons won't appear on your checkout page. You can find this setting under Theme Settings > Cart.

cart-payments

Once the additional checkout buttons are enabled we can apply a CSS snippet to hide those buttons on the cart page, effectively removing the express buttons from all parts of your checkout experience.

To do this, from the theme editor go to Actions > Edit code. In older theme versions, you'll be looking under the Assets folder for either theme.scss.liquid or theme.css.liquid.

At the very bottom of the file, paste in the following CSS snippet.

.additional_checkout_buttons {
display: none;
}

Now save the file.

This will hide the additional checkout buttons on the cart page and the PayPal Express button should also no longer appear when you transition to Shopify's checkout.

Motion support Impulse support Streamline support

All themes include a "Cart" feature that provides your visitors with visual feedback that they have added an item to purchase. It also provides them with the ability to adjust quantities or remove specific line items before they transition to Shopify's "Checkout" where they will provide customer information, shipping details and payment information. 

Because the "Cart" is a part of your theme, those settings can be customized through the theme editor under Theme settings > Cart. The code for the "Cart" Drawer and Page styles are also available to modify if you were to work with a Shopify Expert.

Once your visitor selects "Checkout" they have transitioned from the "Cart" to "Checkout" which is no longer part of your theme and is controlled by Shopify.

checkout

In the Checkout, Shopify does allow for some basic style, color and image adjustments that are universal across all themes. You can edit the options found under Theme Settings > Checkout or follow their guide on customizing the style of your checkout here.

One exception is that merchants on a Shopify's top-tier Plus plan do have access to further modify their checkout through a custom checkout.liquid asset as described here in Shopify's developer documentation.

Motion support Impulse support Streamline support

Mobile devices will occasionally enter a "low power mode" that restricts browsers from autoplaying videos in order to preserve battery life. This is most often caused by the iOS battery saver mode or based on a slow connection. While in this mode, autoplaying videos will not work as expected.

low-power-mode

While this isn't something that's possible to bypass in the browser, we've been able to apply code to our themes that can detect low battery mode and will show the video's manual play button whenever possible. 

Motion support Impulse support Streamline support