Liquid, JavaScript, themes, sales channels
Hello, I'm using TailwindCSS in my project for main CSS framework and I need to add classes to {% shema %} but I get an error that class is invalid.
Here is my shema file:
{% schema %}
{
"name": "t:sections.main-cart-items.name",
"class": "order-2 lg:col-start-1 lg:col-span-3 lg:order-1"
}
{% endschema %}
Any help?
Solved! Go to the solution
This is an accepted solution.
Yeah that is not what I want because the parent element of the section is grid and I need this directly below it.
I resolved this issue, creating one section instead of two, so thanks for the reply’s.
Hey, @davidfaladore.
I think that colons are not initially allowed on section classes. There's two ways around that, though.
1) Create another wrapper inside the section markup.
2) Disable the validation check on ThemeCheck using a .theme-check.yml file on the root of your theme. Then, add a "ValidSchema" property and set enabled to false.
# Disabled validation of the schema.
ValidSchema:
enabled: false
This is not recommended, though. Since it disabled other schema validation.
If those adjustments are not sufficient, please refer to the ThemeCheck checks reference on the documentation: https://shopify.dev/themes/tools/theme-check/checks/valid-schema.
Hope this helps!
Hey @Gulayo, thanks for the answer.
I would love to do workaround #1, but I cannot wrap another div around since the root element is created from {% schema %}.
What I actually wanted to suggest with #1 was, to make a different container inside the pre-rendered section by Shopify. It should look like so:
<section class="shopify-section">
<!-- This is where you can place your extra wrapper for the classes. -->
<div class="order-2 lg:col-start-1 lg:col-span-3 lg:order-1">
<!-- Content goes here. -->
</div>
</section>
I know it's a bit different from what you want but I'm assuming this is as far as it goes (my knowledge, that is) without resorting to magical scripts.
This is an accepted solution.
Yeah that is not what I want because the parent element of the section is grid and I need this directly below it.
I resolved this issue, creating one section instead of two, so thanks for the reply’s.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024