Add a custom image upload field to product admin page

New Member
3 0 0

Hi all,

Thanks for taking the time to checkout my post.

I'm looking to give my client the ability to set a custom background image to each of their product's pages. The best way I can see of doing this, initially at least, would be to give them a custom field in their product's admin pages where they can upload/choose an image and save it.

Then I would extract the URL for this image file and print it to the html of the product template.

Does anyone know whether this is possible and/or the best way of doing this? :)

I look forward to your responses and thank you in advance.

Best,

Patrick

0 Likes
Shopify Expert
195 0 23

Hi Patrick,

Without using an app yes storing a url in a metafield and then using that in the theme is a way to accomplish this. However, they would have to upload these images into the files section in the admin and then copy the url. 

Another option is to hack the product images. You could have the customer upload this background image and say have it listed as the very last image. In your theme you could filter out this image when listing product images and find it for the background. You can use a liquid method called last in the forloop to accomplish this. See here: https://docs.shopify.com/themes/liquid-documentation/objects/for-loops#last

-Ryan

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
1 Like
New Member
3 0 0

Hi Ryan,

Many thanks for your speedy reply!

I see. It's a shame Shopify doesn't allow the ability for dev's to add a range of extra fields to other admin pages yet, of course with the exception of the theme settings page. :)

I was thinking of doing it that way initially, so it's good to know I was thinking in the right direction! I just wanted to check there wasn't an easier way to do it before I went ahead.

Thanks so much again.

Best regards,

Patrick

0 Likes
Shopify Expert
195 0 23

It would be great if we could add to the UI of the admin. I have see other eCommerce systems do this nicely. With metafields Shopify could certainly accomplish this. There is a Chrome plugin that does this called ShopifyFD (http://shopifyfd.com) but it would be great if metafields were integrated directly into the admin. 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Shopify Expert
9765 86 1514

it would be great if metafields were integrated directly into the admin

FYI: Metafields are accessable in the new product bulk editor. Still no simple way to active them but with a url modification you can have them appear.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Expert
195 0 23

Thanks Jason. I didn't realize that was a possible. I see the &metafield_titles=&metafield_options= query parameters but I'm not sure how to use them. I tried a few combinations but i just get an error. Any ideas? 

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes
Highlighted
Shopify Expert
195 0 23

Shopify just posted some details on how to use metafields in the editor. See here: https://www.shopify.com/partners/blog/53573123-secrets-of-the-shopify-bulk-editor

Stop Stressing About Shopify You’ve Got Better Things To Do => https://320ny.com/shopify/
0 Likes