編輯或刪除購買按鈕或內嵌購物車
您新增到網頁來源 HTML 的內嵌程式碼會產生購買按鈕和購物車。如果您想變更按鈕或購物車的外觀或行為,則必須編輯相關的內嵌程式碼。
刪除購買按鈕、內嵌商品系列或內嵌購物車
刪除現有購買按鈕、商品系列或內嵌購物車的方式如下:
開啟含有購買按鈕、內嵌商品系列或內嵌購物車的網頁來源 HTML。
從來源 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('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">購買產品</a></noscript>
- 儲存變更。
編輯購買按鈕
若變更現有購買按鈕的外觀或設定,您必須在來源 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 中新增、移除或更新這些屬性。
例如,若您希望現有購買按鈕將使用者導向產品頁面,而非結帳頁面,則可按照以下步驟進行:
開啟含有您要變更之購買按鈕的網頁 HTML。
在購買按鈕嵌入程式碼的主要
div
標記內,找出data-redirect_to
屬性:data-redirect_to="checkout"
變更
product
的屬性值:data-redirect_to="product"
儲存變更。
屬性 | 數值 | 預設 |
---|---|---|
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 程式碼片段,然後編輯其屬性。每個屬性將分別控制購物車不同部分的外觀或行為。
編輯網站購物車的方式如下:
開啟含有您要編輯之購物車的網頁 HTML。
貼上下列程式碼:
<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>
將
your-shop-name.myshopify.com
替換成您商店的myshopify.com
位址。將相關屬性新增至購物車的主要
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">
- 完成後,請儲存變更。
購物車屬性
有許多屬性可供您用來自訂網站購物車:
屬性 | 數值 | 預設 |
---|---|---|
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 (產品系列)。 |
商品系列 |