Shopify仅首页应用指定CSS 页面if判断语句不生效问题求助

原有代码失效原因 #

1. 首页判断语法错误：Shopify 中page对象仅对普通独立单页生效，判断首页需要用模板标识template.name == 'index'，page.handle == "Home page"的写法本身不生效。
2. 全局修改.page-width会影响全站所有使用该类的元素（比如商品详情、文章页的内容容器），容易引发其他布局错乱，需要针对性限定导航栏的选择器。

正确实现方案 #

步骤1：确认导航容器类名 #

右键点击你的导航栏选择「检查」，找到导航栏最外层容器对应的类名，主流Shopify主题的导航容器类通常为.header-wrapper或.header__inner，以下示例以.header-wrapper为例，你可以替换为自己站点的实际类名。

步骤2：添加条件样式代码 #

将以下代码添加到主题theme.liquid文件的<head>标签内的自定义<style>区块，或者主题后台自定义设置的「自定义CSS」输入框中即可：

/* 全局默认导航栏撑满100%宽度 */
.header-wrapper .page-width {
  max-width: 100% !important;
  margin: 0 !important;
  /* 如果不需要左右内边距可以把下面两行改为0 */
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* 仅首页恢复原有居中限制宽度的样式 */
{% if template.name == 'index' %}
.header-wrapper .page-width {
  max-width: 1200px !important; /* 替换为你站点原有.page-width的最大宽度值 */
  margin: 0 auto !important;
}
{% endif %}

如果你只需要临时修改不想动原有样式优先级，也可以用反向判断的写法：

{% if template.name != 'index' %}
/* 仅非首页修改导航宽度为100% */
.header-wrapper .page-width {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 15px !important;
}
{% endif %}

注意事项 #

• 如果你使用的是Shopify 2.0版本主题，可以直接在主题编辑器的导航栏设置中，单独给首页配置宽度限制，非首页默认使用全局100%宽度配置，不需要额外写代码
• 如果你的自定义CSS优先级足够覆盖原有样式，可以去掉代码里的!important标识
• 务必给.page-width加上导航父容器的类名限制，避免修改到其他页面区域的布局

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