How to add images as order options

Highlighted
Tourist
5 0 0

Hello, I'm new to liquid and designing for shopify in general. I am trying to build a product page that will add images from an img src to the order as line items. I'm not looking for a file upload customization, the images are already on the page in an img tag. I was hoping that I wouldn't need an app for this, as most apps do way more than I really need them to do.

Is there an easy way for me to achieve this? I've looked around, and everyone is doing a file upload (which I can't do) or they are using an app for an entire customization suite, which I don't need or want.

 

Thanks in advance for any advice or direction.

0 Likes
Highlighted
Shopify Partner
1426 193 476

Could you maybe elaborate a little more? I don't quite understand the question, if I understand a little more I can look into it for you.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
5 0 0

I would like there to be three pictures included in a customer's order. These images are on the product page, in <img> tags. How do I get these images to be included in a customer's order?

I've seen plenty of pages that can do this through prompting a customer to upload a file. I'm not looking for a file upload option like this.

0 Likes
Highlighted
Shopify Partner
1426 193 476

That didn't explain very much. When you say they are in the product page in <img> tags, where in the product page? Is it in the description of the product? Are the image tags located inside product.liquid? Are the images different for different products? Are there different images for different variants? Etc. My approach would be to do this with liquid and you'd need to do it in the product-template.liquid section (or product.liquid if you dont have a section called product-template.liquid).

A way that you can do this is to include a hidden input field in your product form, and pass it to the cart as a property of the product. So in product-template.liquid you would find your form tags and put the input fields between the opening and closing tags:


  <label for="image1" class="hidden">Image1</label>
  <input id="image1" type="text" name="properties[image1]" class="hidden" value="/link-to-image1">
      
  <label for="image2" class="hidden">Image2</label>
  <input id="image2" type="text" name="properties[image2]" class="hidden" value="/link-to-image2">
      
  <label for="image3" class="hidden">Image3</label>
  <input id="image3" type="text" name="properties[image3]" class="hidden" value="/link-to-image3">

 

Hide those with CSS by making elements with the class "hidden" to "display: none;"

Then in cart.liquid in your forloop you could output the values of those properties like:

{% for property in item.properties %}
<img src="{{ property.last }}">
{% endfor %}

 

Which would show up on the html side as:

<img src="/link-to-image1">
<img src="/link-to-image2">
<img src="/link-to-image3">

  Which would show up as pictures in cart.liquid as long as the url was correct. They will also show up on the back end on the order page.

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
5 0 0

The <img> tags are in the product-template.liquid file. Also, the actual images aren't being hosted by link. I am allowing the customer to take a picture using their camera via a camera feed embedded in the product page (also included in the product-template.liquid). Then the images that they take are put it in the <img> tags as a sort of "preview" of the pictures they took.

Could I still do it this way, if the files are hosted temporarily on the page instead of by a link? If not, how could I save them?

0 Likes
Highlighted
Shopify Partner
1426 193 476

I couldn't tell you, I have no idea how that camera feed works. Is there a reason you can't use a file uploader? It would probably be simpler.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
5 0 0

Yeah, there is a reason. It's a long and complicated one. Suffice to say, there needs to be instructions for how to take specific pictures that will be used.

For right now, the only recourse I have is to make the user download the image, and THEN have them upload it using a file uploader. I realize I have an outlier use case, but there seems to be no way to do this, even with paid apps.

0 Likes
Highlighted
Shopify Partner
1426 193 476

Whats the camera feed thing you're using? If I can see how it works I may be able to figure out how to make it work. If not in liquid I could possibly find a javascript solution.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
5 0 0

I'm using the getUserMedia() function:
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

When the picture is taken, it is set to the src in an <img> tag as a blob object. I think I can also convert the src to base64.

 

0 Likes
Highlighted
Shopify Partner
1426 193 476

Yeah this one might be a bit over my head, this thread seems to get at the heart of what you're trying to do, though I have no idea how to actually do what @Jason is suggesting:

 

https://community.shopify.com/c/Shopify-APIs-SDKs/How-to-send-image-file-in-shopify-add-to-cart-form...

 

I'd be very interested to learn how, but neither OP or Jason clarify exactly what the process would entail. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like