Skip to content
How to customize Shopify with extension-only apps
TABLE OF CONTENTS:
Step 2: Start a local development server
Apps exclusively designed as extensions, whether public or custom, do not incorporate embedded app pages. These extension-only apps, solely composed of extensions, can be seamlessly hosted on Shopify. They come with a pre-defined Shopify-populated app URL, which, if desired, can be optionally modified to create embedded app pages or showcase the app on the Shopify App Store.
Building robust customizations for your Shopify store is now more convenient and efficient with extension-only apps. These apps leverage a cutting-edge extensibility platform based on app extensions and metafields. This integration ensures that extensions are deeply ingrained within Shopify, offering easy management, optimal performance, robust security, and a commitment to being upgrade-safe.
This tutorial will guide you through the process of creating an app accessible within the Shopify admin. You'll kickstart your project by generating starter code and harnessing the capabilities of the Shopify CLI to streamline the app development process.
What you'll learn
Navigate through the tutorial to gain proficiency in the following tasks:
- Initialize a Remix app using Shopify CLI
- Install your app on a development store
- Generate a product with your newly created app
Requirements:
Ensure you meet the following prerequisites:
- Create a partner account and a development store.
- Installed Node.js 18 or higher.
- Installed a Node.js package manager: npm, Yarn 1. x, or pnpm.
- Installed Git 2.28.0 or higher.
- Utilizing the latest version of Chrome or Firefox.
Step 1: Create a new app
Create a new Shopify app using an npm, yarn, or pnpm command.
- Navigate to the desired directory for your app, and run one of the following commands: Move to the directory where you intend to create your app. The app will be generated in a new subdirectory.
-
Run App Creation Command: Execute one of the following commands to create your new app:
bashnpm init @shopify/app@latest -
3. Upon running the command, provide a name for your app when prompted. Select "Start with Remix" to utilize the Remix template.
Tip: If you aim to create an extension-only app, choose "Start by adding your first extension." Further details about extension-only apps are available for exploration.
We recommend using the Remix template for most scenarios. However, you have the flexibility to choose from other templates or provide your own. Additional information about insights. The procedure results in the creation of a new app as well as the installation of Shopify CLI and all necessary dependencies essential for Shopify app development..
Step 2: Start a local development server
After creating your app, use a local development server and Shopify CLI.
- Navigate to your app directory:
cd my-new-app
- Run the following command to initiate a local server:
npm run dev
Guidance During App Development:
The Shopify CLI provides step-by-step assistance with the following crucial tasks as you initiate your app development:
- Login and Organization Selection: Shopify CLI facilitates the login process to your partner account and allows you to choose a partner organization effectively.
- App Creation and Code Connection: You are guided through the creation of your app on the Partner Dashboard, ensuring a seamless connection between your local codebase and the app you've just set up.
- Prisma SQLite Database Setup: The CLI assists in the creation of your Prisma SQLite database, streamlining the database configuration process for your app.
- Tunnel Establishment: A tunnel is established between your local development environment and the designated development store. This ensures a secure connection for testing and refining your app.
For a detailed understanding of the processes executed during the dev command, explore the Shopify CLI command reference.
Note of Caution:
To utilize Shopify CLI with a development store or Plus Sandbox store, ensure you are the store owner or possess a staff account on the store. Staff accounts are automatically generated the first time you access a development store using your partner staff account through the Partner Dashboard.
Step 3: Install Your App on Your Development Store
Proceed to install your app on your development store and effortlessly populate it with test products for app evaluation.
- Access the Preview URL: Ensure your server is active, then press 'p' to open your app's preview URL in a browser.
-
Installation Prompt: Upon opening the URL, you'll be prompted to install the app in your development store.
- App Installation: Click "Install app" to initiate the installation process on your development store.
-
Completion Confirmation: Congratulations! Your development store is now equipped with your newly installed app.
Next Steps
Continue advancing your app development journey.
- Explore Features: Visit the home page of your new app and click "Generate a product" to create a product for your development store.
- Tutorial Advancement: Follow the "Build a Shopify app using Remix" tutorial to delve deeper into enhancing your app's features using the Shopify Remix template and essential Shopify tools and libraries.
- Deployment and Distribution: Learn the intricacies of deploying and distributing your app for wider use.
App Extensions Compatible with Extension-only Apps
Explore the app extensions that seamlessly integrate with extension-only apps:
|
Shopify Interface Area |
App Extension |
Create Using |
Description |
|
Shopify Admin |
Admin Links |
Partner Dashboard |
Add quick links to your app from any page in the Shopify admin. |
|
Bulk Action Links |
Partner Dashboard |
Integrate bulk app actions into any resource page in the Shopify admin. |
|
|
Marketing Activities |
Partner Dashboard |
Empower users to manage promotional campaigns and marketing automation from the Marketing page. |
|
|
Subscription Link |
Partner Dashboard |
Customize the link allowing users to view subscription details in your subscription-enabled app. |
|
|
Checkout |
Checkout UI Extensions |
Shopify CLI |
Enhance the checkout flow with custom workflows and functionality at defined points. |
|
Shopify Functions |
Shopify CLI |
Inject custom code into crucial areas of the Shopify platform, such as checkout or cart. |
|
|
Post-purchase |
Shopify CLI |
Boost sales by presenting additional products for purchase after checkout. |
|
|
Customer Accounts |
Customer Account UI Extensions |
Shopify CLI |
Integrate functionality at defined points in new customer accounts. |
|
Flow |
Triggers |
Shopify CLI |
Connect your app to Shopify Flow, enabling events in your app to trigger workflows. |
|
Actions |
Shopify CLI |
Establish a connection between your app and Shopify Flow, allowing your app to receive data during workflow actions. |
|
|
Webhooks |
No |
Partner Dashboard |
Improve efficiency by letting Shopify Flow notify your app when your triggers are in use. |
|
Shopify Point of Sale (POS) |
POS UI Extensions |
Shopify CLI |
Add custom functionality at defined areas in the Shopify Point of Sale (POS) app. |
Enhance your extension-only app with these versatile app extensions.
Shopify App Store
With tailored suggestions and pertinent categories, the Shopify App Store stands as the premier destination for Shopify merchants to discover applications that propel their businesses. As an app developer, you can design apps for the Shopify App Store, enabling you to connect with millions of entrepreneurs worldwide and leverage Shopify's Billing API to formulate pricing models for the growth of your app development venture.
Getting your app approved
When you're prepared to launch your app on the Shopify App Store, it's essential to submit it to Shopify's App Approval team and ensure it adheres to all stipulated requirements.
- Review the comprehensive list of app requirements.
- Understand the app review process.
Determine if your app must fulfill protected customer data requirements.
- Familiarize yourself with our support requirements for app developers.
Charging for your app
Utilize Shopify's billing API to charge merchants a one-time fee for your public app or opt for charging them for an ongoing subscription.
For the initial USD 1,000,000 in earnings annually, you incur a 0% revenue share. Subsequently, you pay a 15% revenue share until the year's end, resetting to 0%.
- Explore details about using the billing API.
- Delve into insights about app revenue share.
Marketing and supporting your app
Once your app graces the Shopify App Store, employ marketing and support strategies to bolster its success. Accomplished developers promote their apps through Shopify and external channels, deliver exceptional customer service, and manage app reviews effectively.
- Gain advice on achieving success in the Shopify App Store.
Improving quality and getting promoted
Merchants seek apps that are user-friendly, secure, efficient, and problem-solving. Shopify augments discoverability for quality apps by incorporating indicators and promoting high-quality apps across various platforms, including the Shopify App Store. Apps meeting the criteria receive the esteemed "Built for Shopify" status, signifying the pinnacle of recognition and accomplishment.
Refer to "Built for Shopify" for insights into quality standards, achievements earning quality indicators, and opportunities for promotion.
Shopify App Store Ads
As an app developer, you can create search ads that aid merchants in discovering your apps within the Shopify App Store. These ads appear for merchants on the search results page, positioned above the organic search results.
Built for Shopify
As more merchants join Shopify daily, the reliance on apps to facilitate effective business operations grows. Shopify has established a comprehensive set of quality standards to guide app developers in crafting high-quality solutions—apps that are user-friendly, secure, performant, and address merchant challenges. These standards not only impact the merchant and customer experience but also contribute to the success of a merchant's store.
To assess compliance with these quality standards, your app undergoes evaluation based on specific, actionable criteria. Meeting all these criteria makes your app eligible for the esteemed "Built for Shopify" status. Along the journey, there are opportunities to earn smaller achievements, offering limited yet valuable benefits such as high-quality indicators on your app listing, special merchandising, or promotional opportunities across various Shopify surfaces.
Achievement Criteria
Explore the criteria necessary to earn "Built for Shopify" status and other associated achievements.
Built for Shopify Status
Built for Shopify status represents the pinnacle of recognition and achievement for an app. Apps with this status receive additional promotion in the Shopify App Store and are eligible for promotion on various key merchant surfaces.
Built for Shopify Highlight
A distinctive highlight denoting your Built for Shopify status is featured prominently on your app's listing page.
Built for Shopify Badge
Your app card across the Shopify App Store proudly displays the Built for Shopify badge, visible on the app listing, search results, and category pages.
Search Ranking Boost
Built for Shopify apps enjoy a higher position in Shopify App Store search rankings, providing increased visibility.
Eligible for Promotion on the App Store Homepage
Built for Shopify apps, they stand a chance to be recommended to merchants in the first collection on the App Store homepage.
Eligible for Discovery Through the Shopify Admin
Your app becomes eligible for recommendation in the "Picked for You" modal in the Shopify admin.
Eligible to Be Featured in Story Pages
Built for Shopify apps have the opportunity to be featured in story pages across various Shopify App Store surfaces, enhancing visibility and potential installations.
Apply for Built-for-Shopify Status
Achieving Built for Shopify status involves an application process. Apply for evaluation through the Partner Dashboard once your app meets all prerequisite achievement criteria. Only team members with the "Manage Apps" permission can submit applications.
The Shopify app review team assesses your application and provides feedback. Address any issues raised promptly. If a criterion is failed three times consecutively, your application is suspended, requiring a three-month waiting period before reapplication.
Losing Built-for Shopify Status
Built-for Shopify status can be lost if certain criteria are not consistently met. Learn more about the reasons for potential losses.
Other Achievements
As you progress toward Built for Shopify status, smaller achievements can be earned, offering unique benefits:
App Highlights
When your app fulfills relevant criteria, a highlight is displayed on your app listing, making it more noticeable for merchants. Criteria include:
- Built for your business: Works with the latest themes
- Built for your business: Use directly in Shopify admin
Note: It may take a few days for the highlight to appear after meeting the criteria.
Final Reflection
Customizing Shopify through extension-only apps offers a streamlined approach for developers seeking to enhance functionality without embedding app pages. By exclusively relying on extensions, these apps can be conveniently hosted on Shopify, leveraging a Shopify-populated app URL. This flexibility allows developers to create powerful customizations, seamlessly integrate with the Shopify ecosystem, and potentially list their apps on the Shopify App Store. The extensibility platform, built on app extensions and meta fields, ensures easy management, optimal performance, security, and upgrade-safe solutions, making it a preferred choice for efficient Shopify customization.
Contact Us
At Webinopoly, we excel at propelling growth-stage startups to the status of unicorns, creating cutting-edge tools for developers, and formulating open source products. If you're ready to expedite your path to success, reach out to us!