Shopify Liquid问题：移动端Logo宽度未读取设置值

看来你在复刻Shopify移动端Logo配置时碰到了宽度不生效的问题，我来帮你捋捋可能的原因和解决办法！

首先从你提供的代码片段来看，大概率是Liquid变量传递不完整，或者主题CSS强制覆盖了设置值导致的——毕竟直接复制桌面端代码，很容易忽略移动端容器的样式差异。

1. 补全Liquid图片尺寸的语法逻辑 #

你代码里的{% capture image_size %}{{ section.settings.mobile_logo_max_width | escape ...是截断状态，完整的写法需要把设置的宽度值转换成Shopify图片API能识别的格式（比如250x），同时要给图片直接绑定max-width样式兜底：

<a href="/" itemprop="url">
  {% capture image_size %}{{ section.settings.mobile_logo_max_width }}x{% endcapture %}
  <img 
    src="{{ section.settings.mobile_logo | img_url: image_size }}" 
    alt="{{ shop.name }}" 
    style="max-width: {{ section.settings.mobile_logo_max_width }}px; width: 100%;"
    itemprop="logo"
  />
</a>

这里要注意：

• 确保mobile_logo_max_width是你在section设置里定义的数字类型字段，如果是字符串类型会导致解析异常
• 加width: 100%是为了让图片在小于设置宽度的容器里自适应，同时保留max-width限制最大尺寸

2. 排查主题CSS的强制覆盖 #

很多Shopify主题会给移动端Logo容器写死固定宽度（比如.mobile-header .logo { width: 175px !important; }），这会直接覆盖你的设置值。你可以：

• 打开浏览器开发者工具（F12），切换到移动端视图，选中Logo元素查看Styles面板，找有没有带!important的宽度规则
• 如果发现主题CSS优先级更高，就给你的Logo样式加更高优先级的选择器，比如：

/* 可以放在section的Liquid代码里，或者主题的custom.css文件中 */
.mobile-header .mobile-logo-container img {
  max-width: {{ section.settings.mobile_logo_max_width }}px !important;
}

3. 验证Section设置的字段定义 #

如果你的mobile_logo_max_width是在schema里自定义的，要确认它是number类型（不是字符串或选择器），否则传递的值可能不是纯数字：

{% schema %}
{
  "settings": [
    {
      "type": "image_picker",
      "id": "mobile_logo",
      "label": "Mobile Logo"
    },
    {
      "type": "number",
      "id": "mobile_logo_max_width",
      "label": "Mobile Logo Max Width (px)",
      "default": 250,
      "min": 100,
      "max": 500
    }
  ]
}
{% endschema %}

4. 检查Logo图片的原始尺寸 #

虽然你说图片能正常加载，但如果图片本身的原始宽度就只有175px，那即使设置max-width为250px，它也只会显示原始尺寸。可以在Shopify后台查看你上传的移动端Logo图片的实际像素宽度，确保它大于等于你设置的250px。

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