Shopify Question posted in
The Shopify help center can be found here.

Shopify Dev: How I can control the box shadow color in schema?

I want to control the box shadow color in shopify schema by using the theme customizer.

Here is my code :

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

{% schema %}
{
  "name": "Example Shcema",
  "settings": [
    {
      "type": "color",
      "id": "example_shadow",
      "label": "Shadow Color",
      "default": "#000000"
    }
  ]
}

when I submit this code it show me this error message :

"default must be a CSS color"

this problem it come from the "default": "#000000"

my question is how I can convert the default hex color into rgb
color???

Tags:

2

Answers


  1. 0

    You can use the default liquid tag color_to_rgb to convert a color to rgb color,
    eg.

    {{ '#7ab55c' | color_to_rgb }}

    Reade more about color filters here

    Login or Signup to reply.
  2. 0

    Please use color_modify: 'alpha', 0.1 i was create example than answer too you.

    .test {
  box-shadow: 0 0 4px 2px {{ section.settings.example_shadow | color_modify: 'alpha', 0.1 }}
}

{% schema %}
{
  "name": "Example Shcema",
  "settings": [
    {
      "type": "color",
      "id": "example_shadow",
      "label": "Shadow Color",
      "default": "#000000"
    }
  ]
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search