Creating a color settings – What am I doing wrong?

Question

Hey! So I'm trying to create a custom li-settings input to let users change the background color of certain sections in the shopify editor. I've found the the li-settings:custom instructions and have tried applying it to my use case but to no success. Could someone take a look and maybe suggest what I'm doing wrong?

What I've done:

Added an embed element in webflow inside of the section I want the setting to relate to.
Added the attribute li-settings:custom="Background-Color" to the embed element.
Added an attribute style="background-color: {{section.settings.background-color}}" to the section which background color should be changed.

My guess is I'm formatting the setting schema wrong, couldn't find much clear instructions on it in Liquify Pro or Shopify documentation.

Resources:
Webflow export is attached.
Webflow read-only: https://preview.webflow.com/preview/makebo1?utm_medium=preview_link&utm_source=designer&utm_content=makebo1&preview=2e903db79948c9938579805d4b825151&locale=en&workflow=preview
Code added to the embed screenshot: https://share.cleanshot.com/2GxRycW6
Section with this all added to: "li-section | hero"

I'm very new to this so forgive any obvious mistakes here.

jonas.halbstark · Accepted Answer

Hi @Jonathan Fors, i found to issues. You cant put any other attributes ont the li-section tag. Shopify renders the section on there own. I would wrap the section content inside a div and apply the styling on this element.
It looks like in you embed there is a forbidden charakter. Have never seen this. But after { there is something wired. VS Code also noticed this.
Can you try this json instead:
{
"type": "color",
"id": "background-color",
"label": "Background Color",
"default": "#EDEDE9"
}

Jan · Answer

Hey @Jonathan Fors, I think the problem is "value" in your case. Shopify does not support "value" in the color picker, instead you can use "default" like so:

{
"type": "color",
"id": "background-color",
"label": "Background Color",
"default": "#EDEDE9"
}

You can visit this site to see all input settings that are valid in Shopify: https://shopify.dev/docs/storefronts/themes/architecture/settings

Jonathan Fors · Answer

Thanks for the suggestion! I applied what you said but unfortunately it didn't change anything

Jan · Answer

If you use Github, can you look at the logs in Shopify? Do you see the schema if you look into the Shopify liquid code of the section?

Jonathan Fors · Answer

Hmm this is all I see there: https://share.cleanshot.com/17lwn7rm

Jan · Answer

Okay, that looks good. Can you send me the code of the converted section? What's the name of the section? :)

Jonathan Fors · Answer

Sure! Here you go: https://github.com/JonathanFors/Makebo2/blob/main/sections/hero.liquidIts just called “hero”, placeholder name for while I’m working on it haha

Jonathan Fors · Answer

Amazing @jonas.halbstark this worked, thank you! Not sure if it was the forbidden character, the li-section tag or both but it's working. So this is resolved now 🙏

jonas.halbstark · Answer

nice 🙂

Welcome to the Liquify Community

Creating a color settings – What am I doing wrong?