Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

Liquid code is not working in css file

ertanb
Shopify Partner
12 0 1

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
6915 1305 1334

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

Screenshot_1.jpg

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

ertanb
Shopify Partner
12 0 1

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