New: Embed your app inside of Shopify!

[Christopher_Lob]

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:

• Facebook Store
• Grapevine Reviews
• Order Printer

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!

[mrkschan]

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&signat....

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"?

[Kevin_McPhilli1]

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

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

[standoutd]

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?

[Christopher_Lob]

@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.

[MrPunkin]

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

[FiveThrive]

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?

[Christopher_Lob]

@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.

[FiveThrive]

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

[MrPunkin]

@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?

[Christopher_Lob]

@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.

[MrPunkin]

@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.

[MrPunkin]

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

[Max_Popoff]

Hi,

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

[Christopher_Lob]

@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.

[FiveThrive]

@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.

[Christopher_Lob]

@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.

[FiveThrive]

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. 

[Ryan___Add_to_C]

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.

[Ryan___Add_to_C]

@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.

[Christopher_Lob]

@Ryan | Add to Cart Apps: 

1. We have no official stance on the design of your app. Feel free to make it look however you like, including attempting to match our Shopify admin styles. Be warned, however: the admin styles are changing and committing yourself to match the admin may make for some work in the near future.
2. We're currently thinking about ways to bubble up data about currently logged in user. Doing this in the EASDK might be the solution, but it wouldn't be as useful as a backend version. Definitely noted, though. Thanks for your feedback!

[Zuka]

Hello Shopify,

I just tried running the embedded example app but stuck with a "Loading..." status after clicking on the app. I have tried few changes here and there but nothing has helped. 

What should be the settings for the example embedded app? Do we need to set the "App Urls" or "Shop admin links" in any particular way?

[Improvely]

It appears Safari does not allow you to set cookies from an iframe, including session cookies. That means you cannot embed an app that has a login form, or even multiple pages unless you pass around state information like the shop name in every URL and every form.

There's no workaround for that, is there?

[Improvely]

It appears that Safari (Mac/iPhone/iPad) does not allow you to set any 3rd-party cookies from an iframe, including session cookies.

That means you cannot embed an app that has a login form, password, or any other kind of state information. The only way to have multiple pages is to pass around the shop name in every link and every form, and assume nobody will try to access someone else's account by simply changing the URL.

Is there a workaround for that?

[Dan_Grossman]

Safari blocks 3rd party cookies.

Embedded apps cannot set cookies, even session cookies to enable basic features like user logins and retaining state between page loads.

Is there any official advice for working around this other than passing around session tokens in URLs or telling Mac/iPad/iPhone users to switch browsers?

[Frank_Szendziel]

I am getting the same problem. Can't see why the Init is not getting fired, but Loading... is all that happens. IE11 ASP.NET MVC, VS2013, SignalR disabled.

[Frank_Szendziel]

~~I am getting the same problem. Can't see why the Init is not getting fired, but Loading... is all that happens. Stuck on Loading...

 IE11 ASP.NET MVC, VS2013, SignalR disabled.

[Max_Popoff]

Frank, I think that could mean your Shopify app is not firing js code: ShopifyApp.init(...). Try to debug.

Also, it makes a sense to allow customers to bypass Embedded mode, so for example Mac Users could use your App.

[Frank_Szendziel]

Hi Max

Thanks for the swift response. I was guessing something similar. I put an alert before the Init but this does not show. Debugging does not show any errors. No unhandled exceptions.

I am launching the App from the Dev Shop's 'Apps' section.

Any clues much appreciated. (I have to pop out for a while and I will check this forum in a few hours)

Frank

[Evulse]

I'm not sure what the issue is here with Safari our App works perfectly with sessions. Are you using https:// with a valid certificate?

[Frank_Szendziel]

Hi sorry for any confusion but this is not related to the Safari issue. It was related to the previous post, where Loading does not appear. Https is a requirement?

Ah I see now...http://docs.shopify.com/embedded-app-sdk/getting-started

I overlooked that part. I will check it later, but I think that will be the issue 🙂

Many thanks

[pav]

@Frank Szendzielarz

For the record, I had the same "Loading" issue as well. I fixed it by placing a call to the 
ShopifyApp.Bar.initialize() function within the ShopifyApp.ready() listener. I followed the instructions on this page: http://docs.shopify.com/embedded-app-sdk/initialization

[Erick7]

Hi, I'm playing out with the embedded sdk with a sample app but after the authentication inside the Shopify dashboard I get this console error: 

Refused to display 'https://my-url/login?shop=my-shop&signature=signature-here&timestamp=some-numbers';; in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

I got the app on heroku so it does have https enabled. Do you guys know what might be causing this issue?

[Dan_Grossman]

