Skip to main content
Solved

Display (non-catalog) image based on purchased product in HTML

  • March 9, 2021
  • 1 reply
  • 208 views
ajohns
Problem Solver I
Forum|alt.badge.img+6
  • ajohns
  • Problem Solver I
  • 5 replies

I’m in the process of coding a post-purchase series based on a flow. I’m editing in HTML view, and not using the drag-and-drop editor; this is a Shopify-powered store.

We’d like to cross-sell other products. In total, there are three products, and those products are offered in a variety of sizes. I’d like to show or hide images based on whether the customer ordered an additional product.

  • Product A = the purchased product (static)
  • If the additional product purchased is Product B, show image featuring Product C
  • If the additional product purchased is Product C, show image featuring Product B
  • If they purchase neither Product B nor Product C, they receive both images
  • If they purchased both Product B and Product C, no image appears

The images that are being displayed aren’t from the Shopify image catalog; they’re entirely different. Since the products are available in different sizes, I’d like to use a standard if/else statement using some kind of lookup function that basically says, “If additional product purchased is LIKE Product B, show image featuring Product C”.

Does such a thing exist? If anyone reading this requires any additional information, please respond and I’ll do my best.

Thanks in advance!

Best answer by caroline

Hi @ajohns,

Since the images aren’t coming from a catalog, you would just need to include them in a .zip file when you upload the HTML file (Adding Images and Attachments).

In terms of the conditional logic, the syntax will depend on the event that the flow is triggered by. I’m assuming that the flow is triggered by a Placed Order event.

Here’s a pseudocode example of how you could achieve this functionality:

{% if ‘ProductBName’ not in event.Items and ‘ProductCName’ not in event.Items %}

<img src=”ProductC.jpg”>

<img src=”ProductB.jpg”>

{% else if ‘ProductBName’ in event.Items and ‘ProductCName’ not in event.Items %}

<img src=”ProductC.jpg”>

{% else if ‘ProductCName’ in event.Items and ‘ProductBName’ not in event.Items %}

<img src=”ProductB.jpg”>

{% endif %}

About Using Event Variables to Personalize Flows

Again, the above example is pseudocode, so it won’t work if you just copy and paste into your template; you’ll need to adjust the variable names and test the logic.

Best,

Caroline
 

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

1 reply

caroline
Forum|alt.badge.img+8
  • caroline
  • Klaviyo Alum
  • 215 replies
  • Answer
  • March 24, 2021

Hi @ajohns,

Since the images aren’t coming from a catalog, you would just need to include them in a .zip file when you upload the HTML file (Adding Images and Attachments).

In terms of the conditional logic, the syntax will depend on the event that the flow is triggered by. I’m assuming that the flow is triggered by a Placed Order event.

Here’s a pseudocode example of how you could achieve this functionality:

{% if ‘ProductBName’ not in event.Items and ‘ProductCName’ not in event.Items %}

<img src=”ProductC.jpg”>

<img src=”ProductB.jpg”>

{% else if ‘ProductBName’ in event.Items and ‘ProductCName’ not in event.Items %}

<img src=”ProductC.jpg”>

{% else if ‘ProductCName’ in event.Items and ‘ProductBName’ not in event.Items %}

<img src=”ProductB.jpg”>

{% endif %}

About Using Event Variables to Personalize Flows

Again, the above example is pseudocode, so it won’t work if you just copy and paste into your template; you’ll need to adjust the variable names and test the logic.

Best,

Caroline
 

Caroline Lu
cassy.lee
1 person likes this
  • cassy.lee
    cassy.lee

Reply


Terms & Conditions

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy |
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.