Introduction
The integration of Cylindo with Klaviyo allows customers to expand the usage of the Cylindo content by allowing Klaviyo’s users to show the media content served by Cylindo Cylindo through the email and message flows.
Getting Started
In this tutorial we are creating an implementation using Shopify + Klaviyo + Cylindo Content where we expect to display the product images generated by Cylindo, through Klaviyo emails.
For this tutorial we expect that customers have knowledge about Klaviyo onsite tracking, custom events and flows, so in case you want to read more about these concepts, you can find more information here:
As we explained above for this tutorial we are using Shopify, so, for companies that are not using Shopify, and are using another eCommerce platform supported by Klaviyo, you will need to install and configure the Klaviyo platform following the steps from the “How to integrate” section here.
For companies that are not using an eCommerce platform supported by Klaviyo, customers need to install the Klaviyo JavaScript API, identify their customers and track the Viewed product events manually. To learn more about it ready this article.
Configuration
To show Cylindo content through the Klaviyo follow up emails, we first need to send the Cylindo URLs to Klaviyo. To achieve this, we need to enable the Onsite tracking key tags in our Shopify’s online store.
Then when the onsite tracking is enabled, we need to create a new flow to follow up the Abandoned carts in Klaviyo. To enable it you can follow up the steps displayed here but also you can read more about their abandoned cart flows (more information here).
For any further configurations needed in Shopify integration or troubleshoot any issue related with the Viewed products events, read these articles:
When the abandoned cart flow is already configured in Shopify and Klaviyo using the official documentation, now we can modify it to add the extra urls needed for the products visualization:
- To start with this Cylindo implementation we need modify our Shopify’s Product Detail Page to achieve the following behavior.
- From now, each time a product is added to the cart in the PDP, we’re going to generate the path of the Cylindo images that we’re going to use in Klaviyo using the Cylindo’s Content API.
- To create the images, we’re going to use Line item properties from Shopify, as they explain in their documentation these properties are used to collect customized information for an item added to the cart. This information can be collected from the buyer on the product page.
- To learn more about line item properties, please read the below links
- The line item properties should be added in the file main-product.liquid file from the Sections folder that we’ve modified in our Integration tutorial.
- On this file we need to add the below snippets to add the cylindo urls to the cart items.
- The below HTML elements need to be added within the cart form.
- The resultant html should look like this:
- The below JS function named setLineItemProperties should be pasted right after the declaration of the getFeatures
- The resultant JS should look like this:
- Now we need to execute our setLineItemProperties right after the viewer creation and also right after the features are changed. Please notice that we’re passing the array of features that we calculate each time the features are changed through the function.
- To confirm everything works properly we should save our PDP template, refresh the page and start adding products to the cart with the Browser console open.
- In the network tab when you search for cart, 2 ajax calls are shown and for each of them each time product is added to the cart the items should contain the properties filled with our Cylindo images:
Important note: Please notice that for this example, we’re pulling an image of a 360 frame and the QR code to launch our AR experience on mobile devices.
In case a different cylindo image is needed, for example, a different frame number, or background, the changes need to be handled with the Content API
You can read more about the Content API here.
1. Add Added To Cart - Abandoned Cart flow
When the Shopify online store is configured, we need to configure the Flows in the Klaviyo platform to react when they’re triggered according to the rules that we specify for them.
- Open the Klaviyo Platform and open the Flows option from the main menu located in the left panel.
- Click the button Create Flow located in the top right corner.
- Search for the Abandoned Cart Reminder flow.
- Add the flow, by clicking the Create Flow
2. Update email template to add Cylindo content
- When the flow is created Edit the content of the email of the flow using the buttons Edit and Edit content displayed in the below images.
- When the template is displayed, click the block bordered in the below image, where the Image and the product details are displayed. It should display the edit options in the left panel.
- In the left panel, there are 3 sections displayed, Layout, that contains the order of the columns, Column 1 that contains the image and Column 2 that contains the product details. Above these sections there is a menu with some buttons that we are going to use on the next step.
- Click the second icon displayed in the top menu and fill the form indicating Klaviyo that we are going to iterate the items array, and that the alias for each element of the array will be item. You also need to switch the above button to On. When all these elements are configured click save to store the changes.
This configuration indicates to Klaviyo that the block element needs to be repeated for each item found in the items array.
- When the item alias is configured, it can be used in the below group of sections, so the next step is to use the item and the cylindo_360_image we’ve passed through the Klaviyo event, so for this stem we’ve to change the image url along with the texts displayed for each item.
The variables used for the below sections are item.cylindo_360_image and item.title.
Configuration of Column 1
Configuration of Column 2
- Click the Save Content button from the top right corner.
- To see the preview of our email click the preview button from the left menu.
- Then select the email event that you want to test and click the button Preview now.
- The next screen shows how your email will be displayed on the customer’s side.
- Another important thing that can be achieved with Klaviyo is that we can decide which content is displayed when the follow up email is open on a specific device, so now we can show our QR code image for Desktop devices and the 360 frame image on mobile devices.
- To do that, we first need to select the block, when it is selected in the right menu the option Block Styles is enabled. This tab allows us to select the device where this block needs to be rendered. Therefore, the above block will be only displayed on mobile devices because it already contains the 360 frame.
To check how the block looks we can use the top right corner buttons to switch between the desktop view and the mobile view, please see how the block is only shown only on mobile devices while desktop devices don't show the block. Please also notice that we also used the Block menu again to center the title of the product.
Mobile:
Desktop:
- Now, we can clone the block using the second option from the top left menu displayed over the block.
- When the new block is created, now we can set the styles for the block and indicate that this new block should be only displayed on desktop devices. As a result, now each view will have its own block.
- Now, for the block that we’ve created for desktop devices, we can show a different image, to change that we should go back to the Block menu and change the column 1 to show a different image, for this case cylindo_qr_image.
Now if we check the preview of the email the desktop option is now displaying the QR code image:
- Finally, to check the complete implementation we can send the email in the preview window instead of checking the preview in Klaviyo to see how it looks in multiple email platforms such as Hotmail, Gmail, etc.
Hotmail desktop device:
Gmail mobile:
