Skip to main content
Solved

How to Link products in Abandoned Cart New Template


Forum|alt.badge.img+3
  • Problem Solver I
  • 5 replies

Hi all, 
I am trying to create a new abandoned cart flow in the new editor. I figured out how to link the image with the title, quantity and price. But the title and the image are not linked.

 

Does anybody know what I am doing wrong? 

 

Thank you in advance! 

 

Best answer by David To

Hello @SemMob,

Welcome to the Klaviyo Community!

I would suggest double checking and making sure you’re using the correct variables as the link to your product title and product image. In my experience, using a {{ item.url }} as a variable is common if you’re using a WooCommerce integration, but not Shopify. Assuming you’re on Shopify - based on the tag you used for this post. Typically, a standard Shopify Checkout Started event won’t actually pass a URL linking back to the individual product. Instead, you’ll typically need to recreate the product URL using something such as {{ organization.url }}products/{{ item.product.handle }}

Although it’s listed in our How to build dynamic blocks in a flow email Help Center article pertaining to our classic editor, it does provide a great resource on understanding the variables you’ll want to use when linking back to your product page. As highlighted in the Step 8 (Optional): Link to the product page subsection of that article:

  Event Variable Final Tag
BigCommerce {{ event.extra.items.0.product.url }} {{ organization.url }}{{ item.product.url }}
Magento 1 {{ event.extra.line_items.0.product.key }} {{ organization.url }}{{ item.product.key }}
Magento 2 {{ event.Items.0.Product.FullURL }} {{ item.Product.FullURL }}
Shopify {{ event.extra.line_items.0.product.handle }} {{ organization.url }}products/{{ item.product.handle }}
WooCommerce {{ event.extra.Items.0.URL }} {{ item.URL }

 

I hope this helps!

David

View original
Did this topic or the replies in the thread help you find an answer to your question?

9 replies

David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2456 replies
  • Answer
  • June 15, 2022

Hello @SemMob,

Welcome to the Klaviyo Community!

I would suggest double checking and making sure you’re using the correct variables as the link to your product title and product image. In my experience, using a {{ item.url }} as a variable is common if you’re using a WooCommerce integration, but not Shopify. Assuming you’re on Shopify - based on the tag you used for this post. Typically, a standard Shopify Checkout Started event won’t actually pass a URL linking back to the individual product. Instead, you’ll typically need to recreate the product URL using something such as {{ organization.url }}products/{{ item.product.handle }}

Although it’s listed in our How to build dynamic blocks in a flow email Help Center article pertaining to our classic editor, it does provide a great resource on understanding the variables you’ll want to use when linking back to your product page. As highlighted in the Step 8 (Optional): Link to the product page subsection of that article:

  Event Variable Final Tag
BigCommerce {{ event.extra.items.0.product.url }} {{ organization.url }}{{ item.product.url }}
Magento 1 {{ event.extra.line_items.0.product.key }} {{ organization.url }}{{ item.product.key }}
Magento 2 {{ event.Items.0.Product.FullURL }} {{ item.Product.FullURL }}
Shopify {{ event.extra.line_items.0.product.handle }} {{ organization.url }}products/{{ item.product.handle }}
WooCommerce {{ event.extra.Items.0.URL }} {{ item.URL }

 

I hope this helps!

David


Forum|alt.badge.img+3
  • Author
  • Problem Solver I
  • 5 replies
  • June 15, 2022

Hi @David To,

Thank you so much. It worked!  only had to add one more / before “products”. Do you also know what to use instead of {{ item.title }} to link the title of the product to the productpage? 

Kind regards

Sem


David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2456 replies
  • June 16, 2022

Hey @SemMob,

You mean for your product title? If the previously provided variable works, i don’t see why you wouldn’t be able to use the same one!

David

 


Forum|alt.badge.img+3
  • Author
  • Problem Solver I
  • 5 replies
  • June 17, 2022

Hi @David To , 

Thanks! I've already fixed it :) 

 


Forum|alt.badge.img+1
  • Contributor I
  • 2 replies
  • July 28, 2022
SemMob wrote:

Hi @David To,

Thank you so much. It worked!  only had to add one more / before “products”. Do you also know what to use instead of {{ item.title }} to link the title of the product to the productpage? 

Kind regards

Sem

 

Hey Sem,

 

Would you mind sharing where exactly you put the forward slash? Here’s a screenshot of my code and the forward slash being put in line 4 before the code “ products/ “

 

I also want to note that my Organization address in my Klaviyo account is “https://bitstackd.com/” with the extra forward slash at the end. I saw someone on twitter mention this (https://twitter.com/zachmstuck/status/1243578564240424971?lang=en), and said this might be the problem. Having done both those things, it still doesn’t solve the problem for me

 

Thanks for helping out! I appreciate it!

Usman

 

<div>
<div style="text-align: center;"><span style="font-family: Inter, Verdana, Geneva, sans-serif; font-size: 16px; color: #1a2238; font-weight: bold;"><img src="{{ organization.url }}/products/{{ item.product.handle }}" alt="" width="250" /></span></div>
<div style="text-align: center;">&nbsp;</div>
<div style="text-align: center;"><span style="font-family: Inter, Verdana, Geneva, sans-serif; font-size: 16px; color: #1a2238; font-weight: bold;">{{ item.product.title }}</span></div>
<div style="text-align: center;"><span style="font-family: Inter, Verdana, Geneva, sans-serif; font-size: 16px; color: #1a2238;">{% currency_format item.line_price %}</span></div>
<div style="text-align: left;">
<div style="text-align: center;"><span style="font-family: Inter, Verdana, Geneva, sans-serif; font-size: 16px; color: #1a2238;">Quantity: x{{ item.quantity|floatformat:0 }}</span></div>
</div>
</div>

 


Forum|alt.badge.img+3
  • Author
  • Problem Solver I
  • 5 replies
  • July 28, 2022

Hi @UsmanA

Thanks for reaching out. When I click on your twitter link I see that they are adding the / in the website url. You can find that in Setup Wizard. In the colum below we use this line:
{{ organization.url }}/products/{{ item.product.handle }}

I see that you are still in the old klaviyo editor. We are using the new template since 2 months and we are loving it! 

So it looks like the screenshots below. I hope this will help you out.

@David To, do you have more recommendations?

 


David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2456 replies
  • July 28, 2022

Hey @UsmanA,

I think @SemMob’s got the right idea here. My colleague @shoshana.antunes also provided similar instructions in their community post below which goes over the same thing:

David


Forum|alt.badge.img+1
  • Contributor I
  • 2 replies
  • July 29, 2022

Hey @David To and @SemMob thanks for your replies.

 

I am using the new editor, but just to grab the screenshot I went into the html editor. I’ve tried both ways (adding a forward slash in my organization name and changing from https:// to https://www.organizationame.com, AND also putting a forward slash as shown by Sem above, but to no avail. 

I still cannot link the product images to their respective product pages on my website. If you have any more suggestions, I’d be happy to try out! Btw, is my code wrong by any chance (I know even a missing semi-colon can cause issues, so just curious)!

 

Thank you again!
Usman

 

 

 


David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2456 replies
  • July 29, 2022

Hey @UsmanA,

Sounds like you may have been doing one too many things. The {{ organization.url }} variable will pull in the exact URL as defined under your account’s organization settings. This means that if your website URL under your account’s organization settings already includes a forward slash so it reads something like website.com/, then you wouldn’t need to manually add one into your dynamic table block when creating your hyperlinks. 

Another option available to you would be instead of using the {{ organization.url }} variable, you can manually define your website url when creating your hyperlinks. For example, instead of using {{ organization.url }}products/{{ item.product.handle }} as your hyperlink you can use something like YourWebsite.com/products/{{ item.product.handle }}

If you’ve gone ahead and tried even the manual method, and is still not working, then this means there may be other factors causing your issue. In my experience, the most likely cause is that you may have created/coded the dynamic table block incorrectly. I would also ensure that there isn’t anything going on with your website and product pages. In small cases, I’ve seen that due to some website errors and/or personalized website structures, the default link structure we suggest does not align to what your website is using. 

If you’re still having troubles, I would suggest reaching out and speaking with some of our wonderful Support colleagues who can take a closer look at your setup. 

David