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

Question

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!

icon

Best answer by caroline 24 March 2021, 18:06

View original

caroline · Accepted Answer

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 %}

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

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

{% endif %}About Using Event Variables to Personalize FlowsAgain, 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

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

1 reply

Reply

Most helpful members this week

Reply

Most helpful members this week

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded