如何在 Shopify 中使用 settings.value 制作 CSS？

Question

我在 Shopify Config 的 settings_data.json 中设置了一个值。

我正在尝试将其插入我的 CSS。

settings_schema.json
...
{
  "type": "image",
  "id": "image1.png"
  "label": "Background Image"
}
...
index.liquid
...
<style>
.div {
 background-color: url({{image1.png}});
}
</style>

但是我无法获取背景图片。

我该如何解决？

Answer 1

您必须对图像使用滤镜才能显示完整的 URL 地址：

例如：{{ image1.png | img_url: 'medium' }}

Answer 2

要获取商店设置的值，您需要调用设置对象。同样在您的架构中，似乎 id 包含值并且缺少逗号。仔细检查一下。

settings_schema.json
...
{
  "type": "image",
  "id": "image1", // Name of variable
  "label": "Background Image",
  "default": "image1.png" // Content
}
...
index.liquid
...
<style>
.div {
 background-color: url({{ settings.image1 }});
}
</style>

如何在 Shopify 中使用 settings.value 制作 CSS？

How to make CSS using settings.value in Shopify?

shopify