Shopify themes, liquid, logos, and UX
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!
sorry for this issue please check you theme image text section your have an easy idea for all code
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!
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.
Hello, this is the website URL where we're developing this website:
https://cast-elegance.myshopify.com/
Password Protected: bohgog
can you please check your debut theme image with text section you have easy to idea
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!
if possible to add me staff account so i will check and let you know
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.
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 %}
Hello, thank you for posting that.
Can you tell me which part I'm modifying for 'checkbox'?
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:
yes ,current
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024