Dynamically Setting Colors with Shopify Dawn Theme Settings

Shopify Discussion

Topic summary

A developer is attempting to dynamically set CSS custom properties (CSS variables) using Shopify Dawn theme settings within a custom section. The code defines color settings in the schema (swiper_button_color, scrollbar_color, scrollbar_drag_color) and tries to reference them using {{ settings.XXX }} syntax in the style block.

The core issue: The settings aren’t loading on the frontend despite being properly defined in the schema.

Key clarification provided: Another user points out the critical distinction between:

  • settings.XXX - references global theme settings (defined in config/settings_schema.json)
  • section.settings.XXX - references section-specific settings (defined within the section’s own schema)

Since these color settings are defined within the section schema, the correct syntax should be {{ section.settings.swiper_button_color }} rather than {{ settings.swiper_button_color }}.

Status: The solution appears to be a simple syntax correction - changing all settings.XXX references to section.settings.XXX in the style block.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1 
{%- style -%}
:root {
  --color-swiper-button: {{ settings.swiper_button_color }};
  --bg-scrollbar-color: {{ settings.scrollbar_color }};
  --color-scrollbar-drag: {{ settings.scrollbar_drag_color }};
}
.item-container {
    box-shadow: 0 0 5px 0 #dee2e6;
    margin: 10px;
    border-radius: 10px;
}
.view-v video {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
    color: var(--color-swiper-button) !important;
}

.swiper-scrollbar {
  background: var(--bg-scrollbar-color) !important;
}

.swiper-scrollbar-drag {
    display: block !important;
    background: var(--color-scrollbar-drag) !important;
}

.scrollable-with-controls {
    gap: 1.5rem;
}
@media screen and (min-width: 480px) {

}
{%- endstyle -%}

{% schema %}
{
  "name": "Reelsproductsshow",
  "tag": "section",
  "class": "carousel",
  "settings": [
    {
      "type": "number",
      "id": "max_cards",
      "label": "Maximum Cards",
      "default": 6
    },
    {
      "type": "color",
      "id": "swiper_button_color",
      "label": "Swiper Button Color",
      "default": "#c5c5c5"
    },
    {
      "type": "color",
      "id": "scrollbar_color",
      "label": "Scrollbar Color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "scrollbar_drag_color",
      "label": "Scrollbar Drag Color",
      "default": "#fff"
    }
  ],
  "blocks": [
    {
      "name": "Card",
      "type": "card",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "Product"
        },
        {
          "type": "video",
          "id": "video",
          "label": "Video"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Reelsproducts1",
      "blocks": [
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        },
        {
          "type": "card"
        }
      ]
    }
  ],
  "locales": {
    "en": {
      "title": "Carousel"
    }
  },
  "enabled_on": {
    "templates": ["*"],
    "groups": ["footer"]
  }
}
{% endschema %}

But Front-end Load Empty

<style data-shopify="">
:root {
  --color-swiper-button: ;
  --bg-scrollbar-color: ;
  --color-scrollbar-drag: ;
}
.item-container {
    box-shadow: 0 0 5px 0 #dee2e6;
    margin: 10px;
    border-radius: 10px;
}
.view-v video {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
    color: var(--color-swiper-button) !important;
}

.swiper-scrollbar {
  background: var(--bg-scrollbar-color) !important;
}

.swiper-scrollbar-drag {
    display: block !important;
    background: var(--color-scrollbar-drag) !important;
}

.scrollable-with-controls {
    gap: 1.5rem;
}
@media screen and (min-width: 480px) {

}</style>

Why is

1 Like
2

settings.XXX refers to Theme settings, defined in config/settings_schema.json

since we’re in section, you need to use section.settings.XXX

1 Like