Add Custom Background through Style Script in Liquid template

Technical Q&A
,
1

Hi there,

I’m setting up my first Shopify test website and I’m using the latest version of Shopify CLI with Down theme.

I have a “image-with-text” banner and I want the text column background to be colorful.

Since my Color Scheme preferred background color is white, I’ve added a secondary background in my Theme Settings like this:

“settings_schema.json” + translation in my “language.schema.json”

    "name": "t:settings_schema.colors.name",
    "settings": [
      {
        "type": "color_scheme_group",
        "id": "color_schemes",
        "definition": [
          {
            "type": "color",
            "id": "secondary_background",
            "label": "t:settings_schema.colors.settings.secondary_background.label",
            "default": "#FFFFFF"
          },
 etc.....

I’ve also added a checkbox in my “image-with-text.liquid” (+ translation in my “language.schema.json”) like this:

{
      "type": "checkbox",
      "id": "background",
      "default": false,
      "label": "t:sections.image-with-text.settings.background.label"
    },

If the user selects the checkbox, a class “bg-secondary” will be added to the column.

Now I want to set the background color dynamically through the style script on the top of my “image-with-text.liquid” template with something like this :

.bg-secondary{
    background-color: {{settings_schema.colors.settings.secondary_background}};
}

This obviously doesn’t work. What am I missing?

Thank you for your help!

2

Hi @jesdondev ,

1 . Now that you want to automatically set the background color with a style script at the top of your “image with text. liquid” template with something like this then you need :

.bg-secondary{
    background-color: {{settings.secondary_background}};
}

2 . You need to make sure the class .bg-secondary exists for this to work

3 . Save and view the results, please let me know if you try that out and are still having trouble with it. I’d be happy to troubleshoot this further if you need to.