如何在CSS文件中访问Shopify主题区块（Section）设置值？

你遇到的问题其实是Shopify主题架构的核心限制导致的——全局CSS文件（比如assets/main.scss.liquid）无法访问区块（Section）的动态设置。原因很简单：

全局CSS文件是在主题编译阶段生成的静态资源，它不会随着页面渲染时的区块实例变化而重新生成。而section.settings是每个区块实例在页面加载时才确定的动态数据，只有在对应的区块模板文件（比如sections/hero.liquid）里，才能获取到当前区块实例的专属设置值，所以你在全局CSS里写{{ section.settings.bg_img_size_desktop }}会被渲染成空值。

下面给你几个可行的解决方案，你可以根据需求选择：

方案1：保留区块内的<style>标签（官方推荐） #

这其实是Shopify官方推荐的处理区块动态样式的方式。因为每个区块实例的设置可能不同（比如你可能在页面上添加多个Hero区块，每个设置不同的背景尺寸），把样式写在区块模板里，能确保每个实例都能应用对应的动态样式。

你当前的写法完全没问题：

<!-- sections/hero.liquid -->
<style>
.hero__image {
  background-size: {{ section.settings.bg_img_size_desktop }};
}
</style>

虽然样式和全局CSS分开，但这是区块专属动态样式的合理存放位置，也能避免全局样式冲突。

方案2：使用CSS自定义变量（兼顾全局CSS和动态值） #

如果想把基础样式留在全局CSS里，只把动态值传递过去，可以用CSS变量的方式：

1. 在sections/hero.liquid的区块容器上，通过行内样式定义CSS变量：

<div class="hero" style="--hero-background-size: {{ section.settings.bg_img_size_desktop | escape }};">
  <!-- 区块内的其他内容，比如.hero__image元素 -->
</div>

2. 然后在assets/main.scss.liquid里引用这个变量：

.hero__image {
  background-size: var(--hero-background-size, cover); /* cover作为默认值，防止变量未加载 */
}

这样既保持了全局CSS的整洁，又能让每个区块实例应用自己的动态背景尺寸。

方案3：将设置移到主题全局设置（仅适用于全站统一的情况） #

如果这个背景尺寸是全站所有Hero区块都统一的，不需要每个实例单独设置，那可以把这个设置项从区块的{% schema %}移到主题的全局设置文件config/settings_schema.json里：

// config/settings_schema.json
{
  "name": "Hero Settings",
  "settings": [
    {
      "type": "text",
      "id": "bg_img_size_desktop",
      "label": "Hero Image Size (Desktop)",
      "default": "cover",
      "info": "Possible values: cover, contain, 310%..."
    }
  ]
}

之后就能在全局CSS里访问这个设置了：

.hero__image {
  background-size: {{ settings.bg_img_size_desktop }};
}

但注意，这个方法只适合全站统一的样式，没法实现单个区块实例的差异化设置。

内容的提问来源于stack exchange，提问作者Daveh0