CODEWITHSUNDEEP
htmlcssshopifyliquidassets
Marcio Vieyra
Marcio Vieyra

Reputation: 129

Add Custom CSS Section to Shopify Theme

I want to be able to add a custom CSS class to, in this case, a Slider section.

In my slider-vertical.liquid asset, I went down to the {% schema %} and under settings I added this code:

{
"type": "text",
    "id": "section_css_class",
    "label": {
      "en": "Section CSS Class"
    },
    "default": {
      "en": "Add CSS class"
    }
  }
,

Then, at the top of the same file, I modified the DIV wrapper from this:

<div class="vertical-slider {% if text_brightness < 60 %} has-black-text {% endif %}">

to this:

<div class="vertical-slider {% if text_brightness < 60 %} has-black-text {% endif %} {{ section.settings.section_css_class }}">

The CSS Class name I type in the "Add CSS class" box which I now see at my Theme Editor does not appear to be read. I tried many tests and I see that there must be something wrong under schema because it's not populating the text I add.

Do you have any idea what I'm doing wrong? Thanks so much!

Upvotes: 0

Views: 1058

Answers (1)

Charles C.
Charles C.

Reputation: 3913

default is not a label, it is a value for the field.
checkout default here

<div class="vertical-slider {% if text_brightness < 60 %} has-black-text {% endif %} {{ section.settings.section_css_class }}">

will be

<div class="vertical-slider {% if text_brightness < 60 %} has-black-text {% endif %} Add CSS class ">

in

{
"type": "text",
    "id": "section_css_class",
    "label": {
      "en": "Section CSS Class"
    },
    "default": "Add CSS class"
    }
  }
,

Just change default to "default": "my-css-class" and it should work

to debug, just output the value of section.settings.section_css_class with a div like this

<div>
    {{section.settings.section_css_class}}
</div>

Upvotes: 1

Related Questions