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 裡,顏色編號可以參考 這裡

步驟四:點擊儲存,完成!
這篇說明對您有幫助嗎?
取消
感謝!