Ecommerce Shopify WordPress Discussion

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: 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.settings.heading }} </h1> <style> .custom-heading-{{ }} { color: {{ section.settings.text_color }}; } </style> if any doubts please comment

December 30, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.