编辑或删除 Buy Button 或嵌入式购物车

已于 Oct 23, 2023 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/online-sales-channels/buy-button/legacy-edit-delete。

Buy Button 和购物车是通过您添加到网页的源 HTML 的嵌入代码生成的。如果您想更改网页上的按钮或购物车的外观或行为，则需要更改关联的嵌入代码。

本页相关主题

删除 Buy Button 、嵌入式产品系列或嵌入式购物车

删除现有 Buy Button、产品系列或嵌入式购物车：

  1. 打开包含 Buy Button 、嵌入式产品系列或嵌入式购物车的网页的源 HTML。

  2. 从源 HTML 中删除整个嵌入代码。对于 Buy Button，嵌入代码看起来将与以下代码类似：

<divdata-embed_type="product"data-shop="yourstorename.myshopify.com"data-product_name="Product Name"data-product_handle="product-name"data-has_image="true"data-display_size="compact"data-redirect_to="checkout"data-buy_button_text="Buy now"data-buy_button_out_of_stock_text="Out of Stock"data-buy_button_product_unavailable_text="Unavailable"data-button_background_color="7db461"data-button_text_color="ffffff"data-product_modal="false"data-product_title_color="000000"data-next_page_button_text="Next page"></div>
  1. 保存更改。

编辑 Buy Button

若要更改现有 Buy Button 的外观或设置，您必须在源 HTML 中显示的嵌入代码中编辑其主div标签的内容：

<divdata-embed_type="product"data-shop="yourstorename.myshopify.com"data-product_name="Product Name"data-product_handle="product-name"data-has_image="true"data-display_size="compact"data-redirect_to="checkout"data-buy_button_text="Buy now"data-buy_button_out_of_stock_text="Out of Stock"data-buy_button_product_unavailable_text="Unavailable"data-button_background_color="7db461"data-button_text_color="ffffff"data-product_modal="false"data-product_title_color="000000"data-next_page_button_text="Next page"></div>

嵌入式 Buy Button 的每个功能都由主要div标签中的单独属性控制。您可以直接在源 HTML 中添加、删除或更新这些属性。

例如,如果您希望现有购买按钮将用户定向到产品页面而不是结账页面，请执行以下操作：

  1. 打开包含您要更改的 Buy Button 的页面的 HTML。

  2. 在 Buy Button 的嵌入代码的主div标记中找到data-redirect_to属性：

    data-redirect_to="checkout"

  3. 将属性的值更改为product：

    data-redirect_to="product"

  4. 保存更改。

Buy Button 的主div标签具有很多可以编辑的属性：

可编辑的 Buy Button 标签属性
属性 值 默认
data-shop 与该按钮连接的 myshopify 域名（例如storename.myshopify.com）。 您的 Shopify 域名
data-product_handle 展示的产品的 handle，基于产品的标题。每件产品在 Shopify 中都有一个唯一的 handle。 特色产品的 handle
data-embed_type 在 Buy Button 、嵌入式产品系列和嵌入式购物车的嵌入代码之间进行区分。可能的值有product、cart和collection。 产品
data-display_size 整个嵌入内容的最大宽度（不是按钮的最大宽度）。可以为简洁(230px) 或常规(450px)。仅适用于单个产品 Buy Button。 简洁
data-has_image 无论是嵌入全部产品(true) 还是仅 Buy Button(false)。 true
data-redirect_to Buy Button链接到的位置。可以是结账、产品或购物车。如果您想让 Buy Button 连接到同一页面上的嵌入式购物车，data-redirect_to则必须是cart。 结账
data-product_modal 在点击产品时触发显示产品模态。如果data-redirect_to的值为modal，此属性则必须为true，否则应为false。 false
data-buy_button_text Buy Button 上显示的文本。 立即购买
data-button_background_color Buy Button 的颜色的十六进制代码，不带＃。可以是三个或六个十六进制字符。 7db461
data-button_text_color Buy Button 的文本颜色的十六进制代码，不带＃。可以是三个或六个十六进制字符。 ffffff
data-background_color Buy Button 周围区域的背景色。此值可以是一个十六进制代码（根据上述规则所述）或者为transparent。如果为transparent，则不会对嵌入的内容填充任何颜色。 transparent
data-show_product_price 覆盖此属性以决定是否要显示产品价格。可以为true或false。 data-has_image当前的值
data-show_product_title 覆盖以决定是否要显示产品标题。可以为true或false。 data-has_image当前的值
data-buy_button_out_of_stock_text 产品缺货时显示的文本。 缺货
data-buy_button_product_unavailable_text 产品不可用时显示的文本。 不可用
data-product_title_color 产品标题的文本颜色的十六进制代码，不带#。可以是三个或六个十六进制字符。 000000

