CSS Framework for Shopify Embedded Apps

I’ve been working on a custom Shopify app for our Stitch People store and was recently looking for a way to make my app look like the rest of the Shopify admin area. Using the Embedded App SDK (EASDK), introduced in February 2014, the app gets loaded within an iframe, sandboxing the whole thing from Shopify’s styles and other assets. After looking around the forums a bit, the only thing I found was a short outdated thread about CSS, with no resolution. It mentions the possibility of a Widget Kit, but I haven’t been able to find anything else on the subject.
I did come across a project on Github–the Shopify Embedded App Frontend Framework by microapps, a Shopify dev shop with a few successful apps already in the store. It has several files and a few directories, but the only file to worry about is the seaff.css file. Include it in your app and then look at docs.html for some examples on how to use the framework. So far so good for me. I haven’t used all the different elements yet, but what I have used has looked great. If you’re building a Shopify app, I’d definitely give it a look.

This Post Has 3 Comments

  1. I’ve come to all the same conclusions. I’m trying Shopify Embedded App Frontend Framework now. Did you consider using Bootstrap?

    1. I did consider Bootstrap, but ultimately went with something that would feel more native to Shopify. I’m a little OCD that way.

  2. It would be helpful if your blog post had a date on it.

Leave a Reply

Close Menu