Selling custom one-off products

[soko355]

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.

Any help is appreciated, thanks!

[RobDukarski]

@soko355 

In short, the answer is yes.

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:

{% liquid
  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
    endif
  endfor
%}
{{ content_for_order_summary}}

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.

Another approach would be to use JavaScript after the page renders as the documentation linked above suggests to do. For that you would simply use a similar approach where you store the data to check for, then loop through it and replace the rendered images within the order summary with the personalized images the customer created before they arrived to checkout.

Hope that helps!