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.

Shopify, ShipStation, and Stamps.com

When we launched the DIY Stitch People Book back in October, we didn’t realize how quickly it would gain traction. Thanks to an active Pinterest crowd, some Facebook ads, and a natural rise in organic search traffic, we’re selling more books than we expected. And as you might expect from two people who have never run a business that consistently ships physical products (sporadic portrait orders don’t count), we found ourselves in need of a better way to manage the shipping/fulfillment aspect of Stitch People.

A typical day at our house

A typical day at our house

We’re avid podcast listeners, so we’ve heard a lot about Stamps.com recently. We signed up for an account and started printing postage at home. It was a pretty slick process and a major improvement over going down to the post office to ship books, but it still didn’t tie in directly with our Shopify store. I kept searching.

I thought I had a solution when I found the Stamps.com Shopify app. I went down that rabbit hole and eventually learned that unless you’re running the Windows client of Stamps.com, there’s no way to integrate it into Shopify. As a Mac user, I was out of luck.

Next I called Stamps.com support and asked if there was anything else I could try. The guy referred me to ShipStation, a company Stamps.com recently acquired. They had a way to integrate Shopify and Stamps.com without using the Windows client, he said. And it turns out he was right.

Ship Station

ShipStation is perfect for us. We can log in to ShipStation, see the latest orders, print labels according to a preset we configured (Media Mail, 13 ounces, etc.), and the tracking numbers are immediately populated into Shopify, the order is fulfilled, and the customer gets the regular Shopify email with the tracking number. And we never had to login to Shopify.

Check out ShipStation here.

Showing multiple currencies in Shopify

We’ve been getting a lot of emails lately from people asking what the DIY Stitch People book costs in their currency (GBP, AUD, etc). We normally just head to Google, grab the latest exchange, and reply to the email with the result. Today I decided to fix that process.

After some searching, I found the article I needed: Showing multiple currencies in a drop-down list on your storefront

It’s pretty straightforward if you know what you’re doing with Shopify theme files. If you follow the instructions in that article, you’ll end up with a currency dropdown in your header. I didn’t love the placement, so I took it a step further and put the currency dropdown right next to the display price:

Screen Shot 2015-02-10 at 7.41.50 PM

To get this, you just need to tweak where you’re including the snippet. To get it in the header, the article asks you to put it in theme.liquid. I instead put it on the product page, product.liquid, below the price (and outside of the span that contains the price):

Then I just added some CSS (style.css.liquid) to get the dropdown sitting next to the price (but not too close):

The result gave me that currency dropdown box right next to price, which I think is much more visible than having it buried in the header.