Different image for "browse by design" collection

[mikalaka]

I have different collections of apparel (tees, hoodies, etc). Each of these shows the products in grid form with the full apparel with design on it. (Full t-shirt plus design.)

I'd like another category "browse by design" that would show only the designs on a plain background, enlarged so they take up the full thumbnail space. 

Right now my products all sync from Printify. One option might be to manually upload this enlarged design image to the product images, put it in place 2, and use the code people have mentioned elsewhere that would skip one image and display the 2nd.  The problem with this, is is that periodically I have to re-sync my products from Printigy (including mockups) and that would be overwritten.

So I'm wondering if there might be another way. Maybe I could upload these enlarged images to the files section of shopify, and put their image name into a meta field, and then on the "browse by design" collection page, it would use THAT image that the metafield refers to instead. Once someone clicks on the image, it would take them to the product page as usual. 

[PaulNewton · Accepted solution]

Hi @mikalaka What you describe with metafields is possible. I'd first pursue a way to to avoid the initial and continuous image uploading to each product with logic for name based image usage from the files admin.

If you need a customization like this made for you then contact me by mail for services, Contact info in signature.
Please ALWAYS provide context, examples: store url, theme name, post url(s) , or any further detail.

Metafields for secondary images

If using metafields to ensure persistence, I'd first make a temp metafield slap an image in it on a product THEN sync that product from the third party to be sure they don't nuke metafields for some reason (they shouldn't but test) or nuke the product then remake it.

Also keep in mind what the process is longterm,  if they delete/readd products you'll have to redo the metafields.

So you may want to bring an import/export app into the mix like matrixify or ez-exporter, etc to bulk handle managing the metafield images. If you have a lot of products these apps make you money in time saved for stuff like this.

Or use an automation app like mechanic , or mesa to attach images from the files admin to the metafields based on some naming convention logic. No existing task for something like this obviously so it would have custom scripted https://tasks.mechanic.dev/?q=product%20metafield 

Name based image usage

If the product data is consistent ( i.e. same sku  or same handle etc.)  an alternative to metafields that may go stale when products are deleted/re-added is reference an image in the file admin based on a naming convention.

Use some consistent info X on the product to match to an image filename in the files admin automataically. Roughly like the following untested liquid:

{{ product.handle | append:"-design.png" | file_img_url }}

https://shopify.dev/docs/api/liquid/filters/file_img_url