Solved

Is there a way to use the block repeat feature for an image to show different color of the same item?

  • 7 April 2021
  • 1 reply
  • 24 views

Badge

Hi there.

I am setting up an order confirmation flow and have managed to use the Shopify template to set up a dynamic product image, but if someone orders the same product in different colors, it keeps showing the first color for all images. Can anyone point me in the direction of how to change this?

 

Thanks!

icon

Best answer by dov.derin 9 April 2021, 16:26

Hi@rachel1990,

Thank you for sharing your question with the Klaviyo Community.

Please navigate to the table block in your Order Confirmation email and click on Rows > Dynamic > Column 1 > Text > Source 

 

 

Copy and paste the following code into the source:

{% with x=item.product.variant.images.0.src %}
<p style="text-align: center;">{% if x %}<a href="{{ event.extra.responsive_checkout_url }}"><img alt="{{ item.product.title }}" src="{{ x }}" style="width: 200px;" /></a>​ {% else %}<a href="{{ event.extra.responsive_checkout_url }}"><img alt="" src="{{ item.product.images.0.src }}" style="width: 200px;" /></a></p>

<p style="text-align: center;">{% endif %}</p>

<p style="text-align: center;">{% endwith %}</p>

You will see the variant image displayed for each item.

Thanks and have a great day.

View original

1 reply

Userlevel 4
Badge +3

Hi@rachel1990,

Thank you for sharing your question with the Klaviyo Community.

Please navigate to the table block in your Order Confirmation email and click on Rows > Dynamic > Column 1 > Text > Source 

 

 

Copy and paste the following code into the source:

{% with x=item.product.variant.images.0.src %}
<p style="text-align: center;">{% if x %}<a href="{{ event.extra.responsive_checkout_url }}"><img alt="{{ item.product.title }}" src="{{ x }}" style="width: 200px;" /></a>​ {% else %}<a href="{{ event.extra.responsive_checkout_url }}"><img alt="" src="{{ item.product.images.0.src }}" style="width: 200px;" /></a></p>

<p style="text-align: center;">{% endif %}</p>

<p style="text-align: center;">{% endwith %}</p>

You will see the variant image displayed for each item.

Thanks and have a great day.

Reply