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

  • 9 March 2021
  • 1 reply

Badge +6

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 24 March 2021, 18:06

View original

1 reply

Userlevel 5
Badge +8

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.