Shopify Schema盒阴影颜色默认值转RGB问题（主题自定义器）

Got it, let's break down how to fix this issue quickly. The problem here is that Shopify's color setting in Schema doesn't accept hex values as defaults when you're planning to use the color in an rgba() declaration—instead, it expects a native CSS color format that plays nice with the RGB channels we need for the alpha value.

Solution 1: Use an RGB Array for the Default Value #

The simplest fix is to replace your hex default with an RGB array. Shopify will automatically render this array as comma-separated values, which fits perfectly into the rgba() syntax you're using.

Here's your updated code:

.test {
  box-shadow: 0 0 4px 2px rgba({{ section.settings.example_shadow }}, 0.1);
}

{% schema %}
{
  "name": "Example Schema",
  "settings": [
    {
      "type": "color",
      "id": "example_shadow",
      "label": "Shadow Color",
      "default": [0, 0, 0]
    }
  ]
}
{% endschema %}

Solution 2: Use an RGB String (With Optional Filter) #

If you prefer using an RGB string instead of an array, you can set the default to "rgb(0, 0, 0)". You'll just need a small filter to strip the rgb() wrapper so it works seamlessly in rgba():

.test {
  box-shadow: 0 0 4px 2px rgba({{ section.settings.example_shadow | remove: 'rgb(' | remove: ')' }}, 0.1);
}

{% schema %}
{
  "name": "Example Schema",
  "settings": [
    {
      "type": "color",
      "id": "example_shadow",
      "label": "Shadow Color",
      "default": "rgb(0, 0, 0)"
    }
  ]
}
{% endschema %}

Why This Works #

Shopify's color setting type supports these default formats (but not hex strings):

• RGB arrays (e.g., [0, 0, 0])
• RGB/RGBA strings (e.g., "rgb(0,0,0)" or "rgba(0,0,0,0.1)")
• RGBA arrays (e.g., [0, 0, 0, 0.1])

Using either of the above methods will resolve the "default must be a CSS color" error and let you control your box shadow color via the theme customizer as intended.

内容的提问来源于stack exchange，提问作者jhon-jhones