The Shopify 2.0 plugin is a simple way to connect your Shopify account with the app. Once this plugin has been added, you can sell Shopify products directly from your mobile app.

When an app user adds a product or service to their cart, they’ll automatically be sent to your Shopify checkout screen.

The tutorial below will walk you through the step-by-step process required to sync your Shopify store with your mobile app.

Note: These instructions require an active Shopify account. So if you don’t have one already, you need to sign up before you can proceed.

Before you do anything within the app builder, you need to get organized in Shopify. Sign in to your Shopify account and follow the instructions below:

Collections let you group your products into categories. This makes it much easier to manage through your app.

Next, you’ll be prompted to give your collection a name and description. You also need to need to change the collection type to “Manual” (it’s checked off as “Automated” by default).

Save your new collection to continue.

Next, you need to make sure that the app builder can find your products that fall within your new category. Staying in Shopify, take the following steps:

In this case, I’ve added the product to the “Sample Collection,” which we created back in the first step.

Finally, you need to make sure you change the product status to “Active.” This ensures that the app builder will find the product.

Click “Save” to proceed.

Make sure you repeat this step for all products that you’ve already created.

Once your products have been updated appropriately, click “Apps” on the left side of your Shopify dashboard. Then select “Manage private apps” at the bottom of the page.

Click “Create Private App” on the next screen to continue.

Creating a private app in Shopify gives you a token API key, which ultimately gives your mobile app access to your Shopify account.

After you name the private app and enter the developer’s email address (or your email address), scroll to the bottom of this page until you reach the “Storefront API” section.

Check the box that says, “Allow this app to access your storefront data using the Storefront API.”

Leave all of the Storefront API Permissions on default. Then click “Save.” A popup will appear confirming your choices. Click “Create app” to continue.

Once this finishes loading, Shopify will provide you with a token key that you’ll enter into the app builder. You can find this token at the bottom of the Storefront API Permissions on that same page:

Copy the token.

Head back to the app builder dashboard and open the Shopify 2.0 plugin. For the store name, enter the exact same as your Shopify store.

This is what appears in the URL of your Shopify account before myshopify.com.

Next, paste your access token:

Once the token and store name is validated, you’ll see a new option appear in the app builder called “Sections.”

Click the “Add a New Section” to proceed. This is ultimately where you’ll be adding the different products that were previously created in Shopify.

At the bottom of this screen, you’ll see a heading called “Products, Actions, & Collections.”

Click “Add item” and then select “Product” from the drop-down menu.

This will bring you to a page where you’ll see the different active products in your Shopify store. You should also see the collection (or collections) that you’ve created as well.

Rather than adding products individually, you can just add the collection to your app. This will pull all of the active products within that collection into your app.

Then you can customize the collection page by adding images and other information to make it your own. You can add titles to your collections, display section dividers, change the size of the image icon, and more. All of this can be managed within the WYSIWYG editor. You can play around with these settings until you’re happy with the look of your product page.

Repeat this process for all of your collections.