Solved

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

MaxDesign
Shopify Expert
186 13 73

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 %}
Reach out to me at admin@maxdesign.expert
Accepted Solution (1)
MaxDesign
Shopify Expert
186 13 73

This is an accepted solution.

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 %}

 

Reach out to me at admin@maxdesign.expert

View solution in original post

Replies 6 (6)

Friedrich
Shopify Partner
3 0 1

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.

MaxDesign
Shopify Expert
186 13 73

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 %}

 

Reach out to me at admin@maxdesign.expert
Finer
Shopify Expert
2005 416 716

@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 %}

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
MaxDesign
Shopify Expert
186 13 73

@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. 

Reach out to me at admin@maxdesign.expert
MaxDesign
Shopify Expert
186 13 73

This is an accepted solution.

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 %}

 

Reach out to me at admin@maxdesign.expert
Finer
Shopify Expert
2005 416 716

@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.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency