Shopify Theme Development - How to use section.block.variable in CSS or inline style?

Question

I am trying to use a variable in my Shopify code to declare the background and font color...

Please can someone direct me as to where I am going wrong?

Massive thanks, here is my code:

<div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};">
    <div class="section-inner">

        {% for block in section.blocks %}
            {% if block.type == 'chemical-contact' %}

                <div class="a-contact">
                    <a class="contact-link box-link" href="{{ block.settings.contact-link }}"></a>

                    <div class="a-contact-icon">
                        <img class="contact-icon" alt="Contact Icon" src="{{ block.settings.contact-icon | img_url: 'master' }}">
                    </div>
                    <div class="a-contact-content">
                        {{ block.settings.contact-text }}
                    </div>
                </div>

            {% endif %}
        {% endfor %}

    </div>
</div>

{% schema %}
    {
        "name": "Chemical Contacts",
        "id": "contacts-section",
        "max_blocks": 2,
        "settings": [
            {
                "type": "color",
                "id": "contacts-background-color",
                "label": "Contacts Background Color",
                "default": "#EEEDF0"
            },
            {
                "type": "color",
                "id": "contacts-color",
                "label": "Contact Color",
                "default": "#E20437"
            }
        ],
        "blocks": [
            {
                "name": "Chemical Contact",
                "type": "chemical-contact",
                "settings": [
                    {
                        "id": "contact-icon",
                        "type": "image",
                        "label": "Contact Icon",
                        "type": "image_picker"
                    },
                    {
                        "id": "contact-text",
                        "type": "text",
                        "label": "Contact Text",
                        "default": "[email protected]"
                    },
                    {
                        "id": "contact-link",
                        "type": "url",
                        "label": "Contact Link"
                    }
                ]
            }
        ]
    }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Note this is my attempt, I have also tried putting it in the style section underneath:

<div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};">

Any pointers you can give would be really appreciated, thanks.

Solution: Make sure you're not trying to use block settings if you are only using the section settings...

Bilal Akbar Bilal Akbar · Accepted Answer · 2019-08-07T20:39:25

You have misunderstood the sections and blocks. You have defined the color settings inside section but you are trying to access it via blocks. I have updated the code and there is also no id attribute that you used in section.

Shopify Docs for Section

<div class="section contacts-section" style="background-color: {{ section.settings.contacts-background-color }}; color: {{ section.settings.contacts-color }};">
    <div class="section-inner">

        {% for block in section.blocks %}
            {% if block.type == 'chemical-contact' %}

                <div class="a-contact">
                    <a class="contact-link box-link" href="{{ block.settings.contact-link }}"></a>

                    <div class="a-contact-icon">
                        <img class="contact-icon" alt="Contact Icon" src="{{ block.settings.contact-icon | img_url: 'master' }}">
                    </div>
                    <div class="a-contact-content">
                        {{ block.settings.contact-text }}
                    </div>
                </div>

            {% endif %}
        {% endfor %}

    </div>
</div>

{% schema %}
    {
        "name": "Chemical Contacts",
        "max_blocks": 2,
        "settings": [
            {
                "type": "color",
                "id": "contacts-background-color",
                "label": "Contacts Background Color",
                "default": "#EEEDF0"
            },
            {
                "type": "color",
                "id": "contacts-color",
                "label": "Contact Color",
                "default": "#E20437"
            }
        ],
        "blocks": [
            {
                "name": "Chemical Contact",
                "type": "chemical-contact",
                "settings": [
                    {
                        "id": "contact-icon",
                        "type": "image",
                        "label": "Contact Icon",
                        "type": "image_picker"
                    },
                    {
                        "id": "contact-text",
                        "type": "text",
                        "label": "Contact Text",
                        "default": "[email protected]"
                    },
                    {
                        "id": "contact-link",
                        "type": "url",
                        "label": "Contact Link"
                    }
                ]
            }
        ]
    }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Shopify Theme Development - How to use section.block.variable in CSS or inline style?

1 Answers