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
  • 6 replies
  • 177 views

Userlevel 1
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 9 April 2021, 16:26

View original

6 replies

Userlevel 6
Badge +5

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.

Hi. I have the same problem but the provided solution did not help me - after export and paste code to shopify notifications it will write me this message: "Body html Liquid syntax error: Unknown tag 'with'" How can I solve this problem please?

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.

 

Hi. I have the same problem but the provided solution did not help me - after export and paste code to shopify notifications it will write me this message: "Body html Liquid syntax error: Unknown tag 'with'" How can I solve this problem please?

Userlevel 6
Badge +5

Hi @michal2391,

Thank you for sharing this with the Klaviyo community.

To clarify, Klaviyo contains two separate order confirmation emails pertaining to Shopify. One is meant to be exported and sent via Shopify, the other is meant to be sent via Klaviyo. The reason you are seeing the error is because the code in the solution is meant for use in Klaviyo (the latter scenario), but you are trying to use it in Shopify. Shopify uses separate liquid syntax from Klaviyo which is the reason behind the error. Therefore, the code would have to be inserted into the Klaviyo order confirmation email in order to function as expected. If you’re looking to achieve the same functionality but in Shopify (and send the order confirmation via Shopify), I’d recommend reaching out to Shopify for next steps on how to amend their liquid syntax.

To dig into each scenario in a little more detail, the first type of order confirmation email (designed to be exported and sent via Shopify) can be accessed by navigating to the Email Templates tab > Create Template > Use classic editor. Near the top of the page, you will find the Shopify Notification Templates tab. Here, you can access a number of pre-built Shopify notification templates that are meant for use only in Shopify.

2019-07-18_12-08-08.png

However, (as mentioned above) the code highlighted in the solution is not designed for use in Shopify. It uses code only designed to be used for order confirmation emails sent via Klaviyo. This type of order confirmation email can be accessed by navigating to the Flows tab > Create Flow > type in “order” and the default flow will appear for selection.

 

I hope that helps!

Hi @michal2391,

Thank you for sharing this with the Klaviyo community.

To clarify, Klaviyo contains two separate order confirmation emails pertaining to Shopify. One is meant to be exported and sent via Shopify, the other is meant to be sent via Klaviyo. The reason you are seeing the error is because the code in the solution is meant for use in Klaviyo (the latter scenario), but you are trying to use it in Shopify. Shopify uses separate liquid syntax from Klaviyo which is the reason behind the error. Therefore, the code would have to be inserted into the Klaviyo order confirmation email in order to function as expected. If you’re looking to achieve the same functionality but in Shopify (and send the order confirmation via Shopify), I’d recommend reaching out to Shopify for next steps on how to amend their liquid syntax.

To dig into each scenario in a little more detail, the first type of order confirmation email (designed to be exported and sent via Shopify) can be accessed by navigating to the Email Templates tab > Create Template > Use classic editor. Near the top of the page, you will find the Shopify Notification Templates tab. Here, you can access a number of pre-built Shopify notification templates that are meant for use only in Shopify.

2019-07-18_12-08-08.png

However, (as mentioned above) the code highlighted in the solution is not designed for use in Shopify. It uses code only designed to be used for order confirmation emails sent via Klaviyo. This type of order confirmation email can be accessed by navigating to the Flows tab > Create Flow > type in “order” and the default flow will appear for selection.

 

I hope that helps!

Thanks for your reply, it helped me a lot, but how can I turn off automatic emails from shopify? Now when you confirm the order, you will receive 2 e-mails, one from shopify and the other from klaviyo. Thank you for your response.

Userlevel 6
Badge +5

Hi @michal2391,

I am glad that the reply was helpful.

That is a great question. The order confirmation email for Shopify can only be disabled for Shopify Plus customers.

Generally, speaking some emails can be turned off in Shopify, while others cannot. Some emails can only be turned off by a Shopify Merchant Success Manager for customers with Shopify Plus. 

The following emails can be turned off for customers with Shopify Plus:

  • Customer account welcome
  • Order confirmation
  • Order cancelled
  • Order refund
  • Shipping update

The following email types cannot be turned off in Shopify (for non-Plus customers):

  • Customer account activation*
  • Customer account welcome
  • Customer password reset*
  • Gift card notification*
  • Order confirmation
  • Order cancelled 
  • Order refund
  • Shipping update

*Denotes emails that cannot be turned off either Shopify Plus or non-Plus customers. 

All customers can turn off the following email types in Shopify:

  • Abandoned checkout notification
  • Shipping confirmation
  • Delivery updates, including local delivery

I recommend checking out Shopify’s notification documentation for more information. 

Reply