Shopify添加购物车按钮技术求助：加购与购买按钮是否有Schema类型？

一、添加购物车/购买按钮的实现方法 #

1. 主题模板自定义 #

在Shopify主题的产品模板文件（如product.liquid或对应section组件文件）中，可直接插入以下代码实现按钮：

• 加入购物车按钮：

<form action="/cart/add" method="post">
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  <button type="submit" class="btn add-to-cart">加入购物车</button>
</form>

• 立即购买按钮（直接跳转结账）：

<form action="/checkout" method="post">
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  <button type="submit" class="btn buy-now">立即购买</button>
</form>

若商品有多变体（如尺寸、颜色），需搭配变体选择的JavaScript逻辑，确保提交的是用户选中的变体ID。

2. 外部网站嵌入按钮 #

如果要在Shopify店铺外的网站添加按钮，可通过Shopify后台的「Buy Button」工具生成嵌入代码，直接复制到外部页面即可，支持自定义样式、库存显示等功能，无需自行开发复杂逻辑。

二、购物车/购买按钮对应的Schema类型 #

针对结构化数据（Schema），存在专门适配电商按钮的类型：

• 加入购物车按钮：使用Offer Schema下的addAction属性，结合AddAction类型，示例代码：

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "示例商品",
  "offers": {
    "@type": "Offer",
    "price": "99.99",
    "priceCurrency": "USD",
    "addAction": {
      "@type": "AddAction",
      "target": "/cart/add?id=123456",
      "name": "加入购物车"
    }
  }
}

• 立即购买按钮：使用BuyAction类型，嵌套在Offer的potentialAction属性中，示例代码：

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "示例商品",
  "offers": {
    "@type": "Offer",
    "price": "99.99",
    "priceCurrency": "USD",
    "potentialAction": {
      "@type": "BuyAction",
      "target": "/checkout?id=123456",
      "name": "立即购买"
    }
  }
}

这些Schema标记能帮助搜索引擎识别按钮功能，优化页面的电商结构化数据展示。

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