d
Topic
Christopher Lobay Shopify Employee shopify.com
Posts:
91
Last edited February 03, 2014
g
1
upvotes

New: Embed your app inside of Shopify! This post is outdated

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!

Product Manager at Shopify.
i
Replies
mrkschan Member
Posts:
2
February 04, 2014
g
2
upvotes

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

Kevin McPhillips Shopify Employee
Posts:
1
February 10, 2014
g
1
upvotes

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

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

Posts:
1151
February 10, 2014

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?

 

 

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
Christopher Lobay Shopify Employee shopify.com
Posts:
91
February 10, 2014

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

Product Manager at Shopify.
MrPunkin Member
Posts:
68
February 17, 2014
g
1
upvotes

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

Five Thrive Shopify Partner fivethrive.com
Posts:
13
February 18, 2014
g
1
upvotes

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 Lobay Shopify Employee shopify.com
Posts:
91
Last edited February 18, 2014

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

Product Manager at Shopify.
Five Thrive Shopify Partner fivethrive.com
Posts:
13
February 18, 2014

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

MrPunkin Member
Posts:
68
February 18, 2014

@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 Lobay Shopify Employee shopify.com
Posts:
91
February 18, 2014

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

Product Manager at Shopify.
MrPunkin Member
Posts:
68
Last edited February 18, 2014

@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 Member
Posts:
68
February 18, 2014

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

Posts:
5
February 19, 2014

Hi,

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

Christopher Lobay Shopify Employee shopify.com
Posts:
91
February 19, 2014

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

Product Manager at Shopify.
Five Thrive Shopify Partner fivethrive.com
Posts:
13
February 19, 2014

@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 Lobay Shopify Employee shopify.com
Posts:
91
Last edited February 19, 2014

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

Product Manager at Shopify.
Five Thrive Shopify Partner fivethrive.com
Posts:
13
February 19, 2014
g
1
upvotes

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. 

Posts:
46
February 24, 2014

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.

Posts:
46
February 26, 2014

@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 Lobay Shopify Employee shopify.com
Posts:
91
February 26, 2014
g
1
upvotes

@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!
Product Manager at Shopify.
Zuka Member
Posts:
1
Last edited March 01, 2014
g
3
upvotes

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?

 

 

Posts:
2
March 06, 2014
g
2
upvotes

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?

Posts:
2
March 06, 2014

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?

Posts:
15
Last edited March 10, 2014

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?

Creator of the free Improved Contact Form app used by over 4,000 stores.
Posts:
4
March 14, 2014
g
1
upvotes

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.

Posts:
4
March 14, 2014

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

Posts:
5
March 14, 2014

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.

Posts:
4
March 14, 2014

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 Shopify Partner evulse.com
Posts:
411
March 14, 2014

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?

Want an app but can't find what you need? Let us know we custom build apps for Free
Posts:
4
Last edited March 14, 2014

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 Member
Posts:
6
March 15, 2014

@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

 

 

Erick Member
Posts:
4
March 15, 2014

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?

Posts:
15
March 15, 2014

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.

Creator of the free Improved Contact Form app used by over 4,000 stores.
Erick Member
Posts:
4
March 15, 2014

Got it, thanks man :)

Five Thrive Shopify Partner fivethrive.com
Posts:
13
Last edited March 26, 2014

@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

Posts:
26
Last edited April 14, 2014

Is this affecting anyone else? Any workarounds?

Posts:
3851
April 14, 2014

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.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Posts:
40
Last edited April 25, 2014

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.

Posts:
15
Last edited April 25, 2014

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.

Creator of the free Improved Contact Form app used by over 4,000 stores.
Posts:
3851
April 25, 2014

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.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Posts:
15
Last edited April 25, 2014

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]

Creator of the free Improved Contact Form app used by over 4,000 stores.
Evulse Shopify Partner evulse.com
Posts:
411
April 27, 2014

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.

Want an app but can't find what you need? Let us know we custom build apps for Free
Posts:
1
May 19, 2014

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

Posts:
15
May 19, 2014

@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

Creator of the free Improved Contact Form app used by over 4,000 stores.
neglostyti Member
Posts:
1
May 28, 2014
g
2
upvotes

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.

Posts:
179
June 21, 2014

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

Streamline your shop and sell more http://www.suppleApps.com
Posts:
3851
Last edited June 21, 2014

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.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Posts:
179
June 22, 2014

Thanks Bill, makes sense now

Streamline your shop and sell more http://www.suppleApps.com
Evulse Shopify Partner evulse.com
Posts:
411
July 06, 2014
g
1
upvotes

Just something that would be very helpful is the ability to leave a review inside an embedded app. Would love to be able to trigger a modal that asks the user to leave a review for the app. Currently it's really hard to get users to review apps but if the ability to get this information quickly through the normal app flow would be highly beneficial for the app and to get real ratings.

Want an app but can't find what you need? Let us know we custom build apps for Free
Posts:
3851
July 07, 2014

That is excellent! And instead of written reviews, merchants should be able to just click a quick survey and answer some basic questions. Do you get value from this App? Does it save you time and money? Is the developer responsive to your problems or requests? And that should be posed only after at least a billing cycle or more. 

