Klaviyo

Using Klaviyo with Nyla

Nyla's integration with Klaviyo allows you to submit signups to a List, as well as to use their Back in stock feature.

Activating the Klaviyo app in Nyla:

Add Company ID: To get started you need to activate the Klaviyo app in the Nyla apps screen and entering your unique Klaviyo public API key, which you can copy from the source code of your current Shopify site as seen in the following screen recording (or which if you're logged into Klaviyo can be found here). Remember to save and publish after activating the app.

Here's a screen recording of locating the Klaviyo public API key and enabling tracking in Nyla:

NOTE: In addition to installing the Klaviyo app in Nyla, you should keep the official Klaviyo Shopify app active on your Shopify store as this app keeps Klaviyo aware of orders placed by customers.

Once the Klaviyo app is enabled, you can add a signup form to allow users to subscribe. This form can be located anywhere on your site, although it's most common for it to appear in the footer (to sign up users to your main marketing list) or on a landing page (in the case of a signup for a campaign).

Activate popups: To use Klaviyo popups, you should activate the switch allowing you to show popups and publish this update.

Activate Klaviyo flows: Nyla supports both view item and add to cart actions in Klaviyo. The variables available for each event are listed below. To activate this tracking, you should switch on the "Activate Klaviyo tracking" boolean in the activation settings. Note this may require you to update your flows to include the compatible variables in order to ensure flows continue to work after activating Klaviyo tracking with Nyla. See more here.

Adding a Klaviyo subscription signup form

Using Nyla templates:

Nyla has several form-based templates ready for your to use for any signup app that uses form actions

You can use any of the following templates by searching "Newsletter" in Nyla templates as a starting point to set up your form.

After adding the template to your site, you should add the link action SUBMIT_KLAVIYO(listId,source) to the Form content item under Settings:

Click into the Form and click Design, then under Settings, add a form action of SUBMIT_KLAVIYO(listId,source)
- List ID (Required) should be added without quotes or spaces
- Source (optional) should be added without quotes and spaces. This can be left blank if not adding a source to the signup, however we recommend populating this value on all of your signup forms as it will allow you to create segments within a single list within Klaviyo.

Within the Form:
- You need to add an email or phone number form input. Make sure the name of an email input is email. For a phone number, the input field should have the name phone_number.
- You can add additional fields in the form which will be sent to Klaviyo as custom properties. These can be named however you like.
If building from scratch, add a submission button within the form (note you won't need to set a link on this button as the submission action is set within the configuration of the form as described immediately below.

Using Klaviyo for back in stock notifications

In order to submit back in stock subscription events to Klaviyo, make sure the Klaviyo app is activated as described above. Then add the Klaviyo Back in Stock Modal.

See how to add the back in stock block here:

Block Name: Back in Stock Modal: Klaviyo

Adds the Back in Stock Modal layout using the Klaviyo app
Can be used in both the PDP and PLP

To add this block:

1. The Klaviyo app must be activated
2. The block can only be added inside a source product/collection
3. You need to link the Out of stock state for the add to cart CTA to the that has been added. To do this:
  1. Navigate to the add to cart content item that should generate the modal if a product is out of stock
  2. Select the Out of stock state
  3. Add a link to the modal
  4. Change the messaging on the Back in stock state for the CTA to reflect that it is clickable (e.g a common best practice is to change the copy to "Notify me")
  Important: if using inside of different places on the same page (e.g inside of a cross sell that appears on the PDP), you should name the modal differently each time. For example: Back in Stock Modal PDP , Back in Stock Modal Cross Sell.
4. Update the styling of the form and modal to meet your needs

If building this from scratch:

Choose where you want your back in stock notification signup to live. It's typical to have it live in a modal that's triggered from the primary CTA when the variant is out of stock.
- Note: this feature can be added within Source: Product or Source: Collection.
Add a form using Nyla forms with a SUBMIT_KLAVIYO_BACK_IN_STOCK form action.
Add a form input with email as the handle.
The form will submit with the email address inputted by the user as well as the currently selected Shopify Variant ID (or if one isn't selected, the ID of the default Shopify Variant).

To verify the functionality, log into Klaviyo and look up the email address you entered on submitting the form. You should see the event appear in the activity feed (will look like this):

Klaviyo Subscribed to back in stock event

Here's a screen recording of how to do this.

Once you've verified Klaviyo is receiving the back in stock notification subscriptions, you can configure back in stock alerts in Klaviyo.

Setting up your Klaviyo Flows

Nyla supports both view item and add to cart actions in Klaviyo. The variables available for each event are listed in our analytics docs:

⚠️ if your Klaviyo flows use variables with different names than those listed below, you’ll need to update your flow settings in Klaviyo to reference the updated variable(s).