TABLE OF CONTENTS

These are the primary contents covered in this article:
Dastomize's Personalized Image in WooCommerce
Dastomize's Personalized Image in Klaviyo

DASTOMIZE'S PERSONALIZED IMAGE IN WOOCOMMERCE

As you may know, WooCommerce allows you to send Abandoned Cart Emails and Order Confirmation Emails. With that, Dastomize has intervened itself:
Replacing the personalized image(s) for your automated Abandoned Carts & Order Confirmation Emails.
Replacing the personalized image(s) into the buyers' Cart and Checkout step on the live store.
Adding a View Your Personalized button to the Checkout step .
What the View Your Personalized button does is re-display the personalized design that your customers created.

For example, you initially put John as the custom text in your product mockup, and the buyer may change it to Jason. Then, Dastomize will generate the personalized product image with Jason's name. Finally, the personalized image will appear exactly when the customer hits this button.
(With the view personalization button, customers can review the personalized text/clipart before checkout.)

DASTOMIZE'S PERSONALIZED IMAGE IN KLAVIYO

If you use Klaviyo to manage your email flows instead, these setting steps for Klaviyo emails are required to acquire the correct personalized mockup image for your Abandoned Cart Email and Order Confirmation Email, or other flows. That implies you'll have to set up the Script on your own. To learn how to do it, please follow the steps below:

Step 1: Choose the email template you'd like to modify.

This article will use the Abandoned Cart Email flow as an example.

Step 2: Customize the email template.

After you've decided on a template, click the Edit Content button to start modifying.

Step 3: Find the Column which contains the Thumbnail Image.

After you clicked on the Edit Content button in step 2, a new dashboard should display:
Click on the Photo icon to open its Table Block on the left menu.
Find the Column that contain the image and then remove it by clicking the X button.



Click Add Column. A new column will appear as "Column 2".
Hold the three line icon and drag the column content to the top in order to replace the image column that you just removed.


Optional: You can clear or replace the Heading name to whatever you prefer.

Step 4: Input the Script(s)

To find the Scripts, you may go to Dastomize > Settings Menu > Customization.
As you can see, we have two scripts ready for you. One for the Abandoned Cart Email and one for the Order Confirmation Email.
Hit the Copy to Clipboard button of the script that you want to set up and move on to the next step.


The function of the Scripts is to distinguish between normal products and personalized products. If the product is customized by the customer, it will convert the product mockup image to the personalized one.

After installing the script, the mockup will automatically generate a maximum width of 250px. 250px is Klaviyo's recommended size for desktop images.

You can adjust the max-width manually if you want to make the email more appealing:
Find this code style="max-width: 250px
Then change 250px to another number, for example 100px. This will result in the change of the image's ratio on the email.

Step 5: Replace the Script(s)

Go to the following section: Rows > Dynamic > Column1 > HTML Code.
Paste the script you just copied from the above step to the section demonstrated in the image below.


Click SAVE and you are good to go! It should like the pic below once you are done.

Step 6: Double-check your settings

You can check the Klaviyo emails by 2 ways:
Preview Email by Klaviyo:
- After you finished adding the script to a Klaviyo email, go to Preview menu.
- Choose Show directly in Klaviyo or Send as an email to your email address(es).



Create an abandoned cart / test order:
Checking the personalized preview script for abandoned cart email:
- You'll have to create an actual cart on the live store and abandon it to receive the abandoned cart email. Then, check the personalized preview image in the receiving email to see if the script works.
- You can do so by following the instructions below:
Go to your live store and add a product to your cart.
Provide your email address at check out step.
Close the window so you cart will be abandoned.
You should receive an Abandoned Cart email after the pending time that depends on your settings.

Checking the personalized preview script for Order Confirmation email:
Go to the Message Content page in Klaviyo.
Click at CC/BCC to open these fields. Enter the BCC email that you want to receive a copy of the real Order Confirmation email.
You will receive a copy of order confirmation email whenever your customer receives one.
Please note that this will only work with a valid order.


You can also enable the Sandbox mode on your live store and check out as a customer to receive the Order Confirmation email.

Please contact our Customer Success Team at support@dastomize.com or click HERE for assistance if you are having trouble following this instruction.

Updated on: 17/05/2022