When you think of a Shopify app, there’s a good chance you’re thinking of one of two things: an app that helps a merchant optimize things behind the scenes, like an analytics tool, or an app that adds buyer-facing functionality to the storefront. If you think of the latter, then you’re probably thinking of a theme app extension.
What are theme app extensions?
Shopify theme app extensions are bundles of Liquid blocks, static assets, and JavaScript snippets that allow merchants to extend and customize the functionalities of their Shopify themes. These extensions allow developers to easily add dynamic modules and additional features into a store without the need for extensive theme modifications.
Because they exist outside of the core theme, theme app extensions enable developers to maintain the integrity of the core theme while making updates or changes. This ensures that modifications are easier to manage, reducing the likelihood of conflicts and errors. Merchants can place and edit the theme extension anywhere in their store using the theme editor, instead of diving into a theme’s Liquid template.
Themes vs apps
In order to fully understand theme app extensions, we have to go back to Shopify basics, because it’s important to really understand the difference between apps and themes. Themes, essentially, are the face of a Shopify store. They provide the layout and overall look and feel of the interface a shopper interacts with as they browse through products. Apps, on the other hand, give a Shopify store added features and functionality.
For a long time, any apps that wanted to inject new functionality into a theme would require merchants to manually edit the theme code upon install. This, obviously, was not ideal. If the app was uninstalled, entire sections of a store could break. Or, if the code was edited incorrectly, the merchant would run into problems that they likely didn’t know how to fix. Overall, it was a necessity, but we should all be relieved that there’s now a better way, and that is where Shopify theme app extensions come in.
Theme app extensions are the way Shopify plans to have themes and apps overlap moving forward. They provide developers with a controlled way to customize a theme, without requiring merchants to manually edit their theme code. This avoids any potential integration bugs, maintaining the integrity of the theme so all future updates are supported without issue, and the app is automatically removed from the theme when uninstalled, without the need for manual code cleanup. In order to use theme app extensions, it’s important to identify whether a merchant is using a vintage theme or Online Store V2, as they are only compatible with 2.0 themes.
Using theme app extensions
Just like with other extension types, theme extensions allow Shopify to standardize the experience for merchants. They offer a cleaner onboarding experience for public apps, because everything is standardized and automated, and for custom apps, it means less hand-holding.
There are two primary types of theme app extensions: App blocks and app embed blocks.
App blocks are blocks of code that inject inline content onto a page to extend a theme. Merchants can add app blocks to a compatible theme section, or as wrapped app blocks that add your app’s functionality directly into a theme. They allow merchants to inject their apps directly into a theme, while giving the merchant control to modify, add, remove, or reposition the app block using Shopify’s built-in storefront editor. To add app blocks to a section, a theme will need to include a generic block of type @app in the section schema. You can find an example in Shopify’s documentation. App blocks only work for themes on Online Store 2.0. Merchants using vintage themes still need to manually copy and paste Liquid and JavaScript code snippets to their theme.
App embed blocks are used when storefront apps do not require a UI component, or use a popup or floating element instead of inline functionality. Keep in mind that by default, app embed blocks are deactivated upon install, and merchants will need to manually activate them. If this is your first time working with app embed blocks, read our guide to make sure your app embed blocks are running properly. App embed blocks work for both vintage and Online Store 2.0 themes, no copy-paste is required by the merchant.
When using either type of theme app extensions, your application can integrate Javascript, CSS files, or other static assets such as images, directly within an /assets subdirectory, which allows Shopify's CDN to distribute your content on your behalf, so you don’t have to worry about performant load times for your app components or managing your assets.
Examples of theme app extensions
Whether it's improving navigation or optimizing product pages, extensions allow you to customize a Shopify store to a merchant’s specific needs. If you’re looking for ideas on how you can use theme app extensions in your apps, we’ve got a few suggestions!
Product recommendation quizzes can be a great way to help merchants increase conversion rates. By suggesting products based on a buyer’s own preferences or interests, you’re able to offer much more personalized recommendations, and they’re more likely to buy. You could even go a step further by creating a bundle based on the quiz results to increase AOV. You can check out our forkable Shopify product quiz template to get a jump start.
Chatbots are a great way to help merchants hop on the AI bandwagon, and provide personalized recommendations to shoppers as they browse. By leveraging store knowledge, prompts, and context, you can have a chatbot that’s tailor-made for a specific store. We have a step-by-step tutorial to build a storefront chatbot with OpenAI.
Customer reviews will quickly provide social proof on product listings to build trust and increase conversion. If you support buyer-submitted photos, it can create a sense of authenticity, and has been shown to improve conversion rates.
---
Shopify theme app extensions have substantially changed the way developers can enhance Shopify themes. They provide better integration, smoother updates, and simple app installs and removals.
If you want to build using theme app extensions for your next app, Gadget makes it easy. You can sign up for free to start building, or connect with the community over on the Gadget Discord.
Top comments (0)