Extend Into the Storefront With Online Store App Extensions

This past year at Shopify Unite, we announced a new online store design experience, which enables sections on all pages of an online store. This experience is now available in developer preview for all partners before its upcoming launch to merchants later this year. As part of this developer preview, we are also launching two new app extensions that drastically improve the usability of apps on the storefront: app sections and app snippets.

In the past, enabling apps that show up on Shopify storefronts has been a frustrating experience for both merchants and developers. Merchants had to deal with inserting code manually into their themes, or ask developers to do it for them. Developers had a hard time understanding where to insert that code, especially in the constantly evolving universe of themes.

The introduction of app sections and app snippets will address these concerns, while making it easier for merchants to leverage your app in their storefronts. In this article, we’ll cover how these two extensions will help your app fit into the new online store design experience. 

App sections 

For the past few years, merchants have been using dynamic sections to build and configure home pages for their stores. Sections are self-contained files made up of Liquid code and a schema that defines both the structure and configurable options. These standalone files are then assembled by the theme, creating a modular page that can easily be changed to suit the needs of the merchant.

App sections allow your app to create custom sections that can be added, removed, and configured from the online store editor. Sections are automatically made available to the merchant when they install your app, creating an incredibly intuitive experience that feels native to the theme. If your app uses app sections, merchants will never need to touch a line of code again to place and configure your app on their storefront.

Rather than needing to manually paste code wherever the app needs to show up, merchants can assign app sections to any spot in their theme. Moving a section is as easy as dragging and dropping until they like what they see, and then publishing their changes.

If your app is uninstalled, the section is then removed without any intervention required. The app code is thoroughly cleaned up, and nothing is left in the theme to slow it down. App sections are a familiar, intuitive experience for merchants, and represent the best possible way for your apps to work with themes.

For more information on how to get started with app sections, visit our getting started guide.

You might also like: Here’s Everything We Announced at Shopify Unite 2019.

App snippets

App snippets allow us to solve a problem almost as old as the API itself: how do apps clean up after themselves after being uninstalled? When an app is uninstalled, its API access is immediately revoked. While very secure, this presents an issue for apps that make changes to the storefront. When an app is uninstalled, it can't remove the app-specific code that is added to the theme.

This leaves orphaned code on the storefront, meaning the merchant must remove the code manually. If the code isn't removed, storefront performance is degraded by failed remote calls or content rendering incorrectly.

The app snippets extension represents a fundamental shift in the way that Shopify handles these code snippets. Instead of requiring apps to make API requests to Shopify to create code snippets, you can now register a block of code in your Partner Dashboard that's automatically made available to use in merchants' themes when your app is installed. 

While the reference to the app snippet will remain in the theme, the snippet itself will be automatically removed from the shop. The remaining reference to the snippet will intelligently tell the theme that there isn't any of the app's content to render anymore, which is great for theme performance. 

App snippets replace the old way of injecting snippet files into a theme with the Assets API. They can be used to add small code blocks to existing frame, page, and content sections or even when integrating with themes that do not have sections enabled.

To learn more about how to leverage app snippets and keep themes cleaner, visit our documentation on app snippets.

Getting started with app sections and snippets

App sections and app snippets are a paradigm-shifting way for apps to interact with storefronts, and are available to test through the new online store design experience developer preview immediately. While app sections can only be tested on the product page today, more pages will become available in the coming months. 

To stay up to date with changes to the Shopify platform, subscribe to the developer changelog today.

How will app sections and snippets impact your app? Share your thoughts in the comments below.