In this article we’ll give you a run down of how to build an e-commerce app in our system, including the best features to use in our system for your app! The first thing to consider is which service you should use for your online store.

When looking for a service to use for your online store, we recommend that you use Shopify. Shopify is an easy to use system which does all of the heavy lifting for you which allows you to focus on the products that you’d like to offer in your store, and with our Shopify 2.0 feature you can seamlessly bring your store’s content into your app.
​
Now let’s go over how to build an e-commerce app in our system:

Before you can bring your online store into your app you’ll need to create a Shopify store (if you don’t already have one). Once you have set up a Shopify store make sure the following has been done:

Make Sure Your Store is on a Paid Plan and is Public

Your store will need to be upgraded to one of Shopify’s paid plans, as well as made public otherwise you won’t be able to bring it into your app.

Set Up the Products That You Want To Sell In Your Store and Organize Them Into Collections

After you’ve set up all of the products that you want to sell in your Shopify store, you’ll need to set up at least one collection in your Shopify store to put products into.

Once you have created at least one collection, make sure you assign the products that you want to sell to their corresponding collections so that you can control how they’re displayed in your app once you tie your store to our system.

Now that you have moved over to a paid with Shopify plan, made your store public, and have set up your products and collections you can bring your Shopify store into your app!

Next you’ll need to bring your Shopify store into your app using the Shopify 2.0 feature. Here’s how to do that:

Step 1: Add The Shopify 2.0 Feature To Your App

Before you can bring your Shopify store into your app, you’ll need to add the Shopify feature to it. If you haven’t already done so, add the Shopify 2.0 feature by going to our Feature Marketplace:

Once you’re at the Feature Marketplace, search for the Shopify 2.0 feature:

Next, click “+”:

Then give it a Title and click “Add”:

Step 2: Grab Your Store Name and Enter It Into the “Store Name” Field

The store name is what you set up when you first created your Shopify store. So if your store’s name was:
​
peterparkerindustries.shopify.com

Then your store name would be “peterparkerindustries”. Take this and enter it into the “Store Name” field and click “Done”.

Step 3: Generate An Access Token For Your Shopify Store

Next you’ll need to generate an access token for your Shopify store and enter it into the “Access Token” field, don’t worry, we’ll go over how to generate the Access Token.

How To Generate Your Access Token

In order to generate the access token for your Shopify store you’ll need to go back to the Shopify control panel and click on “Apps” in the side menu on the left.

Next click on the “Manage private apps” link.

Then click on “Create a new private app”.

Give the token a name in the “Private app name” field and enter your email address in the “Emergency developer email” field of the App Details section.

Once that’s done scroll down to the bottom of the page and check the box next to “Allow this app to access your storefront data using Storefront API”.

Then click “Save” at the bottom of the page.

A window should pop up asking you to verify that you want to create the new private app. Go ahead and click “I understand, create the app.”

In the next screen scroll all the way to the bottom and you’ll see a box with your storefront access token. 

Copy and paste it into the “Access Token” field then click “Done”.

Once this is done the products from your Shopify store should appear in the Shopify 2.0 feature. If you would like to learn more about the Shopify 2.0 feature, we encourage you to check out our dedicated article on it here.

Once you have set up your Shopify 2.0 feature, you’ll want to set it as your app’s Home Screen Feature so that it’s the very first thing that users see when they open your app. Here’s how to do this:

Step 1: Click on the Hamburger Menu at the right of the Feature Content Editor

Step 2: Select “Set As Home Plugin”

Now that you’ve brought your Shopify store into your app and have assigned it as your home screen feature, here’s some tips on optimizing your Shopify store for use in your app.

Pro Tip 1: Use the correct image size

When switching through the different image shapes for your products, we recommend that you use images that are 750x1043 px, unless you use the “Full Width” setting. If you decide to use the Full Width setting, then we recommend you use an image that’s 1200x675 px.

Pro Tip 2: App Version vs. Mobile Version of Your Store

You may notice that your Shopify store looks different when accessed in your phone’s browser and when accessed in your app. Keep this in mind because your app is different from a mobile website, and because of this, the app version of your store has been optimized for use within your app.

Pro Tip 3: Use Shopify’s Control Panel To Manage Your Products & Collections

When you’re ready to add new products, or adjust the information for pre-existing products, you’ll do this in the Shopify control panel for your store. If you make a change to a pre-existing product’s information or images, those changes will be pulled into your app through the Shopify 2.0 feature.

Along with the Shopify 2.0 feature we recommend that you build out your app using additional features found in our system so that your users can have a more complete app experience. Here’s some features in our system that we recommend you use:

If you have a staff working for you, you can use the People feature to help your customers put a face to the name of the person that was helping them with their order, or answering their questions. You can set this up as a “Meet The Team” type of feature.

If your business has a physical location, or locations, you can use the Locations feature to provide your customers with directions to your physical location(s).

If your company has sales, special events, or new product rollouts during the year you can use the Events Feed or Events Manual features to let your customers know of these upcoming events.

If you have a couple of famous clients that you’d like to showcase, you can use the Image Gallery feature to let your customers know about current and previous clients that you’ve worked with.

If you would like to include an FAQ section to your app you can use the Action Items Folder to give your customers a place where they can answer their questions quickly without needing to reach out to you.

With the Community Wall,you can give your customers a way to reach out to you with questions, talk amongst themselves, and let your customers know about new product coming in or being restocked.

You can use the Contact Us feature as a way to provide your customers with your contact information, as well as give them some information about who you are as a business.

Along with these great features you can also showcase your social media pages with our social media features. You can use the Facebook feature to point your customers to your Facebook page. You can also use our Twitter feature to point your customers to your Twitter feed and our WebView feature to point your customers to your Instagram. You can also use the Folder feature as a “Social Media” folder to house all of these features within so that when your customers tap on that folder they’ll be brought to all of your social media features.

With the Share App feature you can give your customers a way to share your app with their friends and family which is a great way to organically grow your customer base!

If you decide to use your Shopify store as your home feature, then the best way for users to access the other features within your app is through the Side Menu. Here’s how you can make these features available in the Side Menu:

Step 1: Go To The Side Menu Page Found Under The Design Tab

On the left-hand side of the App Dashboard you’ll see a menu with a couple of options, the “Design” tab being one of them. Click on that to expand it then click on “Side Menu” to access the Side Menu’s controls:

Step 2: Click On “Add Existing Feature” In the “Menu” Section Of The Side Menu Page

Clicking on “Add Existing Feature” will bring up a list of all of the features that you’ve built for your app. Select the feature(s) that you want to add to the side menu by selecting the feature and clicking “Apply”.

This will add these features to your app’s Side Menu so that users can quickly and easily access them as they’re shopping in your app.

Congratulations! You know have all of the steps needed to build an e-commerce app for your business! Still have questions? No problem! Reach out to us and we’d be happy to help :)

Keywords: E-commerce; Ecommerce; Shopify