The error explains the issue. Your app sets the X-Frame-Options header to SAMEORIGIN, which means the browser should refuse to show that page inside a frame on a different site. The Shopify Embedded App docs mention this:

http://docs.shopify.com/embedded-app-sdk/headers

So you'll need to not send that header.

[Erick7]

Got it, thanks man 🙂

[FiveThrive]

@Dan Grossman : Did you get a response on this? I'm running into this issue. App only fails on Safari and I'm including the correct X-Frame-Options

[Daniel_Ristic]

I'm currently developing an embedded app and it seems like there is a double scrollbar appearing in the browser: one in the inside of the frame and one in the outside (see attached screenshot).

Is there a way to get rid of the external scrollbar as it's messing with my alignments?

[Recomatic]

Is this affecting anyone else? Any workarounds?

[HunkyBill]

I only see one scrollbar on my embedded apps... and it is almost always just 5-10 or so pixels of height that it scrolls. I have yet to find the guilty party in my CSS.

[Jack_Lee3]

I've completed a large new app earlier this week, pretty excited about it, trying now to get the app into BETA test, and looking forward to working with Shopify, but the app  runs on an https, secure server and it cannot (very large third party will not sign off on this) run in an frame. 

Development started in February, so this pre-dates the frame. I had emailed Shopify on February 12th I was going to work on this.

I've opened tickets with support on this issue (643277) and (642362) and looking forward to a response.

[Dan_Grossman]

Unless you took the time to switch this from "disabled" to "enabled", then your app is not embedded in a frame.

That Shopify offers this new option has no effect on any of the work you've already done.

[HunkyBill]

I have not seen any ill-effects of running my HTTPS in an iframe. Not sure why someone would raise a stink about that. Probably a bad decision there since embedded pattern is a lot less "brain switching" to accomplish same thing.

[Dan_Grossman]

You must be looking at the wrong screen. It's the "edit app settings" button. Even if I click "create a new app" right now, this option is on the screen.

This option didn't exist *before* February. That's when the Embedded SDK was first released for optional use.

[In reply to a deleted post]

[Evulse]

Also I'm not sure what happens if you disable that setting and still use the EASDK javascript. I'm guessing it would still try and embed in to an iframe. This would be expected behaviour as the JS is EASDK only from my understanding.

[Kathy5]

Hi Shopify,

I am having the same issue that @Zuka posted about the embedded-example-app just getting stuck with "Loading..." at the top.  I have not seen any reply that fixes this for me.  How can I get the app working?

Thanks

[Dan_Grossman]

@Kathy, "Pav" above answered that question. If you see "Loading..." it's because you haven't called ShopifyAppBar.initialize() in your app. Make sure you've done everything in these instructions:

http://docs.shopify.com/embedded-app-sdk/initialization

[neglostyti]

Hello all, 

I'm trying to build Embedded Private App and something I'm missing. As it is instructed here, I created App, got API key. Then a very simple page with content:
 

<head>
  <script src="https://cdn.shopify.com/s/assets/external/app.js"></script>;
  <script type="text/javascript">
    ShopifyApp.init({
      apiKey: '1e7192ab8e2cc7f2fafbc4b8eb2effcf',
      shopOrigin: 'https://my-dev-appshop.myshopify.com';,
      debug: true
    });
  </script>
</head>
<body>
Private app
</body>

And I'll I get by visiting this page is redirect to my shop with screen.

The page you're looking for can't be found.
Try a search instead.

Redirect URL is

https://my-dev-appshop.myshopify.com/admin/apps/1e7192ab8e2cc7f2fafbc4b8eb2effcf/ 

What am I missing? It's my first experience with shopify at all, so maybe I missing all understanding how EASDK  works. I tested it from localhost and from my domain with SSL. Thank you for any tips.

[Marius_from_Sup]

Hello,

The app Callback URL is used both when installing apps from App Store (when we have to redirect to Shopify), and when loading an already installed app from Admin. 

How do you differentiate between the two different cases, besides doing an internal call to see if we know the app is already installed in this shop? (this useless call has to be made for every app load, instead of continuing with proper action, which would be faster for users too)

Should Shopify add "install" and "embed" parameters for these cases?

Thanks

[HunkyBill]

The callback is only used when the App detects there is no valid session for usage. At that point you initiate the oAuth cycle and the callback is invoked. At that point a session is created in your App and you do not need to invoke the callback cycle any further since you're checking for a valid session.

So yes, you're right, it is up to you to determine if a valid session exists, internal to your App but there are no useless calls involved in this pattern.

[Marius_from_Sup]

Thanks Bill, makes sense now