How to set up lead capture with Shop on a sign-up form

You will learn

Learn how to add the Continue with Shop block to a Klaviyo sign-up form so shoppers with a Shop account can subscribe using the details saved to their account, without typing them in. Shop is Shopify’s shopping app, and many shoppers already have a Shop account from buying on other Shopify stores.

When a shopper clicks Continue with Shop on your form, they choose what to share with your brand in a Shop window. Klaviyo then subscribes them to your list, fills in their name and phone number on later steps of your form, and shows them the step you choose.

Before you begin

Note the following before you add Continue with Shop to a form:

• No Shop Pay or coupon required. Unlike the legacy lead capture with Shop experience, you don’t need to activate Shop Pay on your store or add a coupon to your form.
• Supported form types. You can add Continue with Shop to popup, flyout, embed, and full page forms. It isn’t available for back in stock forms or landing pages.
• Consent. The block always collects email consent. You can also ask for phone number consent for SMS, WhatsApp, or both.
• 1 block per form. You can add 1 Continue with Shop block to each form.
• Not compatible with spin-to-win or Smart Opt-in. You can’t add a spin-to-win block to a form that has a Continue with Shop block, and Smart Opt-in isn’t supported on forms that use Continue with Shop.
• Shop branding. The button always uses Shop’s purple brand color, which you can’t change. You can choose the button text and adjust its size, corner radius, and alignment.

Add Continue with Shop to a sign-up form

To add Continue with Shop to a form:

1. Navigate to Sign-up forms and open your form in the editor, or create a new form.
2. In the left sidebar, click Add content (the plus icon) to open the Add blocks panel.
3. Under Integrations, drag the Continue with Shop block onto the step where you collect email. For example, place it above your email field.

4. Select the block to open its settings. Under Action, choose:
   • Email list: the list that shoppers who continue with Shop are subscribed to.
   • Go to step: the step shoppers see after they finish in Shop. For example, send them to your SMS opt-in step, to a step that collects more information (like their birthday), or straight to your success step.
5. (Optional) To also collect phone number consent through Shop, click the plus icon next to Phone number consent, then set the following:
   • Channels: SMS, WhatsApp, or SMS and WhatsApp.
   • Use a different list: turn this on to add phone subscribers to a separate Phone number list instead of your email list.
   • Disclosure title and Disclosure text: the consent language shoppers see when Shop asks to share their phone number. The disclosure text defaults to your account’s SMS disclosure. If you edit it, click Revert to default to restore it.

6. Under Layout, choose Button only or Divider. The divider adds an “or” line below the button, which separates it from your email field when you place the block above it.
7. Under Button type, choose Continue with Shop or Claim with Shop. Both options work the same way; only the button text changes. Claim with Shop is a good fit for forms that offer a discount.
8. (Optional) Adjust the button’s border radius, width, alignment, padding, and font size.
9. When you’re satisfied with your form, click Publish or schedule.

Autofill name and phone number fields

If a step after the Continue with Shop block collects first name, last name, or phone number, Klaviyo fills in those fields with the details the shopper shares from Shop. Shoppers can review and edit the filled-in fields before they submit the step. Only first name, last name, and phone number are filled in.

To use autofill:

• Set Go to step to the step that contains these fields.
• For name fields, set the text input block’s Profile property to First Name or Last Name.

How Continue with Shop works for shoppers

Once your form is live, shoppers see the Continue with Shop button on your form.

• Shoppers who are signed in to Shop on their device see a personalized Continue with Shop button.
• Other shoppers see the standard button. They can sign in to Shop, or fill out your form as usual.
• On desktop, Shop opens in a pop-up window. On mobile, Shop opens in the same tab and then returns the shopper to your form.
• In Shop, the shopper chooses whether to share their details with your brand. If they agree, Klaviyo subscribes them to email (and to SMS or WhatsApp, if you asked for phone number consent and they agreed), then shows the step you chose in Go to step.
• If a shopper closes Shop without finishing, they can still fill out your form as usual.

Find shoppers who subscribed with Shop

When a shopper subscribes through Continue with Shop, Klaviyo adds the property submission_method with the value continue_with_shop to their Form submitted by profile event. Use this property to find shoppers who subscribed with Shop, for example in a segment definition.

Set up the legacy lead capture with Shop experience

If Continue with Shop isn’t available in your account yet, you can use the legacy lead capture with Shop experience. It recognizes site visitors with Shop Pay accounts once they enter their email, saves and applies their discounts, and offers an easy SMS opt-in.

Shop Pay is an online checkout service offered by Shopify that allows 1-click checkout to improve the buying experience for your customers. Once a buyer uses Shop Pay for the first time, their information is saved for future purchases.

Legacy requirements

You will need to activate Shop Pay on your Shopify store before you can set up lead capture on a Klaviyo sign-up form.

There are certain requirements that make a sign-up form eligible to use lead capture with Shop. Your form must:

• Be a popup or flyout form
  

• Collect email consent on the first step
  • If you want to collect SMS consent also, you must use a multi-step form that collects email consent on the first step, followed by SMS consent on the 2nd step. Forms collecting solely SMS consent are not eligible for lead capture.
    

• Include disclosure language if collecting SMS consent
• Have a coupon (static or unique) configured on the success step

Enable lead capture with Shop on a sign-up form

Set up lead capture on a sign-up form:

1. Select Sign-up forms in Klaviyo’s main navigation.
2. Click on the form where you want to set up lead capture or choose to create a new one.
3. Click Edit Form to enter the editor.
4. Select Targeting and behavior.
5. Under Lead Capture with Shop, toggle the switch on.
6. When you turn this on, any of your form’s unfulfilled requirements for using lead capture populate under the error message. For example, the form below is missing the coupon on the success step:
   
   To resolve this error, click Add block to configure a unique or static coupon on the success step.
   

1. Click on Success in the menu bar to customize the success message that appears when new subscribers submit the form.
   

1. Once you have fulfilled all requirements, you’ll see a green banner informing you that lead capture has successfully turned on.
2. When you’re satisfied with your form, click Publish.

What shoppers see with the legacy experience

Once this form is live, any site visitors with Shop Pay accounts will be recognized when they submit the first step (their email address). A Shop Pay modal will appear asking them to authenticate their account.

The site visitor’s experience will differ depending on the type of form and how they choose to interact with the Shop Pay modal:

• If the shopper chooses not to authenticate their account and immediately closes the Shop Pay modal, your sign-up form will automatically show its next step, whether that is an SMS opt-in step or a success step.
• For an email-only sign-up form, if the shopper enters the code to authenticate their Shop Pay account, the modal will then show the success step with the coupon code, and will inform them that the discount will automatically apply to their next checkout.
• For a multi-step form, if the shopper enters the code to authenticate their Shop Pay account, the modal will next ask for SMS consent. The shopper’s phone number from their ShopPay profile will be pre-filled to create a seamless opt-in experience.
  

• If the shopper gives SMS consent, it will prompt them through Shop Pay’s SMS opt-in experience to confirm their SMS consent, and then show the form’s success step with the coupon that’s automatically saved to their next checkout.
• If the shopper does not give SMS consent, the Shop Pay modal will disappear and they will see the form’s success step with the coupon that’s automatically saved to their next checkout.

Now that you have lead capture with Shop set up on your sign-up form, create a personal Shop Pay account to test the different shopper experiences described above.

Additional resources