Build a VIP Management App in Shopify

Table of Contents

1. Introduction
2. Building a Sample App in Shopify
3. Using Shopify's Admin Extension
4. Creating an Admin Embedded App using Gadget
5. Monitoring Q&A
6. Overview of the Sample App
7. Creating VIP Programs
8. Admin Extensions in Shopify
9. Building the Gadget App
10. Connecting to Shopify
11. Creating Custom Data Models
12. Using Actions and Blocks
13. Updating Meta Fields
14. Running Custom Code
15. Building the Admin Front-End
16. Using React Hooks in Gadget
17. Fetching Data from Shopify
18. Updating VIP Programs
19. Testing the App
20. Conclusion

Building a Sample App in Shopify

In this article, we will walk you through the process of building a sample app using Shopify's Admin Extension and Gadget. We will start by creating an admin app in Shopify that uses the admin action and admin block extensions. Then, we will build an admin embedded app using Gadget for additional functionality.

Introduction

Hi everyone! My name is Riley, and I am the developer advocate here at Gadgets. Today, I'm going to show you how to build a small sample app in Shopify that utilizes Shopify's admin extension. We will also build an admin embedded app using Gadget for additional features. If you have any questions, feel free to ask using the Q&A box in Zoom.

Building a Sample App in Shopify

I am going to start by showing you what we will be building. We have created an embedded app in the Shopify admin for creating and managing VIP or loyalty programs. These programs include different levels such as gold, silver, and platinum. In our sample app, we will be adding a discount code and relating it to a VIP program. This will allow us to tie a discount code to a specific VIP program.

To build this app, we will be using Shopify's admin extension. This allows us to build blocks and actions right into Shopify's admin. We will also be using Gadget to create an admin embedded app for additional functionality.

Using Shopify's Admin Extension

Admin extensions in Shopify are similar to checkout extensions. They allow you to build blocks and actions directly into Shopify's admin interface. Currently, admin extensions are available on select pages, including orders, products, and customers.

In our sample app, we will be using the admin action extension and admin block extension to create and manage VIP programs. The admin block extension will be embedded directly into the customer page, while the admin action extension will provide additional functionality.

To create a VIP program, we will use the embedded Shopify admin app. This app will be a data model in Gadget that stores information about each program. We will then generate a JSON meta field on the Shopify shop model using the records in our VIP program data model. This meta field allows us to run custom actions and display information about the customer.

Creating an Admin Embedded App using Gadget

Now let's start building our admin embedded app using Gadget. We will first create a new app in Gadget and connect it to Shopify. By selecting the Shopify starter template, we can easily connect to Shopify and sync our Shopify data with Gadget. This includes selecting the necessary scopes and data models that our app will have access to.

Once our app is set up and connected to Shopify, we can start building the front end. Using React components from Shopify's Polaris, we can create the layout and functionality of our app. We can also use Gadget's useFindMany and useAction hooks to interact with our Gadget database and perform actions on our VIP programs.

With our front end code in place, we can now build our admin extensions. We will create an admin action extension and an admin block extension. The admin action extension will allow us to add customers to VIP programs, while the admin block extension will display the customer's VIP program on their page.

To sync our Gadget model with the meta field in Shopify, we will use the Gadget API to make GraphQL requests and update the necessary fields. This will ensure that our app is always synced and up to date with the customer's VIP program.

Conclusion

In this article, we have walked you through the process of building a sample app in Shopify using the admin extension and Gadget. We started by creating an admin app in Shopify and connecting it to Gadget. Then, we built an admin embedded app using Gadget for additional functionality.

By utilizing the admin extension and Gadget, we were able to create and manage VIP programs in the Shopify admin interface. We also learned how to sync our Gadget model with meta fields in Shopify, allowing us to store and display customer data.

Overall, building an app in Shopify using the admin extension and Gadget provides a powerful and flexible solution for creating customized functionality and enhancing the customer experience. Whether you are creating VIP programs, managing discounts, or implementing other custom features, this combination of tools will help you build a successful app.

Thank you for joining us on this journey of building a sample app in Shopify. We hope you found this article helpful and informative. If you have any further questions or require additional assistance, please feel free to reach out to us.