Solved

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

  • 1 June 2022
  • 6 replies
  • 1857 views

Badge +2

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?

icon

Best answer by Dov 1 June 2022, 17:50

View original

6 replies

Userlevel 7
Badge +61

Hi @arham004,

Thanks for sharing this question with us.

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

  1. Clone your table block so you have the original as a point reference.

  2. 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.
Badge +2

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.

Badge +2

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

 

Userlevel 7
Badge +61

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.

Badge +2

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.

Badge +2

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

Thanks a lot!

Reply