Is there a way to dynamically alter the heading color in Shopify liquid code?

After utilizing ChatGPT to review the code, I am uncertain if it is related to the color schemes. I am unsure of what I may be missing or doing incorrectly. While I can successfully alter the heading text, I am unable to change the color. Below is the code snippet:

    {% 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 %}

Despite trying all my known solutions, I have been unsuccessful. My goal is to dynamically modify the color through the admin customization panel. This custom section is specifically designed for my Shopify store.

htmlcssjsonshopifyliquid

Answer №1

Variables cannot be used inside the stylesheet, which means that the value of text_color is not replaced in the style.

For more information, you can refer to:

To work around this limitation, you can modify your markup as shown below:

<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 you have any doubts, please feel free to ask in the comments.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Color overlay on top of image background

I'm struggling to create a striped colored background with a narrow center single color background on top for showcasing articles and photos. However, I am unable to get the colored background to display correctly. Despite trying different approaches ...

jqueryhtmlcssbackground

Manipulating web elements by traversing through selected identifiers in LocalStorage and eliminating them from the document layout

I have a multitude of localStorage keys, including ones labeled Cart, Viewed, and Trash. There are two aspects to my query: 1) What is the most efficient way to loop through the item IDs in localStorage and add a class or data attribute to the correspond ...

jqueryjsonlocal-storagesessionstorage

What effect does the addition of a border-top have on the position of the left column, causing it

Currently, I am working on creating a list with each list item having a bottom border of 1px solid. The list is then divided into 3 columns using column-count:3 CSS property. For instance, if there are 8 items, it should display 3 items in the first column ...

htmlcss

The labels on the viewcontroller take a considerable amount of time to load with

I am encountering a challenge with the slow loading of labels in my view controller. In this script, a userid is sent to a php script which then retrieves data related to that userid in an array. The data is sent back as a json response to the app. Howeve ...

iosjsonswift3uilabelpopulate

Steps to Obtain a JSON File in UTF-8 Format

Using LitJSON library has resulted in some unexpected behavior. Is there a JSON library that preserves accents during conversion? Below is a sample test: test.json [{"id":"CS_001","name":"L'élément","type":"Tôt"},{"id":"CS_002","name":"L'o ...

c#jsonlitjson

Strategies for detecting when a child checkbox is clicked within a parent li element

Below is a snippet of Vue Code illustrating the structure we're working with: <template> <li class="mm-product-item" v-on:click="edit(item)"> <p class="mm-product-info input-field"> <input ...

javascripthtmlvue.jsvuejs2dom-events

Uploading a single image using JSON in an MVC API

How can I upload an image as JSON in an API? I need to upload a file to the server folder and save the file path in an object of a class after uploading the image. var data = $('#myForm').serialize(); $.ajax({ url: "/api/CompaniesApi/"+id, ...

jqueryjsonasp.net-mvcasp.net-mvc-5

Tips for sending an array of input field values through an Ajax request

In my current web form, there is a dynamic option that adds rows with the same attributes. These rows need to be submitted through an Ajax call to my PHP for insertion into the database. Access: <tr> <td><input type"text" name="access[nam ...

javascriptjqueryhtml

Employing the Confirm() function within the onbeforeunload() event

Is there a way to prompt the user with a confirmation box before exiting a page using JavaScript? If the user clicks "OK", a function should be executed before leaving the page, and if they click "Cancel", the page should remain open. window.onbeforeunloa ...

javascripthtml

AJAX code fetching dynamic content without relying on file loading

When I load my program, the dynamic code does not appear on the page until I reload it again. I attempted to use the onload event in the body to load content from an XML file using AJAX, but it only works after closing and reopening the program, not dynam ...

javascripthtmlajaxservlets

Tips for properly sending an array containing objects in JSON format using Swift for iOS development

As a beginner, I am trying to grasp the concept of sending an array with objects. Does the server recognize arrays like Int, Strings, or Booleans? Do I need to convert the array into a string for JSON data? There seems to be something I'm missing. va ...

iosarraysjsonswiftjsonencoder

Position the ion-radio element in the middle of the layout

As I work on creating a privacy page in HTML using Ionic 3, my desired output should resemble the following: However, with my current code, the result I'm seeing is different from what I expected: This snippet showcases the code I am working with: ...

cssionic-frameworksassionic3

What causes the menu icon to shift to the left upon clicking it?

I'm currently working on a website project that involves implementing a fixed navbar with jQuery sliding animation for the menu. However, I've encountered an issue where the "menu_icon" is getting pushed to the left every time the menu slides dow ...

javascriptjqueryhtmlcss

Trouble with Bootstrap 5 Dropdown Menu failing to drop down

I am attempting to utilize a dropdown menu on my Wordpress site with Bootstrap, but it is not working as expected. If I manually add the class "show" to my dropdown-menu div, the menu displays, but the button does not function. These are the scripts being ...

javascriptphpcssbootstrap-5

optimal method for organizing design elements

I have a container with 9 square-shaped divs that I want to arrange in the following layout: It should resemble something like this: _________ ____ ____ | A | B | C | | |____|____| | | D | E | |_________|____|____| | F | G | ...

htmlcsslayoutflexbox

PHP and jQuery creating a three-tiered drop-down navigation menu

My task involves creating a jQuery dropdown menu using PHP-generated HTML from a database table of categories: cats (db table) <ul class="dropdown"> <?php $sql ='SELECT * FROM cats WHERE cat_parent = 0'; $result = $db->s ...

phpjqueryhtmlmysqldrop-down-menu

The development chrome extension failed to load due to an invalid port or malformed URL pattern

I'm encountering an issue while trying to load my development chrome extension for debugging. The error message I am receiving is: Issue with 'content_scripts[0].matches[0]' value: Path cannot be empty. Manifest failed to load. This is th ...

javascriptjsongoogle-chrome-extension

Developing JavaScript objects with functions using JSON

I am looking to create a specific object with the following structure: var myObj={ "rules": { "email": { "required": true, "email": true, "remote": { "url": "check-email.php", ...

javascriptjqueryjson

Reposition the div element on mobile devices using media queries

Hello, I'm facing an issue on mobile with my website: dev site Today, I implemented a dropdown menu with flags to allow language switching. However, the dropdown in mobile is appearing under the hamburger nav bar. I was thinking of using media querie ...

htmlcssmedia-queries

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

javascripthtml