cssshopifyschemablocksections

Shopify Schema, section settings work in <style> tag, but block settings doesn't


I ran into a weird problem while modifying a section with a few blocks. Basically, I wanted to add a new block to an already existing section. I've already set up the schema, and this part works as expected. But the problem is, I can not use the block settings inside a < style> or {% style %} tag. But the settings work fine in the HTML lines. Note: section settings work in style tag, just the block setting doesn't.

Example 1 (doesn't work):

<style>
    .custom_box {
        background: {{block.settings.box_color_from_block}};
    }
</style>

Example 2 (works):

<div class="custom_box" style="background: {{block.settings.box_color_from_block}};"> </div>

Example 3(works):

<style>
    .custom_box {
        background: {{section.settings.box_color_from_section}};
    }
</style>

Note: I have a color picker inside the block I am creating with the id "box_color_from_block", and when it wasn't working, I added a color picker in the section with the id "box_color_from_section" to test. And I found the above result.

I searched on google and found a similar StackOverflow post from 2 years ago. There, somebody suggested adding the input in the section instead of the block. Sure enough, it works, but it's not useable for me. I specifically need example 1 to work.

The setup is that I am generating a < div> using a {% for %} loop for every product in a collection. Thus, the method in example 2 becomes unsuitable. And every < div> needs to have a different background color. There'll be like 5/6 color pickers(will vary depending on the collection). Thus, adding them to the section will make the already crowded section even more filled up. Hence, I want to add the color pickers inside the block settings, which is pretty empty.

Thanks a whole bunch in advance for reading through, and I'd be really grateful for an answer. My main issue is, that I'm puzzled by the situation. I don't really know what's happening and why.


Solution

  • According to the information you provided, in example 2 it works because you are using block.settings.box_color_from_block inside the div which is inside a liquid for loop.

    In your for loop you are looping though section.blocks to get each block data :

    {% for block in section.blocks %}
      <div class="custom_box" style="background: {{block.settings.box_color_from_block}};"></div>
    {% endfor %}
    

    in your Example 1 , you are not looping through liquid for loop in your CSS, thus {{block}} is undefined.


    Solution :

    You need 2 for loops, one for the HTML and one for the CSS.

    In the HTML loop you create your div with a unique ID for each block using {{block.id}} .

    In the second for loop in the CSS you use the div ID to customize it using block settings

    <style>
    {% for block in section.blocks %}
      #custom_box_{{block.id}}{
        background: {{block.settings.box_color_from_block}}
      }
    {% endfor %}
    </style>
    
    {% for block in section.blocks %}
     <div id="custom_box_{{block.id}}" class="custom_box"></div>
    {% endfor %}