Show “Only X available” in Product Detail

To show “Only X available” in Product Detail, like this.

or this.

You can use this code to Store Page Header Injection

<!-- show x available @tuanphan - 21-09-2025 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    if (window.location.pathname.includes('/store/p/')) {
        
        function hideProductPrice() {
            $('.product-price-value').hide();
        }
        
        function showProductPrice() {
            $('.product-price-value').show();
        }
        
        function checkVariantSelection() {
            var selectedCount = 0;
            
            $('select[name*="variant-option"]').each(function() {
                var selectedValue = $(this).val();
                if (selectedValue && selectedValue !== '') {
                    selectedCount++;
                }
            });
            
            if (selectedCount >= 2) {
                showProductPrice();
            } else {
                hideProductPrice();
            }
        }
        
        function getTotalStock() {
            return new Promise((resolve) => {
                if (window.Static && window.Static.SQUARESPACE_CONTEXT && window.Static.SQUARESPACE_CONTEXT.item) {
                    const item = window.Static.SQUARESPACE_CONTEXT.item;
                    if (item.variants && Array.isArray(item.variants)) {
                        let totalStock = 0;
                        item.variants.forEach(variant => {
                            if (variant.qtyInStock && variant.qtyInStock > 0) {
                                totalStock += variant.qtyInStock;
                            }
                        });
                        resolve(totalStock);
                        return;
                    }
                }
                
                const productUrl = window.location.pathname;
                fetch(productUrl + '?format=json-pretty')
                    .then(response => response.json())
                    .then(data => {
                        if (data.item && data.item.variants && Array.isArray(data.item.variants)) {
                            let totalStock = 0;
                            data.item.variants.forEach(variant => {
                                if (variant.qtyInStock && variant.qtyInStock > 0) {
                                    totalStock += variant.qtyInStock;
                                }
                            });
                            resolve(totalStock);
                        } else {
                            resolve(0);
                        }
                    })
                    .catch(() => resolve(0));
            });
        }
        
        function displayStockInfo() {
            if ($('.stock-availability').length === 0) {
                getTotalStock().then(totalStock => {
                    if (totalStock > 0) {
                        const stockHtml = `<div class="stock-availability" style="margin-top: 8px; font-size: 14px; color: #666;">Only ${totalStock} available</div>`;
                        $('.product-price').after(stockHtml);
                    }
                });
            }
        }
        
        hideProductPrice();
        displayStockInfo();
        
        $('select[name*="variant-option"]').on('change', function() {
            var $select = $(this);
            var $wrapper = $select.closest('.variant-select-wrapper');
            
            if ($select.val() && $select.val() !== '') {
                $select.removeClass('show-placeholder');
                $wrapper.attr('data-selected-value', $select.val());
            } else {
                $select.addClass('show-placeholder');
                var optionName = $select.attr('name').replace('variant-option-', '').replace('-select', '');
                $wrapper.attr('data-selected-value', 'Select ' + optionName);
            }
            
            checkVariantSelection();
        });
        
        var urlParams = new URLSearchParams(window.location.search);
        var hasPreselectedVariants = false;
        
        urlParams.forEach(function(value, key) {
            if (key.startsWith('variant-')) {
                var optionName = key.replace('variant-', '');
                var capitalizedOptionName = optionName.charAt(0).toUpperCase() + optionName.slice(1);
                
                var $select = $('select[name="variant-option-' + capitalizedOptionName + '-select"]');
                if ($select.length > 0) {
                    $select.val(value);
                    $select.removeClass('show-placeholder');
                    $select.closest('.variant-select-wrapper').attr('data-selected-value', value);
                    hasPreselectedVariants = true;
                }
            }
        });
        
        if (hasPreselectedVariants) {
            checkVariantSelection();
        }
    }
});
</script>

Remember to change Product Page URL