Klaviyo Back In Stock Form
Shopify Storefront data and cart logic is bound to your Webflow elements through Shopyflow attributes. Connecting your Webflow site to Shopify is done by adding custom attributes to your Webflow elements.
Yet, you are not required to type or edit attributes manually. Shopyflow provides you with the pre-configured components needed to create your store, as copyable Webflow elements right in Webflow designer.
All the copyable Shopyflow Components are native editable Webflow elements. There is no layout or styling limitation on any element.
In the below image hover your mouse on the hotspots to see all the required Shopyflow attributes to build a product page like this in Webflow
The Klaviyo Back in Stock Form lets shoppers request an email alert when a sold-out variant is restocked. It is a Form Block with the sf-klaviyo-back-in-stock-form attribute, and it must be placed inside the Buy Module (the product container). On submit, Storesynk reads the currently selected variant from the Buy Module's Add to Cart Button and creates a Klaviyo back-in-stock subscription for that exact variant over the email channel.
Because the form is tied to the active variant, it always subscribes the shopper to whichever option combination is selected at the time of submission. Pair it with the out-of-stock state so it only appears when the selected variant is unavailable.
If you also add a Klaviyo List ID (sf-klaviyo-list-id) to the submit button, the shopper is additionally subscribed to that Klaviyo marketing list — the same behavior as the standard Klaviyo Form. The list subscription is optional; the back-in-stock subscription happens regardless. You can also collect a phone number (sf-phone) and send extra profile properties with sf-klaviyo-prop — the same behavior as the standard Klaviyo Form.
Requirements
- The Klaviyo Integration must be enabled for your store.
- The Klaviyo onsite script must load on the page. Storesynk reads your public Klaviyo company ID from the onsite script URL (static.klaviyo.com/onsite/js/<company_id>/klaviyo.js); without it, the form cannot submit a subscription.
- Your products must be synced to your Klaviyo catalog (via the Klaviyo app for Shopify) so Klaviyo can match the variant.
- A live Back in Stock flow in Klaviyo to send the restock alert — see Klaviyo Integration.
- The form must be nested inside a Buy Module (Product Container).
Webflow app usage
- In the Storesynk Webflow App, go to Store Builder > Add New > Klaviyo Back in Stock Form.
- Click Copy element.
- Paste the component inside your Buy Module, where you want the back-in-stock form to appear.
- Confirm the Klaviyo Email Field is present — the email field is required.
- Optionally add First Name, Last Name, Phone, a Custom Property, and a List ID.
- Remove the sf-out-of-stock combo class from the top two elements of the component. The component will become automatically visible when the selected variant is sold out.
- In Klaviyo, set up a live Back in Stock flow so subscribers receive the alert (see Klaviyo Integration).
- Publish your site.
Webflow app settings
Inner components
Module contents
Available methods
Klaviyo First Name Field
Klaviyo Last Name Field
Component
contents
Klaviyo Email Field
Webflow app usage
Webflow app settings
Klaviyo First Name Field
Webflow app usage
Webflow app settings
Klaviyo Last Name Field
Webflow app usage
Webflow app settings
State management
Related Utilities
