Created a Checkbox in the Schema - How do I use it in my liquid conditionals?

Store Design
1

Hi there. I am creating a new section that has a checkbox.

If the checkbox IS checked, it will reverse two divs.

I created the checkbox, but it’s essentially decorative because I am not sure how to look for it’s status with liquid conditionals and wrap that condition around my html.

Here’s my schema checkbox:

{
“type”: “checkbox”,
“id”: “id”,
“label”: “Flip text”,
“default”: false
}

Here’s my html:


  • {{ block.settings.title | escape }}
    {{ block.settings.subheading | escape }}

    • My CSS (If checkbox is checked, apply this style)

    .flex-container { flex-direction: row; }

    Essentially, if the person checks the checkbox, I want the CSS class to apply to the list item and flip my spans around, but I can’t seem to find how this logic works.

    Thanks!

    1 Like
    2

    @BirdhouseUSA

    sorry for this issue please check you theme image text section your have an easy idea for all code

    3

    Hi, I’m not clear on your answer.

    Does this require the use of JavaScript to make the checkbox function?

    I am looking to use something like this, which would add a special class to a div if checked.

    The schema block checkbox is true

    Thanks!

    1 Like
    4

    @BirdhouseUSA

    Sorry you are facing this issue, it would be my pleasure to help you.

    Welcome to the Shopify community! :blush:
    Thanks for your good question.

    Please share your site URL,
    I will check out the issue and provide you a solution here.

    5

    Hello, this is the website URL where we’re developing this website:

    https://cast-elegance.myshopify.com/

    Password Protected: bohgog

    6

    @BirdhouseUSA

    can you please check your debut theme image with text section you have easy to idea

    7

    Hi, I have an image and text section, but it doesn’t use checkboxes, it toggles via selector.

    Could you give me more specifics for what I am looking for or if what I am trying to do with the snippet is achievable? Thanks!

    8

    @BirdhouseUSA

    if possible to add me staff account so i will check and let you know

    9

    Hello, unfortunately this isn’t my store to give access. If you are not sure the answer, no worries. There may be another that can shed light on this.

    I appreciate your help in either case.

    1 Like
    10

    @BirdhouseUSA

    can you please check this code and modification as you like

    
  {% capture image_layout %}
    

       
      {% if section.settings.image != blank %}
        {{ section.settings.image | img_url: '1024x1024' | img_tag: section.settings.image.alt, 'feature-row__image' }}
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
      
    

  {% endcapture %}

  
    {% if section.settings.layout == 'left' %}
      {{ image_layout }}
    {% endif %}

    

      {% if section.settings.title != blank %}
       
        ## {{ section.settings.title | escape }}
      
      {% endif %}
      {% if section.settings.text != blank %}
        
{{ section.settings.text }}

      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        
          {{ section.settings.button_label | escape }}
        
      {% endif %}
    

    {% if section.settings.layout == 'right' %}
      {{ image_layout }}
    {% endif %}
  

{% schema %}
  {
    "name": "Image with text",
    "class": "index-section",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Image on left"
          },
          {
            "value": "right",
            "label": "Image on right"
          }
        ]
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Image with text"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text",
        "default": "

Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}
    11

    Hello, thank you for posting that.

    Can you tell me which part I’m modifying for ‘checkbox’?

    12

    Hello,

    Can you tell me what part of this code is for the checkbox logic?

    I cannot do != blank for a checkbox it appears. Here’s what I have:

  • // if checkbox isn't checked, add class 'reversed'. {{ block.settings.title | escape }} {{ block.settings.subheading | escape }}

    • Here’s the editor:

    if checked add class to div
    if checked add class to div1154×272 110 KB

    1 Like
    13

    @BirdhouseUSA

    yes ,current