CODEWITHSUNDEEP
shopifyliquid
Tom Hanks
Tom Hanks

Reputation: 614

Liquid / Shopify - Variable in CSS

This is my code, I can't get that to return the value from the slider.

<div class="slides">

  {% stylesheet %}

  .bg {
    opacity: {{ block.settings.opacity }} ;
  }

  {% endstylesheet %}

  {% for block in section.blocks %}

This is .liquid file and the html for the .bg class is in the same file.

    {
      "type":      "range",
      "id":        "opacity",
      "min":        0,
      "max":        100,
      "step":       1,
      "label":     "Opacity",
      "default":   50
  },

How do I get this to work?

Upvotes: 0

Views: 3235

Answers (1)

drip
drip

Reputation: 12943

The {% stylesheet %} doesn't accept any liquid code.

Please refer to: https://shopify.dev/tutorials/develop-theme-use-sections#javascript-and-stylesheet-tags

The important part is here:

Like the schema tag, javascript and stylesheet tags do not output anything, and any Liquid inside them will not be executed.

If you plan to have dynamic styles use the standard <style> tag instead of the stylesheet tag.

Upvotes: 2

Related Questions