Custom image of a product on checkout page

New Member
1 0 0

We have a store where customers can order custom prints. We have a separate server that handles image uploading, processing, thumbnail generating, etc. We managed to add custom thumbnails (src= url of the thumbnail on this server) to all pages except checkout. The server is on the same domain, CORS is not an issue. It's very misleading for the customer to see his/her customized product on all pages of the store correctly and then a default placeholder image on the checkout page. To carify: We don't want to upload the image to shopify, it's already hosted. We just want the defailt <img> on the checkout to point to a different url. Thank you for your help.

0 Likes
Excursionist
45 2 1

I'm searching for a solution as well ... guess there is no solution so far, right?

0 Likes
Excursionist
45 2 1

On the checkout-page, does Shopify capture the Product-Details from the Store by Product-ID or is information passed from cart? I mean, the image is obviously the featured_image of the product. If one could set the attribute via JS and pass this information to the checkout apge, this would be perfect.

I tried to manipulate the cartItem attributes within the AJAX-Cart-Plugin and set 'images' and 'featured_image' to my desired image-url. But it is not shown in checkout.

It seems only ID, Quantity and Properties are variables we can change when adding a product to cart.

jQuery.post('/cart/add.js', {
  quantity: 1,
  id: 794864229,
  properties: {
    'First name': 'Caroline'
  }
});

Having this data, Shopify will call the product details on demand in checkout and if there is no image set on the product page (admin), then no image will be shown in checkout. 

0 Likes
Excursionist
45 2 1

Actually there is no way to solve this, except upgrading to Shopify Plus.

0 Likes
Tourist
17 0 0

Hey @QnavWhat,

 

is there a way to submit a CustomAttribute URL link of an image input value and get back in shopify order tab an image instead of a link?

 

Right now i am getting a Link option in Shopify order tab. But I want the actual image to transfer over so that whoever opens the order can see the actual image that was submitted not a Link point back to  mylocalhost...

 

The current solution I see is creating a Database and saving the images and passing the image url to shopify as link...

is there another way?

 

this is what I am currently doing:

HTML

          <input id="image" type="file" accept="image/png, image/jpeg" onChange={(e) => setFile(e.target.files[0])} />
          <AddToCart type="submit" file={file} variantId={shopifyId}>Add To Cart</AddToCart>

JS

  const addProductToCart = async (variantId, file) => {
    try {
      setLoading(true);
      const image = URL.createObjectURL(file).replace('blob:', '');
      // the product Item and quantity
      const lineItems = [
        {
          variantId,
          quantity: 1,
          customAttributes: [{ key: 'Photo', value: `${image}` }],
        },
      ];
      // adds Item to checkout card which takes the Id from newCheckout
      const newCheckout = await client.checkout.addLineItems(
        checkout.id,
        lineItems,

      );
      setCheckout(newCheckout);
      setLoading(false);
    } catch (e) {
      setLoading(false);
      throw new Error('Error in AddProductToCart', e);
    }
  };
0 Likes
Shopify Partner
15 1 0

I guess Shopify will block uploaded files for security reasons. But I got another idea:

 

To show an image (e.g. customised T-Shirt) on the order status page you can submit an order note through your cart. This note could include the link to your image. Prior to that you need to add some liquid code in your Admin > Settings > Checkout --> 'additional scripts':

 

{% if order.note %}
     {{ order.note | img_tag }}
{% endif %}

or If you just added the file name to your order note:

 

{% if order.note %}
     {{ order.note | file_img_url | img_tag }}
{% endif %}

To submit an order note simply include the following code in your cart form template:

 

<textarea class="hide" name="note">{{sku}}.png</textarea>

I added class 'hide' to not unveil this data.

 

If you open the order in Shopify you will see in the top-right corner you order notes:

 

image.png

 

See as well this link about adding media to the order status page --> https://www.131-studio.com/pages/add-media-to-your-shopify-order-status-page

 

Cheers ;)

0 Likes