Liquid 语法错误：预期 id 但找到字符串、自定义图像按钮 [Shopify]答案

【问题标题】：Liquid Syntax Error: Expected id but found String, Custom Image Button [Shopify]Liquid 语法错误：预期 id 但找到字符串、自定义图像按钮 [Shopify]
【发布时间】：2021-07-06 06:11:54
【问题描述】：

我是一名初学者 Shopify 开发人员，目前正在学习 HTML/CSS/Liquid。现在，我正在尝试用自定义 .png 图像替换“添加到购物车”按钮，使其可点击且功能强大。

在 product-template.liquid 文件中，我找到了我认为是添加到购物车按钮的这段代码：

<button type="submit" name="add" id="AddToBag" class="btn {{ btn_class }}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary{% endif %}"> 
              <span id="AddToCartText">{{ 'products.product.add_to_bag' | t }}</span>

我将要使用的 .png 文件上传到 Assets 文件夹并找到了资产 url。然后我在一个论坛中找到了这段代码，并将其更改为匹配现有按钮的 id、类型、名称等。

<input src="{{ "ROLL_OVER_CTA_BUTTON.png" | "//cdn.shopify.com/s/files/1/0557/3304/9749/t/2/assets/ROLL_OVER_CTA_BUTTON.png?232" }} type="submit" name="add" id="AddToBag" class="btn"/>

尝试保存文件时，我不断收到 Liquid 预期 id 但在 .png 文件名和资产 url 行中找到字符串的错误。我可以更改/添加到此代码中以消除错误并成功创建自定义图像按钮，还是我从完全错误的方向开始？

任何帮助都非常感谢提前！

【问题讨论】：

标签： html css shopify liquid

【解决方案1】：

要从资产中获取 URL，请使用 'file_name.png' | asset_url

把图片放到按钮上

{% assign imgUrl = 'ROLL_OVER_CTA_BUTTON.png' | asset_url %}

<button type="submit" name="add" id="AddToBag" class="btn {{ btn_class }}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary{% endif %}"> 
  
  <img src="{{imgUrl}}" alt="" class="" loading="lazy" width="" height="">

</button>

【讨论】：