platformOS Community

CSS with Liquid

Patrick - Combinate Jun 23 2021 at 01:45

Do we run the CSS files through the liquid engine?

I would like to be able to build the CSS file using liquid so that we can expose some elements to the user for custom styling

Shopify docs:

If I create a file called app.css.liquid and incluide the following:

body {
    font-family: {{"sans-serif"}};

The file is not found when using
<link rel="stylesheet" href="{{ "styles/app.css" | asset_url }}">

We could get around this by using {{ include "styles/app.css" }} and loading it from a partial, but this would then be without a CDN

Pawel Jun 23 2021 at 09:30

Only liquid files are processed by liquid, assets land directly on the storage and CDN.

asset_url is retrieving paths to files put into app/assets when deploying
app.css.liquid is in app/views where liquid is evaluated, but is not an asset per usual definition.

Dean Jun 23 2021 at 12:37

Sort of related to this, the docs here -> show an example of:

.logo {
  background: transparent url("../images/logo.svg") top center no-repeat;

In a CSS file. If that image is then updated though, the file update is NOT reflected on page as the ?updated= is not automatically appended. Is there a way around that?

  • Pawel Jun 23 2021 at 18:50
    If you hardcode path, its hardcoded. Way around that is to manually update that path with query param when it changes, ie. logo.svg?v=2 or leave it as it is, and then use inline CSS to override image url: <div style="background-image: url({{ 'logo.svg' | asset_url }})">
  • zx Jun 24 2021 at 07:56
    You can set that in CSS variable in some .liquid using | asset_url and then use that variable in the actual CSS file.
zx Jun 24 2021 at 07:55

The way around it would be to define some CSS variables in your main application .liquid file and then use it in the actual CSS.


		:root {
			--main-bg-color: brown;


element {
	background-color: var(--main-bg-color);
Please sign in or fill up your profile to answer a question