編輯或刪除購買按鈕或內嵌購物車

此頁面列印時間為 Dec 09, 2023。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/online-sales-channels/buy-button/legacy-edit-delete。

您新增到網頁來源 HTML 的內嵌程式碼會產生購買按鈕和購物車。如果您想變更按鈕或購物車的外觀或行為，則必須編輯相關的內嵌程式碼。

此頁面上

刪除購買按鈕、內嵌商品系列或內嵌購物車

刪除現有購買按鈕、商品系列或內嵌購物車的方式如下：

  1. 開啟含有購買按鈕、內嵌商品系列或內嵌購物車的網頁來源 HTML。

  2. 從來源 HTML 刪除整段嵌入程式碼。購物按鈕的嵌入程式碼格式類似下方所示：

 

<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. 儲存變更。

編輯購買按鈕

若變更現有購買按鈕的外觀或設定，您必須在來源 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>

內嵌購買按鈕的每項功能皆由主要 div 標記中的個別屬性所控制。您可直接在來源 HTML 中新增、移除或更新這些屬性。

例如，若您希望現有購買按鈕將使用者導向產品頁面，而非結帳頁面，則可按照以下步驟進行：

  1. 開啟含有您要變更之購買按鈕的網頁 HTML。

  2. 在購買按鈕嵌入程式碼的主要 div 標記內，找出 data-redirect_to 屬性：

    data-redirect_to="checkout"

  3. 變更 product 的屬性值：

    data-redirect_to="product"

  4. 儲存變更。

購買按鈕的主要 div 標記有許多您可編輯的屬性：

可編輯的購買按鈕標籤屬性
屬性 數值 預設
data-shop myshopify 網域 (例如：storename.myshopify.com) 已連結至按鈕。 您的 Shopify 網域
data-product_handle 精選產品的識別代號，以產品名稱為基礎。Shopify 中的每項產品都具有唯一識別代號。 精選產品的識別代號
data-embed_type 區別購買按鈕、內嵌產品系列及內嵌購物車的內嵌程式碼；可能使用的值為 product (產品)、cart (購物車) 和 collection (產品系列)。 產品
data-display_size 整段嵌入程式碼在網頁上顯示的最大寬度 (非指按鈕寬度)；可設為 compact (中小型) (230px) 或 regular (標準型) (450px)。僅適用於單一產品購買按鈕。 compact
data-has_image 選擇要嵌入完整產品 (True) 或僅購買按鈕 (False)。 是
data-redirect_to 購買按鈕的連結目的地；可以是 checkout (結帳)、product (產品) 或 cart (購物車)。如果您想讓購買按鈕連結至同一頁的內嵌購物車，則 data-redirect_to 必須為 cart。 結帳
data-product_modal 使用者按一下產品時會觸發產品互動視窗顯示。如果 data-redirect_to 的值是 modal，則此屬性必須為 true 或 false。 否
data-buy_button_text 購買按鈕上顯示的文字。 立即購買
data-button_background_color 購買按鈕顏色的十六進位碼 (不含 #)，可能是三個或六個十六進位字元。 7db461
data-button_text_color 購買按鈕文字顏色的十六進位碼 (不含 #)，可能是三個或六個十六進位字元。 ffffff
data-background_color 購買按鈕周圍區域的背景顏色。可能是十六進位碼 (按上述規則) 或 透明。若為透明，則不會對嵌入內容套用任何邊框間距。 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 區別購買按鈕、內嵌產品系列及內嵌購物車的內嵌程式碼；可能使用的值為 product (產品)、cart (購物車) 和 collection (產品系列)。 購物車
data-checkout_button_text 從購物車內導向結帳頁面的按鈕 (並非購物車按鈕) 所顯示的文字。 結帳
data-button_text_color 購物車按鈕文字顏色的十六進位碼 (不含 #)，可能是三個或六個十六進位字元。 ffffff
data-button_background_color 購物車按鈕顏色的十六進位碼 (不含 #)，可能是三個或六個十六進位字元。 7db461
data-background_color 內嵌購物車周圍區域的背景顏色。可能是十六進位碼 (按上述規則) 或 透明。若為透明，則不會對嵌入內容套用任何邊框間距。 transparent
data-text_color 購物車按鈕文字顏色的十六進位碼 (不含 #)，可能是三個或六個十六進位字元。 000000
data-accent_color 購物車周圍邊框顏色的十六進位碼 (不含 #)，可能是三個或六個十六進位字元。 000000
data-cart_title 內嵌購物車在新頁面中開啟時最上方顯示的文字。 您的購物車
data-cart_total_text 內嵌購物車中總金額旁顯示的文字。 總計
data-discount_notice_text 內嵌購物車中出現的折扣通知。 結帳時會加算運費及套用折扣碼。
data-sticky 指出按鈕是要在其放置於標記中的位置顯示，或固定在頁面側邊顯示。最近建立的內嵌購物車在嵌入程式碼輸出中將此屬性設為 true。 否
data-empty_cart_text 購物車為空時顯示的文字。 您的購物車是空的
data-next_page_button_text 內嵌產品系列內「下一頁」按鈕上顯示的文字。 下一頁

編輯內嵌商品系列

內嵌產品系列的內嵌程式碼包含兩個 div 元素。第一個 div 含有內嵌購物車的程式碼，而第二個 div 則含有內嵌購買按鈕的程式碼，其針對系列中每項產品採用互動視窗按鈕形式。

第二個 div 元素也包含下列屬性：

購買按鈕程式碼中相關屬性的定義
屬性 數值 預設
data-collection_handle 精選商品系列的識別代號，以商品系列標題為基礎。Shopify 中的每個商品系列都具有唯一識別代號。 精選商品系列的識別代號
data-embed_type 區別購買按鈕、內嵌產品系列及內嵌購物車的內嵌程式碼；可能使用的值為 product (產品)、cart (購物車) 和 collection (產品系列)。 商品系列

準備好開始透過 Shopify 銷售商品了嗎？

免費試用