Shopify站点能否自定义添加CSS类？具体操作方法是什么？

你已经完成的style.css文件创建、在theme.liquid中引入的操作是正确的，完全支持自定义添加CSS类，具体操作步骤如下：

• 第一步：在assets文件夹下的style.css文件中编写自定义CSS类，示例如下：

/* 自定义商品卡片样式示例 */
.custom-product-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.custom-product-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

• 第二步：将自定义类名添加到需要生效的对应元素上，分两种场景操作：
  • 如果你需要给主题模板固定位置的元素加样式：直接修改对应liquid模板文件，给目标标签添加class属性绑定你写的类名即可，比如给商品卡片容器添加上面的示例类，代码修改为：

  <div class="custom-product-card">
    <!-- 商品卡片原有内容 -->
  </div>
  

  • 如果你需要给后台手动编辑的页面、文章、商品详情内容加样式：打开对应内容的富文本编辑器，切换到HTML编辑模式，给目标元素添加class属性即可。
• 第三步：修改完成后保存所有改动，刷新店铺前端页面验证样式生效即可。如果发现样式没有生效，可以打开浏览器开发者工具的元素面板，检查自定义类是否成功添加到元素上，是否被更高优先级的默认样式覆盖，出现覆盖问题时可以通过提升选择器优先级或者添加!important声明解决。

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