You're so right Carted... asking for reviews is uncomfortable at best since it reeks of begging. No reviews, no merchants install the App. Yet even with a lot of reviews you often still get sceptical merchants thinking it's all rigged or fake. Not to mention reviews that completely miss the point of the App and instead end up being positive (or negative) off-topic rambling. Some people even review Apps they've never used for even a minute just to spite. Yay for reviews... 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Posts:
4
August 13, 2014
g
1
upvotes

+1 for neglostyti's question

I keep getting a 404 error and can't find any information specific to private apps :-(

I have hosted the app on a HTTPS server, it doesn't show up at all. The redirection is automatic to this URL : https://bevyz-dev.myshopify.com/admin/apps/e015fecd46f47853bb618592586ad896/, which show a 404.

What am I missing ? Any clue will be much appreciated,

Regards,

Simon

Unai Member
Posts:
6
October 04, 2014

Hello,

I am testing embedded-app-example but when I install the app and open it, I get this error into the app:

A static HTML page can contain a simple dependency free script to set the top bar to a 500 server error. This page can be found in 'public/500.html'.

However, the app works if I generate a new rails controller and put "root :to" to it.

I would like to know why I get the error when try to use embedded-app-example unaltered source. I need understand this to know how works the embedded sdk and continue developing.

Lokranjan Shopify Partner
Posts:
13
June 10, 2015

hello All,

 

I have developed an app to administer a store. Our app uses Embedded App SDK. The problem is that if a user has more than one shops, he cannot open two instances of our app to manage two different stores in the same browser window since I store the current app in user's session. Now these two tabs will show the same content.
Could you give me some direction about how can we implement our app so that user can open two browser tabs and each tab corresponds to the correct app?

One solution I have tried  is as follows-

 finding the src attribute of  iframe in which my application is embedded,but i am not able to get the solution as it is not giving me src of iframe.

I have tried a lot to do so.But still i dont reached to the solution.

Please Help if anybody knows the solution.

Posts:
6
Last edited June 22, 2015

Hi Guys

This is my first hands on experience with Shopify and I'm developing a Embedded app, it would have a merchant backend and a front end page for customers to show in store.

I have successfully implemented the Merchant part and also added the front end page for shop as well but whenever a customer click on the link, shopify asks for my admin log in.

Did anyone had a similar problem or it would be great if anyone could anyone help with this issue.

 

Posts:
15
June 22, 2015

A front end page customers are supposed to see is not part of an embedded app. You should not use the embed API on that part of your app. Embedded pages are embedded in the admin area of Shopify. You probably want to use the application proxy or something like that to add virtual pages to the public side of the store.

Creator of the free Improved Contact Form app used by over 4,000 stores.
Posts:
6
Last edited June 22, 2015

Hi Dan

Thanks for the quick reply. Sorry I forgot to mention that in my previous post but yeah I have set up App Proxy for the front end page and added proxy url in one of the liquid templates as well, like this:

<li class="toolbar-customer"><a href="/apps/some-path?id={{ customer.id}}">Some text</a></li>

And in my app i have setup Proxy url like this:

path: apps/some-path

proxy url: some-domain/some-url

In server logs I can see that request is being sent to it when customer clicks on the link but it's just asking for my admin login. Once I login as admin, it correctly renders that page.

 

Posts:
15
June 22, 2015
g
1
upvotes

Did you put the Embed API (Javascript tag) on that page? That's what redirects the user to their admin login page.

Creator of the free Improved Contact Form app used by over 4,000 stores.
Posts:
6
Last edited June 22, 2015

That was it. I was rendering embedded apps layout inside my controller, causing it to ask for admins credentials. Thanks a lot Dan.

I have a different issue now though as it's not rendering my styles with the page. I have stylesheet tag for my stylesheet inside the template, it's rendering styles on local machine but not one the shopify store. Also I'm rendering front end page as a liquid template.

Any Suggestions?

Posts:
15
June 22, 2015

I'd suggest checking your browser's developer tools. If there's some reason the stylesheet is not being loaded, you'd find out there in the console or the network inspector.

Creator of the free Improved Contact Form app used by over 4,000 stores.
Posts:
6
June 22, 2015

Already checked and it doesn't. Do you have any idea if Shopify strips stylesheets and js for the proxy url pages?

Posts:
15
June 22, 2015

View the page source in your browser and find out. That would take a fraction of a second, where waiting for a stranger to see and reply to your post takes 41 minutes. :/

Creator of the free Improved Contact Form app used by over 4,000 stores.
Posts:
6
June 22, 2015

Thanks for the suggestion, I'm already trying to debug it :D. I'm using rails for development so it's rendering my application.css but it doesn't have any styles in it. Inline styles are working though.

Posts:
6
June 22, 2015

Fixed it so the issue was it was making relative path for my css file and hence looking in Shopifys assets for that css which wasn't present there.

Thanks for the help though Dan

Posts:
5
July 24, 2015

Hi

 

I would like to creat a shopify app which will perform some api calls to get the data.

I need some  technical quidelines how can create app and embeded in store. After installing the app, where we can write the logic for app..

 

provide me some inputs that would be great

Posts:
2
November 24, 2015

I spent about a day trying to understand this. I posted my experience here