编辑您网站的购物车

如果您想更改网站购物车的外观或行为,则需要添加单独的HTML代码片段,然后编辑其属性。每个属性控制购物车的外观或工作方式的不同部分。

若要编辑您网站的购物车，请执行以下操作：

  1. 打开包含要编辑的购物车的页面的 HTML。

  2. 粘贴以下代码：

data-sticky="true"data-embed_type="cart"data-shop="your-shop-name.myshopify.com">
type="text/javascript">document.getElementById('ShopifyEmbedScript')||document.write('

  1. 将your-shop-name.myshopify.com替换为您商店的myshopify.com地址。

  2. 将相关属性添加到购物车的主div标签，并对其进行更改以包括您需要的值。例如，如果您想更改显示在购物车顶部的文本，则需要将data-cart_title="your text"添加到代码片段中的主div标签。结果将与下面类似：

data-sticky="true"data-embed_type="cart"data-shop="your-shop-name.myshopify.com"data-cart_title="your text">
  1. 完成后，保存您的更改。

购物车属性

您可以使用许多属性来自定义您网站的购物车的属性：

购物车自定义属性
属性 值 默认
data-shop 相关的myshopify域名（例如storename.myshopify.com）。 您的 Shopify 域名
data-embed_type 在 Buy Button 、嵌入式产品系列和嵌入式购物车的嵌入代码之间进行区分。可能的值有product、cart和collection。 购物车
data-checkout_button_text 从购物车内（而不是购物车按钮）导向至结账页面的按钮上显示的文本。 结账
data-button_text_color 购物车按钮的文本颜色的十六进制代码，不带＃。可以是三个或六个十六进制字符。 ffffff
data-button_background_color 购物车按钮的颜色的十六进制代码，不带#。可以是三个或六个十六进制字符。 7db461
data-background_color 嵌入式购物车周围区域的背景色。此值可以是一个十六进制代码（根据上述规则所述）或者为transparent。如果为transparent，则不会对嵌入的内容填充任何颜色。 transparent
data-text_color 购物车按钮的文本颜色的十六进制代码，不带＃。可以是三个或六个十六进制字符。 000000
data-accent_color 购物车周围显示的边框颜色的十六进制代码，不带#。可以是三个或六个十六进制字符。 000000
data-cart_title 在页面上打开时显示在嵌入式购物车顶部的文本。 您的购物车
data-cart_total_text 嵌入式购物车中总金额旁边显示的文本。 总计
data-discount_notice_text 嵌入式购物车中显示的折扣通知。 结账时将添加运费和折扣码。
data-sticky 说明按钮是出现在其在标记中的位置还是粘在页面的一侧。最近构建的嵌入式购物车在嵌入代码输出中将此属性设置为true。 false
data-empty_cart_text 购物车为空时显示的文字。 您的购物车为空
data-next_page_button_text 嵌入式产品系列中下一页按钮上显示的文本。 下一页

编辑嵌入式产品系列

嵌入式产品系列的嵌入代码包括两个div元素。第一个div包含嵌入式购物车的代码，第二个div包含嵌入式 Buy Button 的代码，这些按钮以模态窗口按钮的形式用于产品系列中的每个产品。

第二个div元素还包含以下属性：

Buy Button 代码中属性的定义
属性 值 默认
data-collection_handle 展示的产品系列的 handle，基于产品系列的标题。每个产品系列在 Shopify 中都有一个唯一的 handle。 特色产品系列的 handle
data-embed_type 在 Buy Button 、嵌入式产品系列和嵌入式购物车的嵌入代码之间进行区分。可能的值有product、cart和collection。 产品系列