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

已于 Apr 26, 2024 打印了此页面。若要查看当前版本，请访问 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，嵌入代码看起来将与以下代码类似：

<div data-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>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">购买产品</a></noscript>
  1. 保存更改。

编辑 Buy Button

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

<div data-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 中添加、删除或更新这些属性。

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

  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. 粘贴以下代码：

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

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

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

<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。 产品系列

准备好开始使用 Shopify 进行销售了吗？

免费试用