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

BirdhouseUSA
Shopify Partner
63 4 20

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:

<li style="display: flex;">
<span class="h3">{{ block.settings.title | escape }}</span>
<span class="h5">{{ block.settings.subheading | escape }}</span>
</li>

 

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!

 

Birdhouse Web Design
Replies 12 (12)

KetanKumar
Shopify Partner
36839 3635 11971

@BirdhouseUSA 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BirdhouseUSA
Shopify Partner
63 4 20

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.

 

<div class="{% if checkbox == checked %}flip-rows {% endif %}"> The schema block checkbox is true </div>

 

Thanks!

Birdhouse Web Design
KetanKumar
Shopify Partner
36839 3635 11971

@BirdhouseUSA 

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

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BirdhouseUSA
Shopify Partner
63 4 20

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

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

Password Protected: bohgog

Birdhouse Web Design
KetanKumar
Shopify Partner
36839 3635 11971

@BirdhouseUSA 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BirdhouseUSA
Shopify Partner
63 4 20

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!

Birdhouse Web Design
KetanKumar
Shopify Partner
36839 3635 11971

@BirdhouseUSA 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BirdhouseUSA
Shopify Partner
63 4 20

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.

Birdhouse Web Design
KetanKumar
Shopify Partner
36839 3635 11971

@BirdhouseUSA 

can you please check this code and modification as you like

<div class="page-width feature-row">
  {% capture image_layout %}
    <div class="feature-row__item">
       <a href="{{ section.settings.button_link }}" class="btn">
      {% 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 %}
      </a>
    </div>
  {% endcapture %}

  <div class="feature-row">
    {% if section.settings.layout == 'left' %}
      {{ image_layout }}
    {% endif %}

    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
      {% if section.settings.title != blank %}
       <a href="{{ section.settings.button_link }}" class="btn">
        <h2 class="h3">{{ section.settings.title | escape }}</h2>
      </a>
      {% endif %}
      {% if section.settings.text != blank %}
        <div class="rte-setting featured-row__subtext">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        <a href="{{ section.settings.button_link }}" class="btn">
          {{ section.settings.button_label | escape }}
        </a>
      {% endif %}
    </div>

    {% if section.settings.layout == 'right' %}
      {{ image_layout }}
    {% endif %}
  </div>
</div>

{% 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": "<p>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.</p>"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "category": "Image"
      }
    ]
  }
{% endschema %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BirdhouseUSA
Shopify Partner
63 4 20

Hello, thank you for posting that. 

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

Birdhouse Web Design
BirdhouseUSA
Shopify Partner
63 4 20

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:

 

<li class="{% if block.settings.checkbox != blank %} reverse{% endif %}"> // if checkbox isn't checked, add class 'reversed'.
<span class="peach h5">{{ block.settings.title | escape }}</span>
<span class="peach h3">{{ block.settings.subheading | escape }}</span>
</li>

 

Here's the editor:

if checked add class to divif checked add class to div

Birdhouse Web Design
KetanKumar
Shopify Partner
36839 3635 11971

@BirdhouseUSA 

yes ,current 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing