Stock display

How it works

SparkLayer reads stock from your eCommerce platform, or from your own system if you send it through the SparkLayer API. Whether you manage stock by hand or from an ERP, B2B customers see the same numbers. The customer group's stock display settings then decide how customers see that stock.

How the status is chosen

SparkLayer works from the available quantity of each variant. On Shopify, that's the Available quantity: stock on hand minus units committed to open orders. For example, 1 unit on hand that's committed to an order counts as 0 available, so with Continue selling when out of stock on, the variant shows as pre-order.

Customers see one of these statuses, each with a coloured dot:

Stock labels that come from your own theme, rather than from SparkLayer's interfaces, aren't changed by any of the settings on this page.

Which setting hides which label

All of these are in the customer group's Stock display rule, at Customers,Groups (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Customers › Groups to do this now, whichever platform you're on. Opens in a new tab.:

Show stock levels to customers

You choose what each customer group sees. Stock display settings need version 2.0 or later of the Core Script, the SparkLayer code in your theme. If you're not sure which version you have, ask your developer or see How do I show stock on a SparkLayer version before 2.0?.

1. Go to Customers,Groups (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Customers › Groups to do this now, whichever platform you're on. Opens in a new tab. and click a group's name. To apply the settings to every group, click Edit on the base customer group instead: the other groups inherit from it.
2. Under Inherited rules, click + Override next to Stock display (on the base group, + Customize). The rule moves up to Customized rules.
3. Click Configure and tick Show stock availability to customers.
4. To show exact numbers, tick Show number of units of stock and enter the Max, Low and Last values.
5. Click Save.

Changes to a customer group's rules apply straight away. There's nothing to publish and no sync to wait for.

Show the stock key on desktop

On smaller screens, customers see a stock key under the variants table in the product detail interface when stock display is on. It explains each colour: In stock, Out of stock, Pre-order, Low stock and Last stock.

To show the stock key on larger screens too, you or your developer add this line to your custom CSS:

--spark-pdp-stock-key-desktop: flex;

Set a stock level display limit

To cap the stock number customers see on product pages, go to Settings,Configurations (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Settings › Configurations to do this now, whichever platform you're on. Opens in a new tab. and enter a number in Stock level display limit. For example, with a limit of 100, customers see 100+ when you have more than 100 in stock.

Show stock on product cards

The product card interface can show customers live stock on collection pages too. See Show stock status.

Allow pre-orders and back-orders

Customers can add a pre-order (or back-order) product to an order even when it's out of stock. They see a pre-order message next to it, such as On Backorder or Pre-order.

Set up pre-orders on Shopify

On other platforms, see the developer docs. Pre-orders and back-orders aren't supported on BigCommerce (see Compare platforms).

Change the pre-order message

You can change the pre-order message customers see without code. At Storefront,Options,Translation overrides (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab., add a translation override for pdp.messaging.back-order (product page) and product-card.messaging.back-order (product cards). See Languages and international.

translations: {
  en: {
    "pdp.messaging.back-order": "Pre-order",
    "product-card.messaging.back-order": "Pre-order",
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "pdp.messaging.back-order": "Pre-order",
        "product-card.messaging.back-order": "Pre-order",
      }
    },
  };
</script>

Limit how many units can be pre-ordered

You can set exactly how much stock of a variant customers can pre-order or back-order. Use the sparklayer.min_stock_level metafield, entered as a negative number: -20 lets customers order until stock reaches -20.

1. Make sure the field exists. On Shopify, go to Integrations,Platform (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Integrations › Platform to do this now, whichever platform you're on. Opens in a new tab. and, in the Metafields card, click Configure next to SparkLayer metafields. On other platforms, use the metafield reference.
2. On each variant, set sparklayer.min_stock_level to a negative whole number, for example -6, -12 or -20.

Show a restock date

A restock date tells customers when a pre-order product is expected, for example "Pre-order. Expected shipping date: 17th April". Use it for a "due in" date (when you expect stock) or an "estimated shipping" date (when you expect to ship).

1. Make sure the sparklayer.restock_date field exists. On Shopify, go to Integrations,Platform (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Integrations › Platform to do this now, whichever platform you're on. Opens in a new tab. and click Configure next to SparkLayer metafields: it adds B2B - Restock Date. On other platforms, create it with the type date (see the metafield reference).
2. On each variant, set the date, for example 17/11/2022 for the UK format.

To change the restock date wording, add a translation override for pdp.messaging.back-order-due at Storefront,Options,Translation overrides (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab.. In the text, {restockDate} is replaced with the date.

translations: {
  en: {
    "pdp.messaging.back-order-due": "Due {restockDate}",
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "pdp.messaging.back-order-due": "Due {restockDate}",
      }
    },
  };
</script>

The product matrix can show restock dates too, with the show-restock-date setting.

Sell pre-order products to B2B customers only

If you sell to retail (DTC) and B2B customers from one store, you may want B2B customers to pre-order products that retail customers can't buy, for example a pre-season range.

Tag orders that contain pre-order products (Shopify)

Hide pre-order messages

Customers see a product as pre-order when it meets your store's pre-order criteria. On Shopify, that's when Track quantity is on, Continue selling when out of stock is on, and the Available quantity is 0 or less. You can hide the message in 2 ways:

Stock locations (inventory locations)

If your store keeps stock in several locations, for example by region, you can choose which location's stock a customer group sees. Stock locations need the Growth plan or above.

1. Go to Settings,Configurations,Ordering (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Settings › Configurations › Ordering to do this now, whichever platform you're on. Opens in a new tab. and turn on Multi-location stock, then save.
2. Go to Customers,Groups (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Customers › Groups to do this now, whichever platform you're on. Opens in a new tab. and click a group's name.
3. Under Inherited rules, click + Override next to Stock location, then Configure.
4. Select a location, for example London Warehouse.
5. Click Save. Reset hands the rule back to the base group.

Until a group has a stock location, customers see combined stock from all locations. Each customer group can use one location.

This only changes the stock customers see. It doesn't change which location fulfils the order in your eCommerce platform.

On Shopify, your active locations sync to SparkLayer automatically. On other platforms, stock locations are managed through the Stock API. See Set a stock location for the setup needed on each platform.

Reserve stock for retail customers

If you run retail (DTC) and B2B from one store, both share the same stock, so large B2B orders could leave nothing for retail customers. A reserve stock quantity keeps some stock back for retail:

To set it:

1. Make sure the sparklayer.reserve_stock_quantity field exists. On Shopify, go to Integrations,Platform (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Integrations › Platform to do this now, whichever platform you're on. Opens in a new tab. and, in the Metafields card, click Configure next to SparkLayer metafields: it adds B2B - Reserved DTC Stock Quantity. On other platforms, see the metafield reference.
2. On each variant, enter the quantity to keep back, for example 50, and save.

To reserve a different amount for each customer group, use Product rules per customer group.

Change stock status messages

When stock display is on, you can change the wording of each stock status customers see. You don't need code: add a translation override for its key at Storefront,Options,Translation overrides (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Storefront › Options › Translation overrides to do this now, whichever platform you're on. Opens in a new tab.. See Languages and international.

translations: {
  en: {
    "pdp.messaging.back-order": "Pre-order",
    "pdp.messaging.back-order-due": "Due {restockDate}",
    "pdp.messaging.out-of-stock": "Out of stock",
    "pdp.messaging.low-stock": "Low stock",
    "pdp.messaging.last-stock": "Last stock",
    "pdp.messaging.in-stock": "In stock",
    "pdp.messaging.un-sellable": "Unavailable",
  }
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    translations: {
      en: {
        "pdp.messaging.back-order": "Pre-order",
        "pdp.messaging.back-order-due": "Due {restockDate}",
        "pdp.messaging.out-of-stock": "Out of stock",
        "pdp.messaging.low-stock": "Low stock",
        "pdp.messaging.last-stock": "Last stock",
        "pdp.messaging.in-stock": "In stock",
        "pdp.messaging.un-sellable": "Unavailable",
      }
    },
  };
</script>

Metafield reference

This reference is for whoever sets up your product data. All of these are variant metafields with the namespace sparklayer. On Shopify, create them at Settings,Custom data,Variants (opens in your Shopify admin in a new tab)Opens in your Shopify adminTakes you straight to Settings › Custom data › Variants to do this now. Opens in a new tab.. On other platforms they're variant-level product fields: see the developer docs and your platform's metafields guide.

Troubleshooting

FAQs

display: {
stock: {
  show: true,
  max: 50,
  last: 5,
  low: 15,
},
},

<!-- SparkLayer Core Script: in your theme, just before </head>.
     Already have window.sparkOptions? Add just the setting to it. -->
<script>
  window.sparkOptions = {
    display: {
    stock: {
      show: true,
      max: 50,
      last: 5,
      low: 15,
    },
    },
  };
</script>