Google PlusFacebookTwitter

How to Get a Static URL For Shopify Files

By on Dec 14, 2016 in Internet | 1 comment

Share On GoogleShare On FacebookShare On Twitter

Ran into an issue today where a Shopify app named Findify needed to be able to link directly to a CSS file hosted on the store it was connected to. For some reason Findify doesn’t inherit styles from your theme and you can’t simply override the styling using a typical stylesheet in your Shopify theme and you can’t make a lot of changes via the external Findify management interface and adding tags to their custom box doesn’t work, so you’re left with using the external CSS link. Findify support was…less than helpful with this. I was left to my own devices.

Trouble is, Shopify doesn’t provide static external links to assets in your theme’s folders. For example, let’s say you add a new CSS asset to your theme in the standard way using the theme customizer. You’d think you could access it at www.domain.com/custom.css or maybe www.domain.com/assets/custom.css or something along those lines, right? Wrong. You’d have to call the CSS in your theme.liquid file, then load the page in question and use a web browser inspector to find the CDN link. The problem with that is that every time you update the file, which may be often with something like CSS, the CDN link changes. Since it’s on a CDN it’s not guaranteed to be permanent anyway, but that’s neither here nor there if the link changes each time the file is updated.

OK, so that leaves you with two options. Well, three. 1) Kick Findify to the curb and find a better solution. 2) Host the CSS file on some other site. 3) Make Shopify work somehow.

Hosting the CSS on a third party site is lame and will slow down load times on both ends, and I’m not opening an AWS or Google Cloud account just to house one lousy CSS file, so I chose the latter option. After fruitless Googling I had a chat with Shopify support and at the end of much back and forth finally came to the conclusion that the recommended technique is to upload the CSS file in Settings>Files which will provide what they assured me is a permanent link. It’s still a CDN link, so I don’t fully trust it, but it seems to be they only thing they offer that’s workable.

This is far from ideal. Shopify claims this is done for “security reasons”, but that’s balderdash. A link is a link and being able to access the data doesn’t change if it’s housed on a CDN or not. Now I have to manually delete the CSS file, re-upload it, and update the link in Findify each time I need to update that file. Bananas.

Has anyone else run into this issue and come up with a better solution?

PS – That’s my son Roman in the picture. He’s expressing himself much as his father does when issues like the one described here occurs.

  • Han

    The solution is to
    a) Put your css in an asset like /assets/my-style.css
    b) Create a page (you control the url and it’s permanent)
    c) Set page’s the theme to my-css
    d) Create a file named /themes/page.my-css
    e) Enter {% layout none %}{% include 'my-style.css' %} in that file
    Now you can access your css with the permanent page url