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

Goldendust20
Excursionist
31 1 17

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!

 

KetanKumar
Shopify Partner
18885 1983 6992

@Goldendust20 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Goldendust20
Excursionist
31 1 17

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!

KetanKumar
Shopify Partner
18885 1983 6992

@Goldendust20 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Goldendust20
Excursionist
31 1 17

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

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

Password Protected: bohgog

0 Likes
KetanKumar
Shopify Partner
18885 1983 6992

@Goldendust20 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Goldendust20
Excursionist
31 1 17

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!

0 Likes
KetanKumar
Shopify Partner
18885 1983 6992

@Goldendust20 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Goldendust20
Excursionist
31 1 17

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.

KetanKumar
Shopify Partner
18885 1983 6992

@Goldendust20 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes