编辑或删除 Buy Button 或嵌入式购物车
Buy Button 和购物车是通过您添加到网页的源 HTML 的嵌入代码生成的。如果您想更改网页上的按钮或购物车的外观或行为,则需要更改关联的嵌入代码。
删除 Buy Button 、嵌入式产品系列或嵌入式购物车
删除现有 Buy Button、产品系列或嵌入式购物车:
打开包含 Buy Button 、嵌入式产品系列或嵌入式购物车的网页的源 HTML。
从源 HTML 中删除整个嵌入代码。对于 Buy Button,嵌入代码看起来将与以下代码类似:
- 保存更改。
编辑 Buy Button
若要更改现有 Buy Button 的外观或设置,您必须在源 HTML 中显示的嵌入代码中编辑其主 div
标签的内容:
嵌入式 Buy Button 的每个功能都由主要 div
标签中的单独属性控制。您可以直接在源 HTML 中添加、删除或更新这些属性。
例如,如果您希望现有 Buy Button 将用户定向到产品页面而不是结账页面,请执行以下操作:
打开包含您要更改的 Buy Button 的页面的 HTML。
在 Buy Button 的嵌入代码的主
div
标记中找到data-redirect_to
属性:将属性的值更改为
product
:保存更改。
Buy Button 的主 div
标签具有很多可以编辑的属性:
属性 | 值 | 默认 |
---|---|---|
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 代码片段,然后编辑其属性。每个属性控制购物车的外观或工作方式的不同部分。
若要编辑您网站的购物车,请执行以下操作:
打开包含要编辑的购物车的页面的 HTML。
粘贴以下代码:
将
your-shop-name.myshopify.com
替换为您商店的myshopify.com
地址。将相关属性添加到购物车的主
div
标签,并对其进行更改以包括您需要的值。例如,如果您想更改显示在购物车顶部的文本,则需要将data-cart_title="your text"
添加到代码片段中的主div
标签。结果将与下面类似:
- 完成后,保存您的更改。
购物车属性
您可以使用许多属性来自定义您网站的购物车的属性:
属性 | 值 | 默认 |
---|---|---|
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
元素还包含以下属性:
属性 | 值 | 默认 |
---|---|---|
data-collection_handle |
展示的产品系列的 handle,基于产品系列的标题。每个产品系列在 Shopify 中都有一个唯一的 handle。 | 特色产品系列的 handle |
data-embed_type |
在 Buy Button 、嵌入式产品系列和嵌入式购物车的嵌入代码之间进行区分。可能的值有 product 、cart 和 collection 。 |
产品系列 |