Looping products in abandoned cart in HTML Editor

  • 23 April 2021
  • 2 replies

Badge +6


I’m building a Shopify Abandoned Cart series using the HTML Editor (so I can have more control over the way everything renders in the finished product), and I can’t figure out how to loop through all the products in the abandoned cart. I can display the first item in the cart, but not the others.

The instructions in the Help Center are focused on the drag & drop editor, which I don’t use much for the reasons stated above. How do I define the array, variables, alias, etc. and surround it with code to make it loop through all of the products? What code do I surround the block to be repeated with? Can this even be done with the HTML editor?


Thanks in advance...aj


Best answer by julie.accardo 24 April 2021, 14:00

View original

2 replies

Userlevel 5
Badge +34

Hi @ajohns,


You will need to set up a data source for the block. This feature allows the single block to pull in all products within the event.


The row collection within the data source will be the syntax at the beginning of the tag you get from the data you want to display (example, price, quantity, product URL, etc). The row alias is replacing the row collection in the tag which allows the tag to go over every instance of that data within the event. In the example below, {{ event.extra.line_items.0.product.images.0.src }} turns into {{ item.product.images.0.src }}.

Any metric that starts with ‘event.extra.line_items’ will be replaced with ‘item.’


See an example below of how to format the data source:


I hope this helps!


Userlevel 7
Badge +44

That is indeed one way, the other way would be to use {% for %} blocks