Shopify and respond.js

Highlighted
Tourist
15 0 1

Anyone here able to get respond.js working with Shopify? I believe it will not work because of the way the CSS files are hosted via CDN.

Any suggestions would be greatly appreciated. Thanks.

Update:

Just to show how I am doing this:

<!-- Respond.js proxy on external server -->
<link href="http://scottjehl.com/respond-proxy/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="{{ 'respond.proxy.gif' | asset_url }}" id="respond-redirect" rel="respond-redirect" />
<script src="{{ 'respond.proxy.js' | asset_url }}"></script>

https://github.com/scottjehl/Respond

1 Like
Tourist
15 0 1

Is your update an example of how you've managed to get this to work, or were you simply showing how you were trying to do it? I'm in the same situation of needing to get respond.js to play nicely with Shopify, but the cross-domain proxy method outlined on the respond.js page (and which it looks like you were trying to use above) doesn't seem to have any effect when I try using it.

Can anyone confirm whether they've managed to get respond.js working with Shopify and if so how, as it's not working for me.

0 Likes
Tourist
15 0 1

Hey Matt,

The updated example was just to show how I was attempting to achieve it, but still failing.

Would absolutely love a solution for this.

0 Likes
Tourist
15 0 1

I spent hours on this and in the end gave up. Whatever I tried I could not get the cross-domain proxy 'fix' to work.

i resorted to disabling my responsive layout in IE8 and below and defaulting to the full desktop style, but if anyone else can shed any light I'd be interested.

The odd thing is, the proxy thing is obviously working for most people, otherwise the respond.js issue tracker would be full of reports of it not working, but despite several such reports it would seem most people can get it working just fine. But is there something specific to Shopify that prevents it working I wonder??

0 Likes
Tourist
15 0 1

My guess is it has to be specific to Shopify. I checked out a couple of other responsive Shopify themes to see if anyone was using this, but never found a theme using respond.js

I essentially did the same for IE8, but it was a huge pain to do, because typically all of my CSS is in a single file and I use IE conditional tags to append a class instead of loading a separate stylesheet. This meant I had to go through all of my media queries and merge them for a separate IE stylesheet, which took time to do and isn't the most practical when I need to make an adjustment to any of the styles.

If anyone from Shopify reads this thread, any chance you can offer some insight into why this might happen with the Shopify CDN?

0 Likes
Explorer
66 0 23

Hi all,

I was running into the same problem as well and the general consensus above was correct - the way Shopify hosts CDN assets makes it impossible to use Respond.js out of the box, even with the cross-domain proxy.

I did a little further digging however, and have developed a technique for using Respond.js with Shopify, which I've made available on my blog here: Using Respond.js with Shopify.

Hope that helps a few people!

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
4 Likes
Tourist
15 0 1

Great work Gavin, that's awesome, thanks :)

0 Likes
Shopify Staff
Shopify Staff
5841 0 114

Upvoted, Thanks for noodling out a fix and posting your results!

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
New Member
2 0 0

This is not working for me and I followed your directions Gavin.

Mind taking a look and seeing if you notice anything out of place?

http://magnum-detox.myshopify.com

0 Likes
Explorer
66 0 23

Hi Drew!

I think the issue with your site is the order that you've included the files. Here's the order they should be included in:

<!-- HTML5 shim and Respond.js support for HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://cdn.shopify.com/s/files/1/0208/4054/t/2/assets/js-respond-min.js?2088"></script>;
  <link href="https://cdn.shopify.com/s/files/1/0208/4054/t/2/assets/respond-proxy.html"; id="respond-proxy" rel="respond-proxy" />
  <link href="http://bootstrap-2.myshopify.com/pages/respond"; id="respond-redirect" rel="respond-redirect" />
  <script src="http://bootstrap-2.myshopify.com/pages/respond"; type="text/javascript"></script>
<![endif]-->

Note that they can all be wrapped inside <!--[if lt IE 9]><![endif]--> - this will stop browsers that already support media queries from wasting time downloading any Respond.js assets.

Hope that helps, let me know if you run in to any other issues!

 

 

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
0 Likes