Birdhouse Websites and Designs

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

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

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.

<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:

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