Contributor III

Solved

How to get a Dynamic Product Cart in Abandon Cart emails with the details of the cart stacked instead of in-line?

Forum|Forum|4 years ago
June 1, 2022
6 replies
2620 views

I want to add a product cart in the Abandon Cart Email but the cart needs to show details in a stack whereas on Klaviyo, the standard cart is in-line where the picture is in the first column and the second column has the details. Is there any way I can manage this?

Flows

This topic has been closed for replies.

Best answer by Dov

Hi @arham004,

Thanks for sharing this question with us.

Here are the steps to vertically stack your abandoned cart block.

Clone your table block so you have the original as a point reference.
Switch the cloned block from dynamic to static. The content will disappear after you do this.

3. Then, delete column 2.

4. Add an additional row.

5. Switch row 1 to an an image and click “Browse”.

6. Select “placeholder” and enter the image tag from the event data. You can use the same tag from your original block (shown here under the dynamic icon). The image will be very large. You can change the image width to make it smaller. You should also center the image.

7. In Row 2, use the event data to enter the other details, such as item name and price. You can also use the tags from the original block. Be sure to center the data.

8. Turn on the block repeat feature and set the Repeat For and Alias like shown below.

Now you'll see your stacked block! I hope that’s helpful. Thanks for being a member of our community.

DovAnswer

Klaviyo Alum

Hi @arham004,

Thanks for sharing this question with us.

Here are the steps to vertically stack your abandoned cart block.

Clone your table block so you have the original as a point reference.
Switch the cloned block from dynamic to static. The content will disappear after you do this.

3. Then, delete column 2.

4. Add an additional row.

5. Switch row 1 to an an image and click “Browse”.

6. Select “placeholder” and enter the image tag from the event data. You can use the same tag from your original block (shown here under the dynamic icon). The image will be very large. You can change the image width to make it smaller. You should also center the image.

7. In Row 2, use the event data to enter the other details, such as item name and price. You can also use the tags from the original block. Be sure to center the data.

8. Turn on the block repeat feature and set the Repeat For and Alias like shown below.

Now you'll see your stacked block! I hope that’s helpful. Thanks for being a member of our community.

DD

A

arham004Author

Contributor III

Hi, thanks for the detailed explanation! I would like to know the same for a Browse Abandonment Cart too since I tried this same procedure with that but it didn’t work for it.

A

arham004Author

Contributor III

Also, this isn’t working for the Abandoned Cart either. I’m Sharing the details I’m adding in the duplicated block

Placeholder: {% if item.product.variant.images.0.src %}{{item.product.variant.images.0.src}}{%else%}{{item.product.images.0.src|missing_product_image}}{%endif%}

Link: {{ organization.url|trim_slash }}/products/{{ item.product.handle }}

The top one works fine, the bottom one isnt capturing the data at all

Dov

Klaviyo Alum

Hi @arham004,

Thanks for your reply.

This should work if it’s done correctly. One thing I’d double-check is that you’ve inserted the “Repeat For” and “Item Alias” with the correct syntax. And also that you turned block repeat on before previewing.

Lastly, ensure the email you’re previewing from is triggered off of the event for that flow. For Abandoned Cart it should be the checkout started event, and for Browse Abandonment, it should be the viewed product event.

The same theory would apply to each flow - just with different syntax. I hope that’s helpful.

DD

A

arham004Author

Contributor III

Hi, could you also share the syntax for the placeholder, link, and item details (for both abandoned cart and browse abandonment) so that I can use those because the ones in my current abandoned cart are different than the ones you have shown in the previous screenshots.

A

arham004Author

Contributor III

Hey Dov! It worked. There was a slight copy paste issue at my end but I got it right eventually!

Thanks a lot!

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials