shopify liquid中如何给section添加背景色

Question

我正在尝试为我的 shopify 幻灯片部分添加背景颜色，但它不起作用。

我试图添加一个新的 div：

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

但是我遇到了 html 错误。 我究竟做错了什么？ 有人可以告诉我如何解决吗？

Answer 1

您可以尝试下面的代码，并且必须将此代码添加到您创建的块架构代码中：

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

你需要创建一个 div：

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

Answer 2

检查您的“slideshow2.css”样式文件。 我认为这个外部文件有一个 CSS 风格的标签覆盖内联 CSS 风格的 div 标签。

解决方案1：尝试在'slideshow2.css'文件中注释CSS样式的div标签，并在浏览器上查看output。 通过这种方式，您可以了解哪些 CSS 样式重叠或覆盖。 然后具体解决。

解决方案2：在浏览器中使用检查元素工具并尝试使用内联CSS更改div的颜色。如果它影响背景颜色，请适当更改为HTML文件。 否则调试问题并找出背景颜色未出现的确切问题。

解决方案3：尝试直接使用背景颜色名称。 也许它没有从所需的字符串block.settings.color_accent中正确读取。

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

Answer 3

将此添加到架构

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

并在 div 上这样称呼它

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

是 img_url 给您带来了麻烦，这是背景的正确设置。