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>
Logic Location:
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;
}
