I'm creating a website that will be selling custom, one-off products with a flow that involves on-the-fly image creation so that the customer can see what they will be buying. I was wondering if there was any way to show the customer this image during the checkout flow so that they can confirm it's what they expected.
The long form involves modifying the "checkout.liquid" layout file available only to Shopify Plus merchants with the file enabled. I helped with a project just like you're asking about a few months ago and it was relatively quick to implement.
What you want to do is store the URL of that image as a line item property associated with the product so that when you are at the checkout you can loop through the checkout items and the cart items, make sure they are in the same order, and use the needle-in-haystack approach with the "content_for_order_summary" object to replace the variant's image with the image URL in the line item property associated with that line item.
You would use code similar to this:
assign items_array = content_for_order_summary | split: 'class="product"'
for item in items_array
if item contains 'a target="_blank" href="'
assign variant_image_url = item | split: 'class="product-thumbnail__image" src="' | last | split: '?v=' | first
assign personalized_image_url = item | split: 'a target="_blank" href="' | last | split: '">Preview</a>' | first
assign content_for_order_summary = content_for_order_summary | replace_first: variant_image_url, personalized_image_url
It may go against recommended practices for working with the "checkout.liquid" file and if Shopify modifies the contents the solution could break but it would do exactly what you are asking for. The documentation currently says something about how you cannot edit the content before it is rendered, however you can modify the content output by a checkout object before the page loads. I am unsure if they meant that you are not allowed to do so, if you simply should not do so, or if they did not realize that you could do what I outlined above.
Hope that helps!
- Rob Dukarski Helping to make commerce better for everyone!