How to add background color to section in shopify liquid

Question

I am trying to add a background color to my shopify slideshow section but it doesn't work.

I have tried to add a new div:

<div style="background-color:{{block.settings.color_accent}}">

But I get broken html error. What am I doing wrong? Can someone tell me how to fix it?

Answer 1

You can try to below code and must have to add this code to you have created block schema code:

{
  "type": "color",
  "id": "color_accent",
  "label": "Buttons color",
  "default": "#FFFFFF"
}

And you need to create a div:

<div style="background-color:{{block.settings.color_accent}}">

Answer 2

Check your 'slideshow2.css' style file. I think this external file have a CSS style of tag which overwrite the style of inline CSS style of div tag.

Solution 1: Try to comment the CSS style of div tag in your 'slideshow2.css' file and check the output on the browser. In this way, you get to know which CSS style overlap or overwrite. And then resolve the specific one.

Solution 2: Use inspect element tool in browser and try to change the color of the div using inline CSS. If it effects the background color, change in to HTML file properly. Otherwise debug the issue and figure out the exact problem why background color is not appearing.

Solution 3: Try to use the background color name directly. Maybe it don't read properly from the desired string block.settings.color_accent .

<div style="background-color:deepskyblue;"></div>

Answer 3

Add this to schema

{ "type": "image_picker", "id": "background-image", "label": "Image" }

And call it like this on the div

style="background: url('{{ section. settings.background-image | img_url: 'master' }}')"

It's the img_url what is giving you trouble, this is the right setting for background.