Keep Custom Shopify Unavailable Messages Through Variant Changes

Furniture retailers may use unavailable variants for showroom inventory, pickup-only products, or items temporarily withheld from online purchase. In each case, the product page needs a clear message that explains what the shopper can do.

Shopify themes can display that message correctly when the page first loads, then replace it with the generic Sold out label after a shopper changes color, size, or another option. The problem usually sits in the theme’s variant-change JavaScript.

How the message gets overwritten

Many themes based on Dawn disable the submit button when !variant.available and supply a hardcoded label such as window.variantStrings.soldOut. That behavior works for an out-of-stock SKU. It can overwrite a more specific label that Liquid already rendered for the selected variant.

The shopper sees the intended showroom message on initial load. After a variant change, the client script writes Sold out into the button span. Inventory metafields may look like the likely culprit, although the actual problem is the JavaScript fallback.

Use the section response for the button label

We corrected this behavior in an anonymized production Shopify theme. The theme used both the classic VariantSelects flow in global.js and the newer product-info element in product-info.js.

After Shopify returns the replacement section HTML for the selected variant, the theme now reads the unavailable label from the server-rendered product form:

• Locate #product-form-{sectionId} in the fetched document.

• Read the text from [name="add"] > span and check the submit control’s disabled state.

• Pass that text into toggleAddButton or toggleSubmitButton.

• Use window.variantStrings.soldOut only when the section response has no usable label.

This keeps the customer-facing language in the Liquid templates where the inventory rules already live.

Why this approach works

Liquid controls the message. Showroom wording, localized strings, and future inventory rules can remain in the product-form snippets.

The pattern supports multiple theme components. A store may use the older variant-selects component, the product-info element, or both during a migration. Each active path should read the same server-rendered label.

The behavior is easy to test. Select an unavailable variant after an available one, then reverse the sequence. The button text should match the message shown on first load.

Implementation notes for theme teams

• Read the label from the section-rendered product form.

• Account for dataset.originalSection when quick-add or modal contexts rewrite section IDs.

• Trim whitespace from the span text because section HTML may include formatting noise.

• Keep the generic sold-out string as a fallback for true out-of-stock variants.

Preserve the message shoppers need

Variant-change code should reuse the unavailable message already rendered for the selected product form. This keeps the interface consistent as shoppers move between options and allows the storefront to explain showroom and pickup-only inventory clearly.

Building a custom Shopify theme or showroom-aware catalog experience? Talk with Endertech about Shopify theme engineering.