Let me start by saying that Shopify and sIFR 3 are both great products. This is just a little heads up in case anyone comes across the same problem I had the other day.

I’m not going to get into the details about how to use sIFR, because there’s plenty of documentation out there. This ain’t no tutorial!

Shopify’s file module

Shopify has a file upload module that we often use for PDF‘s and JPG‘s. In this case I needed it to store the SWF file that contained my font for sIFR. The module uploads your file and gives you the URL where it can be found. I’m not sure why (feel free to enlighten me) but Shopify adds a query string to the files you upload into their system, and the URL looks something like this:

http://cdn.shopify.com/s/files/some-numbers/files/myfont.swf?1244839849

Notice the query string after the file extension: ?1244839849.

Activating your font in sIFR 3

sIFR3 requires you to activate the font you want to use like so:

var myfont = { src: 'path-to-font-file.swf' };
sIFR.activate(myfont);

Naturally, my first guess was to drop the URL from Shopify into the Javascript for sIFR:

var myfont = {
    src: 'http://cdn.shopify.com/s/files/some-numbers/files/myfont.swf?1244839849'
};
sIFR.activate(myfont);

But it turns out that this doesn’t work (at least not for me). To my surprise the result I got was the generic sIFR “Rendered with sIFR 3 revision 436”. It was quite a shock considering it was repeated about 4 times and took over my entire webpage.

The moment of clarity

Pretty simple really (not much clarity here). All I did was remove the query string (?1244839849) from the file’s URL and everything worked fine.

var myfont = {
    src: 'http://cdn.shopify.com/s/files/some-numbers/files/myfont.swf'
};
sIFR.activate(myfont);

So, if you’re using sIFR3 on a Shopify site be sure to remove the query string from the link to your SWF file.

Please share any experiences in the comments below!