Skip to content

E-commerce / Case 11

Real scenario · client identity private

Variant-specific back-in-stock alerts with a working contact-form fallback

A sold-out product needed a useful Notify Me flow even when the notification integration was unavailable. The theme started with a working contact form and enhanced it with variant-specific Klaviyo subscriptions when the service was configured.

ShopifyKlaviyoJavaScriptProgressive enhancementProduct UX

Plain-English summary

What this solved for the business or user

Customers can register interest in an unavailable product. When the notification service is active, the request targets the relevant variant for a restock alert. Otherwise, the store receives a contact request with enough product detail to handle it manually.

01 / Real situation

What was happening

The storefront needed restock notifications for sold-out products, including products with no currently available variant. A form that depended entirely on JavaScript and an external service would stop being useful when configuration was missing or the service could not be reached.

02 / Constraint

Why the obvious solution was not enough

An automated restock subscription and a manual contact request are different outcomes. The interface needed to support both without implying that a fallback contact message had created an automated alert. The request also had to identify the relevant variant rather than only the parent product.

03 / Implementation

How the solution works

  1. Make the markup a functional Shopify contact form before adding any notification-service behavior.
  2. Enhance the form with a Klaviyo back-in-stock subscription only when the integration is configured and a relevant variant can be identified.
  3. Keep a usable variant selection for a fully sold-out product instead of assuming an available variant always exists.
  4. Fall back to the contact-form submission when configuration is missing or the enhanced request fails, while retaining a working path with JavaScript disabled.
  5. Include readable product and variant context in the fallback request, omitting empty values and generic default-variant labels.
  6. Keep the automated subscription path distinct from the manual follow-up path in the form's feedback and release checks.

04 / Release checks

What should be verified before shipping

  • Test a fully sold-out product and products with several unavailable variants.
  • Confirm the enhanced request subscribes to the intended variant rather than another option.
  • Check configured, unconfigured, and unreachable integration states, plus JavaScript-disabled submission.
  • Verify fallback messages contain useful product and variant context without empty fields or default labels.
  • Confirm automated-alert feedback and manual-request feedback describe the outcome that actually occurred.

05 / Result

What changed

The Notify Me feature could use automated variant-level alerts while retaining a simpler contact route when the integration was unavailable. The fallback preserved product context for manual follow-up instead of leaving the customer with a service-dependent dead end.

Reusable lesson

Build the smallest working path first, then enhance it. A useful fallback preserves the user's request even when it cannot provide every feature of the integrated service.