SECTION background vs BLOCK background in schema...Why does section work, but block does not?

BirdieGolden
Shopify Partner
50 1 10

Hi there - I've been able to successfully implement a background color change via the schema editor for the customer for SECTION settings. However, when I try to create a background for BLOCK settings, this does not output a value in the DOM. 

 

Thanks in advance for your input! I know this isn't easy to troubleshoot without access or a live example. Hoping someone just knows how to set the background color for block settings vs section settings (which I have working):

 

SCHEMA

{%- include 'side-by-side-section' -%} 
{% schema %}
 [ settings ... ]
  "blocks": [
    {
      "type": "text_column",
      "name": "Column",
      "settings": [
         {
           "type": "color",
           "id": "background_color",
           "label": "Section Background Color",
           "default": "#ffffff"
         }
      ]
  [ end settings ... ]  
 
{% endschema %}
 
OUTPUT MARKUP (doesn't work) 
<div style="background:{{block.settings.background_color}}"> ...content </div>
 
 
However, please note again that I have this working for section.settings.background_color elements. 
 
Thanks! Be safe, friends!

Section with Image Left, and Text Right is example (realizing this might change in the future, don't quote me on that) https://three-main.myshopify.com/pages/three-main 

Hello ,

If this not change by setting you can change by adding this css in:

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.home-inline-text {
    background-color: #ece1e1!important;
}
.module-inline-item.flex-50.featured-content {
    background-color: #ece1e1!important;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
BirdieGolden
Shopify Partner
50 1 10

Hi there, 

 

Thanks for your information. I do know how to manipulate via CSS, but my client does not, which is why I am attempting to replicate the schema option for my customer within the schema editor for BLOCKS.

 

I have already accomplished this with SECTION, and the customer can use the color picker to change a whole section. However, I am unable to get the same to work for BLOCKS.

 

Thank you.


@oscprofessional wrote:

Hello ,

If this not change by setting you can change by adding this css in:

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.home-inline-text {
    background-color: #ece1e1!important;
}
.module-inline-item.flex-50.featured-content {
    background-color: #ece1e1!important;
}

 

0 Likes
AndyHayes
New Member
1 0 0

Hi @BirdieGolden  - did you ever get an answer to this?

Andy

0 Likes
ibrhim_frank
New Member
1 0 0

Hi guys I have got a solution

I have captured the value of the color from the block settings and gave it a new name. Then I used it later in the inline styles

{% for block in section.blocks %}
    {% capture background_color %}{{ block.settings.color_id }}{% endcapture %}
        <div class="color-back" style="background-color: {{ background_color }};"></div>
{% endfor %}
0 Likes