The Shopify 2.0 is the perfect way to bring your Shopify store into your app! With added control over your store, you have more freedom with your products in your app than ever before!
​

The Shopify 2.0 feature is an amazing upgrade to our pre-existing Shopify feature and with it you can not only bring in your Shopify store’s products, but you have control over how they’re displayed in your app. You are also able to create custom collections of items, as well as add actions such as the ability to call in for a sold out product’s future availability. 

As we previously mentioned, the Shopify 2.0 feature not only allows you to bring your Shopify store’s products into your app, but also gives you control over how they’re displayed within your app. With this added functionality there’s some additional steps that need to be taken in order to fully sync up your Shopify store, but don’t worry we’ll go through all of that! First things first we’ll go over what you need to do on Shopify’s side of things.

Before you can bring your Shopify store into your app there’s a couple of things that need to be done first.

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 Collections and the Products that You Want To Sell In Your Store 

You’ll also need to set up at least one collection in your Shopify store to put products into:

Once you have created at least one collection, you can begin setting up the items that you want to sell in your store. Make sure you assign those products to at least one collection 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 plan, made your store public, and have set up your products and collections you’re now ready to bring your Shopify store into your app!

Now that your store is all set up, we’ll go over how to bring it into your app! 

Step 1: 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 2: 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”.

Congratulations! You’ve now synced your Shopify store with your app! Next we’ll go over the amazing control that you have over how your products are displayed within your app.

Previously the only control that you had over your Shopify store was the ability to switch between a couple of layouts for the entire store. Now with the Shopify 2.0 feature you have much more control over this aspect of your store! With the Shopify 2.0 feature you can now set up custom sections of products. Here’s how to do that:

Step 1: Click on “Add New Section”

If you would like to create a new section in your app’s Shopify store click on “Add New Section”.

This will take you to the Section creation screen. You can think of sections as custom collections made up of the products that you’ve already set up in your Shopify store.

Step 2: Adjust the Section’s display settings or add items to it before doing so (it’s up to you)

You may want to add some items to the section before adjusting its display settings, but you can always set these up before adding items if you want, it’s completely up to you and everything that you set up can be changed at a later time if you’d like.

How to Add Items to your Section

If you would like to add items to your section first, then click on “Add Items” in the Content section. You can always do this after you’ve set up the display settings for the section if you’d like.

You’ll see three options:

Product allows you to add either one complete collection from your Shopify store, or a group of individual products from different collections.

Action allows you to add an action item to that section using the Action Builder in our system. If you would like to learn more about the Action Builder and the action items that you can create with it, we encourage you to check out our dedicated article on that which you can find here.

Custom Group allows you to create a section that holds multiple complete collections from your Shopify store.

You can choose to display one or all three types of items in the section, it’s completely up to you what you’d like to include.

Once you have selected the item type that you’d like to add to the section you can start adding single products, or complete collections by clicking on the box next to each item:

You can remove items just as easily by clicking on those boxes again:

How to Adjust the Display Settings of the Section

If you would like to add items to your section first, then click on “Add Items” in the Content section. You can always do this after you’ve set up the products in the section if you’d like.

There’s a number of display settings available for your Sections:

Section Title

The Section Title is what will display above the section. 

The title is completely optional and you can show or hide it with the “Display Title” toggle.

Thumb Shape and Display Tag

The Thumb Shape gives you four display options for your product’s thumbnails, and the Display Tag gives you a couple of options for your product names.

The four options you have for Thumb Shape is Square, Circle, Portrait, and Landscape.

Here are some examples of what each shape looks like:

The Display Tag toggle allows you to turn the product names on and off:

The Inside Thumb and Outside Thumb options toggle the name displaying inside and outside of the product thumbnail:

Section Height and Autoplay

The Section Height allows you to change the height of a section, and the Autoplay controls allow you to control how fast the product thumbnails are cycled through.

For most of our thumbnail shapes you can pick between 20% and 60% at 10% intervals:

This changes the look of your Sections drastically:

Toggling the Autoplay off will mean that the products in your store won’t automatically cycle through, though people will still be able to scroll through them using their phone’s screen. You can also adjust the speed at which items are cycled through with the “Delay” option.

Step 3: Click “Update”

Once you have completed setting up your Section click “Update” and it will be added to your app’s Shopify store.

Congratulations! You now know how to add sections to your app’s store and are quickly on your way to becoming the master of your domain! ...or at least the Shopify store in your app. With this knowledge you’ll be making a dynamic store with amazing products in no time!

Having worked with apps for years, we’ve learned a thing or two. So, to both help your app stand out and accomplish your primary goals, here are some tips you should consider.

Pro Tip 1: You Can Pull Items From Multiple Collections

Want to showcase your top selling items across your store? You can create a custom group of products made up of items from different collections in your Shopify store. Just add the items individually to your “Top Sellers” (or whatever you choose to call it) collection.

Pro Tip 2: Play Around With The Different Display Settings Of Your Store To Find What Works Best For You

Thanks to the fact that you can have different visual settings for each section, we encourage you to play around with their display settings so that you can find the best look for your store.

In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:

Still have questions? No problem! Reach out to us and we’d be happy to help :)