New: Embed your app inside of Shopify!

Retired Boards Appdev Store Design
1

Embedded Apps are the future of Shopify Apps

Our new Embedded App Software Development Kit allows you to improve your app’s user experience by embedding it directly inside the Shopify admin.

The SDK enables simple and powerful communication between your app and Shopify.

Access and customize many native GUI features, and create powerful integrations previously impossible on the platform.

Learn more about the Embedded App SDK >

Why use the EASDK?

To delight your customers

Merchants love to use apps that simplify their user experience. This SDK will give you tools to better interact with Shopify merchants, giving all customers the same great in-admin app experience.

To get ahead of the curve

This is the future of apps on Shopify. Eventually, embedded apps will become the expected standard for our App Store. Using the SDK will allow you to get ahead, and experiment with new ways to give merchants what they’re looking for.

To be rewarded

By developing embedded apps for the Shopify App Store, you could qualify for additional revenue share as part of our upcoming app verification program. This program will highlight the best apps in our store that meet a set of requirements – including the use of the Embedded App SDK.

In return for meeting the requirements, you’ll be offered prime placement in the App Store, a certification badge, and unique marketing opportunities. Keep an eye out for more details coming soon!

Who’s using it?

Many of Shopify’s apps are already embedded:

How do I start using the Embedded App SDK?

In your Partner Dashboard, select the app you’d like to enable with the Embedded App SDK. Click the “Edit app settings” button, then click the “Enabled” radio button.

Start using the EASDK now!

1 Like
2

By running https://github.com/Shopify/embedded-app-example and clicking the embedded app inside the APP tab of Shopify admin, my browser is redirected to https://xxx.myshopify.com/admin/apps/844102947dbaef5c7ae6021f66195bae/?shop=xxx.myshopify.com&signature=7e0eab964a90e8324540b1b0fc2ea668&timestamp=1391487132&admin=1.

Inside embedded-app-example, there is a corresponding visit record with the following GET params.

{"shop"=>"xxx.myshopify.com", "signature"=>"7e0eab964a90e8324540b1b0fc2ea668", "timestamp"=>"1391487132", "admin"=>"1"}

How could we verify the access? Where is the documentation about this “signature”?

2 Likes
3

This is part of the oauth handshake with Shopify. You can find the documentation here:

http://docs.shopify.com/api/tutorials/oauth

1 Like
4

Eventually, embedded apps will become the expected standard for our App Store.

I gather this would not apply to cross-channel tools like ShipStation and StitchLabs?

5

@standoutd: We’re encouraging every app developer to adopt the EASDK if they can. In fact, many of our partners that have cross-platform products are already developing versions that use the EASDK.

6

Can private apps use the EASDK, or is this only for public apps?

1 Like
7

I am about a week away from beta testing two apps that are built with the EASDK. One thing I am interested in is if Shopify might provide a standard CSS file so our apps can look like the Shopify admin area (text size, input styles etc.)

I typically do the styling last on my apps after the functionality is complete.

Any thoughts?

1 Like
8

@MrPunkin: You bet! The EASDK can be used with public or private apps.

@Jim: We’re not currently providing a CSS framework for embedded apps at this time. The admin design is currently in flux which doesn’t allow us to provide and maintain a separate stylesheet that represents a stable design. However, this is something that we’re considering for the future.

9

Thanks for the quick reply! Maybe I’ll put something together out on github once I complete it.

10

@Christopher: How do we go about gaining access to our app inside the iframe when it is a private app? My experience leads me to believe private apps don’t show up as “installed” in the apps page, and thus have nowhere to click to load the app’s iframe content. That, along with seemingly no way to setup app proxies for private apps, leads me to believe that there is no way to integrate private apps into Shopify’s admin at all. Am I missing something?

11

@MrPunkin: You’re correct. True private applications do not use OAuth and do not get listed in the Shopify admin, however you can create an App in your partners area, never publish it to the App store and only allow it to be installed on whichever shops you please. These Apps will be listed in the admin and will have full access to the EASDK.

12

@Christopher: Aha, that makes sense. Thanks for taking the time to respond and clear this up!

One final question regarding this. How do you install an unpublished app? Is there a URL syntax that will allow it to be installed? Our main store unfortunately isn’t our developer store and it appears there is no way to migrate it from what I have read.

13

I believe I have answered my own question. That seems to simply be part of the OAauth handshake that happens.

14

Hi,

I’m gonna to create new Embedded App for Shopify. Can I make it look like any other shopify’s admin page?

15

@Max Popoff: You can make it look however you please. The design of the app is completely up to you. I would suggest taking some inspiration from our current admin design, but each app is very different – one design style won’t always work for everything.

16

@max, absolutely! Its just a matter of CSS. You can find out what styles Shopify uses by inspecting the other pages of a shop’s admin area and then implementing them in your apps stylesheets. I’ve done this myself but won’t be submitting my new apps until the end of the week otherwise I’d list an example here.

17

@Jim Sidler: Be cautious if you’re referencing the Shopify stylesheet directly. I would not recommend that approach as there is no guarantees that the stylesheet will continue to support the markup you have written. Like I mentioned earlier in the thread, the admin design is always changing.

18

Sorry, I must have been unclear. I am not referencing the Shopify stylesheets directly. Rather, I am using Chrome’s developer tools to inspect elements in the shop admin area to get the specific styles and then adding them to my own stylesheet.

1 Like
19

We would also like to know Shopify’s stand point on using very similar or exact css on some elements. For instance all your button styles and table styles are very distinctive and would love to bring these in to the apps we develop especially though EASDK. We believe even a small style change between app and shopify triggers an unneeded fight/flight reaction to end users that we would love to avoid.

20

@Christopher Lobay: One thing we would love to be available by the EASDK is the name/details of the logged in admin user. This would allow any apps we make the ability to record this against the app activity. This is a direct request from quite a few of our App users and we agree it would be a great solution.