CODEWITHSUNDEEP
shopifyliquidshopify-template
JesDon
JesDon

Reputation: 41

Shopify - Add Custom Background Through Style Script In Liquid Template

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!

Upvotes: 1

Views: 505

Answers (1)

Shania
Shania

Reputation: 317

The css declaration for the secondary background color might not be pointing to the correct setting.

Try this instead:

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

Upvotes: 1

Related Questions