Check if color field is set to "none" with liquid

Technical Q&A
1

Hi there,

I have a “color” type in my schema and I want to know if it’s set to “none”.

I tried the basic {% if section.settings.color == blank %} but it always act as not blank.

Is there a way to know and why doesn’t it behave like other fields ?

EDIT : my bad, I just had to check for the color as it returns transparent. So like that:

{% if section.settings.color contains 'rgba(0,0,0,0)' %}
color is set to "none"
{% endif %}
2

If it would behave like it is documented, there should be a possibility to set the color to blank: https://shopify.dev/themes/architecture/settings/input-settings#color. But unfortunately this is not working. If I delete the hex value from the color it says “None” but the value of the setting is (as you pointed out) “rgba(0,0,0,0)”. I think this is a bug and it should be fixed.

3

EDIT (2+ years later): I don’t know it the color object was a thing when I first posted, but a simpler and more future-proof way to do this right now is by accessing the alpha property: https://shopify.dev/api/liquid/objects/color (what’s more, the initial method I used don’t work inside {% style %} tag in the theme editor).

So, proper way to do this would be:

{% if section.settings.color.alpha == 0.0 %}
  color is set to "none"
{% endif %}
4

@MaxDesign @Friedrich just in case you’re seeking an alternative:

You could also define in the schema that the color input does not have a default color. By default, the button is transparent with no color and in liquid you can use {% section.settings.color != blank %}

5

@Finer If I remember correctly, it does not matter whether there is a default color set in the schema settings or not.

Because once you add a color in the theme editor, then remove it, it is no longer “blank” but become “rgba(0,0,0,0)”. So “blank” is only valid until the color is changed, which makes it not viable to use.

6

Actually yes, it seems necessary to use both to cover for default empty value, such as:

{% if section.settings.color.alpha == 0.0 or section.settings.color == blank %}
  color is set to "none"
{% endif %}
7

@MaxDesign just saw that my last answer was still a draft.

I should have provided more context to our case.

We were seeking an option, where a section can be created with the default (Theme Settings) button color until the user/merchant would apply a specific color. Considering the general question in this Post, I think your approach is absolutely the way to go.