Testing if a checkbox is ticked

New Member
3 0 0

Hi everyone,

I'm trying to test whether a checkbox is ticked and then output some code if it's true. I have the following code:

 

{% if this['Image Position - Centre Centre'] != "" %} 
background-position: center center {% else -%}
background-position: center top {% endif %};">

I think the above tests if an input field is populated but I'm not sure how to test if a checkbox is ticked.

I wondered if someone could give me some advice?

Any assistance, really appreciated.

0 Likes

if you want to use check box option in section or block than you have to use like this :
{
"type": "checkbox",
"id": "id",
"label": "Text",
"default": false,
"info": "Text"
}

 

to know more above it :https://help.shopify.com/en/themes/development/theme-editor/settings-schema#checkbox

Shopify theme developer and customization

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com
0 Likes
New Member
3 0 0

Thanks for the reply. I'm trying to write some conditional code to output some html based on whether a checkbox is ticked or not. The name of the checkbox is "Image Position" (as you can see in the code below) and the value is "Full Centre".

 

             <div style="background-image: url({{this['Image 1'] | asset_url }}); 
             {%- if this['Image Position'] == "Full Centre" -%} 
             background-position: center center   {%- else -%}
             background-position: center top {%- endif -%};">
</div>

Even though the checkbox is ticked, the code is still outputting background-position: center top when it should be outputting background-position: center center. I'm just trying to work out if the liquid conditional code is correct or whether it's another problem.

 

Would appreciate any further help.

0 Likes
New Member
3 0 0

I've tried the following block of code but it's still outputting the first statement instead of the second even though the checkbox is ticked:

 

             <div class="col-12 col-md-6 col-lg-4 background-image news-list-img" style="background-image: url({{this['Image 1'] | asset_url }}); 
             {%- if this['Image Position'] == true -%} 
             background-position: center center   {%- else -%}
             background-position: center top {%- endif -%};">
</div>

I'd really appreciate any help.

0 Likes