Birdhouse Websites and Designs

Moving your business online?

Contact us today

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
flip these titles

The Element

Schema code

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.

 

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

The Checkbox:

checkbox side panel in shopify

Location:

The files to edit in liquid

Checkbox Code:

add a checkbox in schema

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.

{% for block in section.blocks %}
<ul class=”list-wrap”>   
   <li class=”{%- if block.settings.reverse-titles -%}reverse-column{%- endif -%}”>
      <span>{{ block.settings.title | escape }}</span>
      <span>{{ block.settings.subheading | escape }}</span>
   </li>
</ul>
{% endfor %}

Logic Location:

Where schema text goes

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

flip these around
Share This