Ad

Shopify Theme Development - How To Use Section.block.variable In CSS Or Inline Style?

- 1 answer

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" target="_blank" rel="nofollow noreferrer" 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...

Ad

Answer

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" target="_blank" rel="nofollow noreferrer" 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 %}
Ad
source: stackoverflow.com
Ad