Inventory status block

assets/global.js

@@ -849,12 +849,23 @@ class VariantSelects extends HTMLElement {
         if (source && destination) destination.innerHTML = source.innerHTML;
 
         const price = document.getElementById(`price-${this.dataset.section}`);
+        const inventory = document.getElementById(`inventory-${this.dataset.section}`);
 
         if (price) price.classList.remove('visibility-hidden');
+        if (inventory && inventory !== null) inventory.classList.remove('hidden'), this.updateInventory(html);
         this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
       });
   }
 
+  updateInventory(html) {
+    const id = `inventory-${this.dataset.section}`;
+    const destination = document.getElementById(id);
+    const source = html.getElementById(id);
+
+    if (source && destination) destination.innerHTML = source.innerHTML;
+    if (source === null) destination.classList.add('hidden');
+  }
+
   toggleAddButton(disable = true, text, modifyClass = true) {
     const productForm = document.getElementById(`product-form-${this.dataset.section}`);
     if (!productForm) return;
@@ -878,9 +889,11 @@ class VariantSelects extends HTMLElement {
     const addButton = button.querySelector('[name="add"]');
     const addButtonText = button.querySelector('[name="add"] > span');
     const price = document.getElementById(`price-${this.dataset.section}`);
+    const inventory = document.getElementById(`inventory-${this.dataset.section}`);
     if (!addButton) return;
     addButtonText.textContent = window.variantStrings.unavailable;
     if (price) price.classList.add('visibility-hidden');
+    if (inventory) inventory.classList.add('hidden');
   }
 
   getVariantData() {

assets/section-main-product.css

@@ -1244,3 +1244,16 @@ a.product__text {
   margin-left: 1.2rem;
   flex-shrink: 0;
 }
+
+/* Inventory status */
+
+.product__inventory {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.product--no-media .product__inventory {
+  justify-content: center;
+}

locales/en.default.json

@@ -108,6 +108,10 @@
       "choose_options": "Choose options",
       "choose_product_options": "Choose options for {{ product_name }}",
       "description": "Description",
+      "inventory_in_stock": "In stock",
+      "inventory_in_stock_show_count": "{{ quantity }} in stock",
+      "inventory_low_stock": "Low stock",
+      "inventory_low_stock_show_count": "Low stock: {{ quantity }} left",
       "on_sale": "Sale",
       "product_variants": "Product variants",
       "media": {

locales/en.default.schema.json

@@ -773,6 +773,30 @@
         "price": {
           "name": "Price"
         },
+        "inventory": {
+          "name": "Inventory status",
+          "settings": {
+            "text_style": {
+              "label": "Text style",
+              "options__1": {
+                "label": "Body"
+              },
+              "options__2": {
+                "label": "Subtitle"
+              },
+              "options__3": {
+                "label": "Uppercase"
+              }
+            },
+            "inventory_threshold": {
+              "label": "Display Low inventory threshold",
+              "info": "Choose 0 to always show in stock if available."
+            },
+            "show_inventory_quantity": {
+              "label": "Show inventory count"
+            }
+          }
+        },
         "quantity_selector": {
           "name": "Quantity selector"
         },
@@ -1645,6 +1669,30 @@
         "price": {
           "name": "Price"
         },
+        "inventory": {
+          "name": "Inventory status",
+          "settings": {
+            "text_style": {
+              "label": "Text style",
+              "options__1": {
+                "label": "Body"
+              },
+              "options__2": {
+                "label": "Subtitle"
+              },
+              "options__3": {
+                "label": "Uppercase"
+              }
+            },
+            "inventory_threshold": {
+              "label": "Display Low inventory threshold",
+              "info": "Choose 0 to always show in stock if available."
+            },
+            "show_inventory_quantity": {
+              "label": "Show inventory count"
+            }
+          }
+        },
         "quantity_selector": {
           "name": "Quantity selector"
         },