【官網設計】如何在商品頁面顯示「商品庫存數量」

有關的文章： 官網設計

Aroma 或其後發佈之佈景主題

此方法適用於 Aroma 或其後發佈之佈景主題主題

步驟一 ： 編輯原始碼

前往編輯原始碼 → 找到 main-product.liquid 文件 → 找到 {% app_snippet 'product/button' %} → 然後在前面加上





main-product.liquid 文件 → 找到 selectCallback → 在下方新增以下代碼

document.getElementById('product-stock-display').innerHTML = ''; if(variant.available && variant.inventory_quantity > 0){ document.getElementById('product-stock-display').innerHTML = variant.inventory_quantity+' piece available'; if(variant.title != 'Default Title') document.getElementById('product-stock-display').innerHTML = variant.title+' '+variant.inventory_quantity+' piece available'; }

步驟二：點擊儲存，完成！

Candy 或之前發佈之佈景主題

此方法適用於 Candy 或之前佈景主題。

步驟一 ： 編輯原始碼

前往編輯原始碼 → templates/product.liquid 裡搜尋 {% app_snippet 'product/button' %} → 在下方新增這段



如果需要修改為較大的字體可以把 "h6" 換成"h3"或"h4"




接著到 assets/timber.js 裡搜尋 Select a valid variant if available 然後在上方貼上這段程式

if(variant.available && variant.inventory_quantity > 0){ $('#product-stock-display').text(' 熱賣中！只剩'+variant.inventory_quantity+'件'); if(variant.title != 'Default Title'){ $('#product-stock-display').text(' 熱賣中！'+variant.title+' 只剩 '+variant.inventory_quantity+'件'); } }else{ $('#product-stock-display').text(''); }

小提示：你也可以自行在代碼裡更換「熱賣中」字眼！

步驟二：點擊儲存，完成！

結果如下：







若要修改商品數量的字體顏色，可以參考以下步驟：

步驟一：萬網 Theme.scss 原始碼文件

步驟二：複製以下原始碼

#product-stock-display { color: #000000; }

步驟三：粘貼在 Theme.scss 裡，顏色編號可以參考 這裡。


步驟四：點擊儲存，完成！

更新時間： 24/10/2023

Updated on: 08/01/2024