Learn about the Shopify Shop Mini ecosystem and how to get started building Shop Minis with custom backends.
TLDR: Shop Minis are custom, cross-merchant apps that enhance the buyer experience in Shopify’s Shop app. Gadget now has a template that handles authentication, session management, and data multitenancy for Shop Mini apps.
Shopify recently announced Shop Mini apps, providing developers a way to provide shoppers custom experiences in Shopify’s Shop mobile app. I’m going to talk a bit about what mini apps are, what is unique about Shop Mini apps (compared to “traditional” admin-embedded Shopify apps), and how you can start building and submitting your Shop Minis.
If you need a custom backend or database for your Shop Mini, check out the Gadget template and follow the README to start making authenticated requests from your mini to Gadget.
Prefer a video?
What are mini apps?
Mini apps aren’t unique to the Shop app. In fact, on November 13, Apple announced their own Mini Apps Partner Program, accompanied by mini app billing APIs (which are notably absent for Shop Mini apps!).
Mini apps are small applications built with web technologies like HTML, JavaScript, and CSS, that run inside a host application rather than inside a web browser. A host app provides some combination of an outer shell, navigation, identity, APIs, and native UI elements, and the mini app delivers focused functionality inside that wrapper.
It’s like if you were eating a sandwich, and inside that sandwich was another, smaller sandwich. The outer sandwich provides structure and a foundation, something you can hold. The inner sandwich: a delightful twist of new flavors. There is probably a food truck in Portland that sells these already.
A better example: building games for the Discord mobile app:
Mini apps can be built inside the Discord mobile app!
You can think of it like embedding a web-powered widget inside a native container. The host controls high-level concerns; the mini concentrates on a specific user interaction. With mini apps for mobile, you can bypass building, deploying, or managing a full mobile app and instead deliver reach through the existing host app’s user base.
The recently announced ChatGPT App SDK is another example of a mini app. The Apps SDK enables devs to build custom functionality inside ChatGPT (for the 800 million monthly users) and provides an API and design system you can use to extend ChatGPT’s base functionality.
What are Shop Minis?
Shop Minis are just mini apps for Shopify’s Shop mobile app and its user base. (The Shop app is a central hub for all merchants selling on Shopify. Instead of a shopper having to find and visit individual shops, they can discover ALL Shopify products in a single place.)
Instead of building tools for merchants or storefronts like you would when building traditional embedded Shopify apps, a Shop Mini delivers enhancements to the buyer experience across any merchant using Shopify.
Use cases for Shop Minis include things like: custom style pickers, color or complement-color finders, enhanced product discovery and recommendations, or other buyer-facing UI features. In some ways, you can think of a Shop mini as analogous to a theme extension, but instead of modifying a storefront, you’re extending the Shop app itself for shoppers.
Shop Mini app examples:
This is powerful because it gives you reach across all Shopify merchants, without requiring each merchant to install or configure the mini individually. Once your mini is approved, any buyer using Shop can use your mini to find product recommendations.
How to build Shop Minis
At the moment, the Shop Mini functionality is part of a pilot program, not yet broadly available. However, Shopify has established a framework for early partners to develop, submit, and ship minis.
If you are already familiar with traditional web tools and React, building a functioning Mini won’t be difficult (once you download XCode and/or Android Studio.) Shopify provides a well documented API for fetching cross-merchant products and, for apps with custom backends, has provided an auth example using Supabase Edge Functions.
A sample Shop Mini app - tutorial coming soon:
Here is what you need to know if you decide to build a Shop Mini app:
- Minis are built in React using a project generated by a command-line interface, via a
@shopify/shop-minisCLI. - Mobile-first: Even though you’re building in React, you need to build and test your mini using Android Studio or XCode. If you try to build on a web browser you will only ever get mock data. This is a trap! Just use the mobile simulators from the start!
- Styling & UI ecosystem: The mini runs with a provided component library + styling support (Tailwind CSS, a set of SDK components, icons from Lucide), to ensure a consistent look and feel inside the Shop app. Using emojis instead of Lucide icons? Instant rejection.
- Limited dependencies: Shopify enforces strict dependency constraints. Using an npm package not on the list? Instant rejection.
- Data fetching & hooks: Shopify provides hooks to fetch relevant data like user info, product data, and other context. These hooks are the intended way to access Shopify data, especially merchant and product data. Reading product data from a custom endpoint? Instant rejection.
- Backend + auth architecture:
- You can build a custom backend to support your mini, which requires you to set up JWT authentication on your server.
- Before signing a JWT, you need to call the Mini Admin API with the provided Mini API key to verify that the auth request is legitimate.
- Session and user management, and data multi-tenancy must be handled manually.
- The mini must request the openid scope and trusted domains need to be registered in
manifest.json.
The auth flow for custom Shop Mini backends:
- Analytics & metrics: The mini framework includes analytics support so you can monitor how often your mini is used and measure conversions, such as how often buyers use your mini to go from browsing to purchase. This helps you understand impact and performance.
The Shop Mini docs are great and will help you get started. There are strict guidelines that you need to follow when building Shop Minis, including a hefty list of prohibited practices. Familiarize yourself with these items before you start building!
Publishing your Shop Mini
The Shop Mini CLI has a submit command you can use to send your mini to Shopify for review.
As part of the submission, you must supply your source code and dependencies, which will be reviewed by the Shopify team. You also need to record a video demonstrating the full end-to-end flow: what happens from the buyer opening the Shop app, to launching/using the mini, to the end result (and benefit!) for the buyer.
I expect these reviews to be incredibly thorough. Mini apps reflect on Shopify and their Shop app, and poor-quality minis will discourage buyers from using Shop in the first place. The review will check for compliance: security, performance, bundle size (Shopify is targeting <3 seconds for load and <5MB bundle size), correct behavior, and user experience, and the team will be making sure you don’t violate any of the Shop Mini guidelines.
There’s a financial incentive for early builders: Shopify is offering a bounty of $5,000–$10,000 if the mini is submitted, approved, and launched by December 20. And if your mini makes use of AI, there is also reimbursement available for AI usage up to $500 per partner per month.
Because the Shop Mini ecosystem is still relatively new, documentation and tooling are evolving. Treat this as an opportunity to influence the ecosystem. If you build now, you’ll learn early and be able to provide feedback to Shopify that shapes how Shop Minis work going forward.
Summary
Shop Minis are a new mechanism for embedding buyer-facing functionality inside the Shop mobile app. Built in React and bound by strict constraints (styling, dependencies, performance, security), they allow developers to ship cross-merchant experiences at scale. Devs get access to the massive user base already using the Shop app. And with a custom backend and database, you have flexibility to deliver custom features, data, and behaviors to these users.
If you want to build features that serve buyers directly without asking merchants to install or configure anything, minis are worth exploring.
Start building Shop Minis today, with the Gadget template. Setup instructions are in the README.
Top comments (0)