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

Aroma 或其後發佈之佈景主題

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

步驟一 ： 編輯原始碼

前往編輯原始碼 → 找到 main-product.liquid 文件 → 找到 {% app_snippet 'product/button' %} → 然後在前面加上 <div id="product-stock-display"></div>



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' %} → 在下方新增這段 <div id="product-stock-display" class="h6"></div>

如果需要修改為較大的字體可以把 "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