This Article:
This is an example for how to check if a Shopify checkbox is checked using only liquid conditional logic.
In this case, when a checkbox is checked, we’re adding a class to a list element that will flip/reverse the words in a column.
Requirements:
- SHOPIFY
- Access to theme code

The Element
Schema code
{% schema %} { "name": "Maroon Band", "max_blocks": 3, "settings": [ { "type": "color", "id": "background_color", "label": "Background color", "default": "#ffffff" } ], "blocks": [ { "type": "featured_collection", "name": { "en": "New block" }, "settings": [ { "type": "text", "id": "title", "label": { "en": "Heading" }, "default": { "en": "Crispiest" } }, { "type": "text", "id": "subheading", "label": { "en": "Subheading" }, "default": { "en": "Crust" } }, { "type": "checkbox", "id": "reverse-titles", "label": "Flip rows", "default": false } ] } ], "presets": [ { "name": { "en": "Maroon Band" } } ] } {% endschema %}
I included my entire schema section for reference. The part where the checkbox is being added is below in bold.
I also included an image (Location) for where this code goes in your Shopify website. This is a custom section, so you will need to create your own or modify an existing one.
The Checkbox:

Location:

Checkbox Code:

The Logic
If Checkbox = checked
Below we’re adding a class to the list item called .reverse-columns if the checkbox with the ID reverse-titles is checked in our block settings. This code goes at the top of your section, above your schema.
<div class="three-blocks-wrap" style="background:{{section.settings.background_color }}"> <div class="page-width"> <ul class="grid grid--uniform word-blocks three-blocks"> {% for block in section.blocks %} <li class="{%- if block.settings.reverse-titles -%}reverse-column{%- endif -%}"> <span class="darktan h5">{{ block.settings.title | escape }}</span> <span class="darktan h3">{{ block.settings.subheading | escape }}</span> </li> {% endfor %} </ul> </div> </div>
The CSS
Add the stle
Finally, add the CSS style to your stylesheet that will reverse the column order when the checkbox is checked.
/* default column order */ .list-wrap li { display: flex; flex-direction: column; } /* flip titles */ .list-wrap li.reverse-column { flex-direction: column-reverse; }
