如何新增懸浮加入購物車列

懸浮加入購物車列會在顧客瀏覽商品頁面時，讓優惠隨時觸手可及。按鈕可以捲回優惠區，或直接將所選優惠加入購物車。你可以設定在顧客捲動超過小工具後顯示，或從頁面載入時就顯示。

啟用懸浮加入購物車列

懸浮列會在組合編輯器中，針對每個組合個別設定。

1. 開啟您要編輯的組合商品。
2. 開啟 加購項目分頁，然後展開 懸浮加入購物車。
3. 開啟 懸浮加入購物車標題旁的開關。

此列會顯示在這個組合出現的商品頁面上，因此請確認組合已發布，且小工具已設定為在正確的商品上顯示。

選擇按鈕的動作

按鈕動作有兩個選項：

• 捲回優惠區會將顧客帶回小工具，以選擇優惠。
• 將所選優惠加入購物車會顯示所選優惠，並將其與所選商品、贈品及額外項目一併加入購物車。

在加入購物車模式中，懸浮列會跟隨所選優惠、變體、數量、訂閱及加購項目的變更。其總計會與小工具頁尾一致。你可以啟用 顯示價格、顯示原價、顯示節省金額標籤，以及 在按鈕內顯示價格。

如果顧客仍需選擇變體或填入組合欄位，按鈕會將顧客帶到小工具完成操作。未選擇優惠時，按鈕會提示顧客選擇選項。在禁止直接加入購物車的佈景主題中，按鈕會改為捲回小工具。只有可選加購項目的折扣會使用捲回優惠區動作，讓顧客在小工具中完成選擇。此按鈕使用一般購物車流程，而非立即購買。

選擇懸浮列的顯示時機

在 顯示懸浮列下，選擇 小工具捲出檢視範圍後或 一律從頁面載入時顯示。兩者都適用於任一按鈕動作。現有懸浮列會維持捲動後顯示的行為，除非你變更設定。

選擇一律顯示後，加入購物車模式會以你預先選取的優惠開始，並跟隨之後的選擇。如果你允許頁面載入時不選取任何優惠，顧客必須先選擇優惠，懸浮列才能將其加入購物車。

選擇版面配置：浮動或固定

使用 懸浮列版面配置選項，選擇懸浮列在頁面上的呈現方式：

• 浮動，置中的卡片與邊緣保持小幅間距，並保留圓角。
• 固定，固定在底部邊緣的全寬列，從一側延伸至另一側。

兩種版面配置對圓角的處理方式不同。切換至 固定會將懸浮列的圓角半徑強制設為 0，使其能貼齊螢幕邊緣。切換至 浮動時，如果圓角半徑為 0，則會恢復圓角。之後你可以在樣式控制項中微調圓角半徑，請參閱下方說明，但固定版面配置的設計是維持直角。

在桌面版與行動版顯示

兩個核取方塊可控制懸浮列的顯示位置：

• 在桌面版顯示
• 在行動版顯示

兩者預設都會啟用。你可以關閉其中一項，例如只在行動版顯示懸浮列，因為原本的加入購物車按鈕在行動版最有可能捲出檢視範圍。

請使用最長的優惠標題與價格，檢查實際的行動版頁面。在窄螢幕上，懸浮列會簡化部分原價、節省金額及按鈕價格詳細資訊，以保持操作內容清晰易讀。請勿預期小型手機會顯示桌面版上的所有詳細資訊。

設定標題與按鈕文字

在捲回優惠區模式中，懸浮列有兩個文字欄位：

• 標題，顯示在按鈕旁的文字。此欄位支援範本變數，因此你可以插入動態值，例如 {{product_title}}（預設值）、{{saved_percentage}}或 {{price_total}}。使用欄位中的變數插入器即可新增這些變數。
• 按鈕文字，顯示在懸浮按鈕上的標籤。預設值為「選擇組合」。

加入購物車模式會顯示所選優惠的標題，並使用其專屬的 加入購物車按鈕文字欄位。兩個按鈕文字各自有獨立的翻譯，因此變更其中一種模式的文字，不會覆寫另一種模式。

在 懸浮列文字下，你也可以變更免費贈品標籤、單一及多重加購項目標籤，以及 選擇選項按鈕文字。請在多重加購項目訊息中保留 {{count}}，以便顯示實際數量。

新增嵌入式倒數計時器（選用）

你可以使用 在懸浮列中顯示倒數計時器核取方塊，在懸浮列內顯示倒數計時器。

此選項需要在同一個組合中啟用倒數計時器。如果倒數計時器已關閉，核取方塊會停用且無法選取。啟用倒數計時器後，即可開啟此選項。

嵌入式倒數計時器會重複使用倒數計時器設定中的精簡標題，其樣式則會依循懸浮列主題。

如果之後關閉倒數計時器，懸浮列中的倒數計時器也會自動關閉。

設定懸浮列樣式

開啟 懸浮加入購物車樣式群組以調整外觀。控制項分組在以下摺疊區中：

• 背景，懸浮列的純色或漸層。
• 容器，邊框顏色、邊框寬度、圓角半徑、內距及陰影。
• 標題，文字顏色、字型大小及字重。
• 價格，加入購物車模式中的價格文字樣式。
• 按鈕，背景顏色、文字顏色、字型大小、字重、內距及圓角半徑。
• 商品圖片，圖片大小、圓角半徑、邊框寬度及邊框顏色。
• 倒數計時器，背景顏色、文字顏色、字型大小、字重及內距。只有在嵌入式倒數計時器開啟時，才會顯示此群組。

若要快速取得協調一致的外觀，請使用區段頂端的預設色彩選擇器。此選擇器也提供 讓懸浮 ATC 圓角符合主要小工具，可將懸浮列的圓角半徑設定為與主要組合小工具一致，讓兩者風格協調。

關於圓角半徑的注意事項

請記住，固定版面配置會強制使用 0 圓角半徑。如果你在容器樣式中設定圓角半徑，但圓角看起來仍是直角，請確認版面配置已設定為 浮動。

儲存並測試兩種動作

儲存後，使用折扣啟用的指定商品頁面進行測試。在捲回模式中，捲過優惠區後使用懸浮按鈕返回。在加入購物車模式中，選擇優惠與變體，然後透過懸浮按鈕加入購物車。檢查購物車與結帳頁面的數量、變體及總計。在行動版上重複測試，並測試無法購買或未完成的選擇：懸浮列應將顧客帶回去完成選擇。

在我們的範例中，購買 2 件會加入兩個象牙色小尺寸包包，10% 折扣後的商品小計為 $43.20。選擇無法購買的腮紅色小尺寸組合後，懸浮動作會變更為 選擇選項；將其變更為可購買的尺寸後，會恢復「加入購物車」。倒數計時器僅供視覺提示，不會在倒數至零時停止折扣。請參閱 倒數計時器了解期限行為。