How can I change the color of my heading dynamically using shopify liquid?

Ive used chatgpt to look over the code, im not sure if it has something to do with the color schemes im not really sure what im missing or what im doing wrong. I can change the heading text perfectly fine but not the color. The code: {% schema %} { "name": "Solo Custom Section", "settings": [ { "type": "text", "id": "heading", "label": "Section Heading", "default": "My Custom Section" }, { "type": "color", "id": "text_color", "label": "Text Color", "default": "#000000" } ], "blocks": [], "presets": [ { "name": "SoloTest", "category": "custom" } ] } {% endschema %} <h1 class="custom-heading">{{ section.settings.heading }}</h1> {% stylesheet %} .custom-heading { color: {{ section.settings.text_color }}; } {% endstylesheet %} I tried everything I know lmao and I'm expecting to be able to change the color dynamically within the admin customize panel. This is a custom section I'm building for my Shopify store.

You can not use variables inside stylesheet so value of text_color is not replaced in style ref: https://shopify.dev/docs/api/liquid/tags/stylesheet You can do something like this with your markup <h1 class="custom-heading" style="color:{{section.settings.text_color}};" > {{ section.settings.heading }} </h1> OR <h1 class="custom-heading-{{ section.id }}"> {{ section.settings.heading }} </h1> <style> .custom-heading-{{ section.id }} { color: {{ section.settings.text_color }}; } </style> if any doubts please comment

December 30, 2023