Liquid code is not working in css file

ertanb
Shopify Partner
13 0 2

Hi, i am trying to add some liquid code in a css file, but it seems to always be empty when its rendered. 

 

I have a section with the following schema:

 

 

{% schema %}
{
  "settings": [
    {
      "type": "number",
      "id": "margin_top",
    },
    {
      "type": "number",
      "id": "margin_bottom",
    }
  ],
  "presets": [
    {
      "category": "Custom",
      "settings": {
        "margin_top": 30,
        "margin_bottom": 30
      }
    }
  ]
}
{% endschema %}

 

 

 

Then i have created a file under `Assets/my-style.css.liquid`:

 

 

.my-wrapper {
  position: relative;
  margin-top: {{ settings.margin_top }} px;
  margin-bottom: {{ settings.margin_bottom }} px;
}

 

 

 

And i am importing the css in liquid file:

{{ 'my-style.css' | asset_url | stylesheet_tag }}

 

 

 

But when its being rendered its always as :

 

 

.my-wrapper {
  position: relative;
  margin-top: px;
  margin-bottom: px;
}

 

 

 

So, it cant find the settings from the liquid file. Is it any way to solve it?

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
7929 1542 1573

You must add code to a liquid file, for example like the image below

Screenshot_1.jpg

- Helpful? Like and Accept solution to let me know or Donate
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

ertanb
Shopify Partner
13 0 2

Yeah, i understand that. I was looking on whether its possible to have liquid code in a `.css` file.