App block color setting transparent

Extensions
,
1

Hi,

I’m configuring the settings of an app block in my app extension as per:

{
    "type": "color",
    "id": "color",
    "label": "Color",
    "default": "#00000000" 
},

As you can see I used a setting of type color and a transparent color for the default. That’s a totally valid css value. But I can’t deploy the app block using shopify cli. I get the following error message:

Invalid tag 'schema': settings: with id="color" default must be a CSS color

What makes this issue even more interesting is that the color picker itself will let us configure opacity in the hex code:

image
image190×382 16.4 KB

Can we expect a fix in the shopify cli for that?

Thanks

2

Looks like the syntax checker used by Shopify is incomplete. The color code you provides is a valid CSS color, although it is not a commonly used syntax.

You could try using an alternative (and more common) syntax for specifying a color-with-alpha-value in CSS, namely: rgba(red, green, blue, alpha), where rgba(64, 64, 64, 50) equals #40400432.

I have no Idea if Shopify supports the alternative syntax, but since it is the more commonly used one for specifying RGBA values, I would say it is worth a try.

3

@Jacco thanks for your answer.

You mentioned it’s not a common syntax, but that’s the syntax used by the color picker itself in the theme editor when customizing the opacity of the selected color.

Also I wouldn’t assert that it’s not a common one. I used it a lot and seen other people using it a lot over the years.

By the way, after experimenting I found that specifying “transparent” will work