Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How could we categorize different types of existing product images?

How could we categorize different types of existing product images?

Rarify
Tourist
9 1 4

Context

Our furniture store rarify.co contains products with two types of images:

  1. Packshot: Image of a single piece of furniture with a white background.
  2. Lifestyle: Image of a home, interior, or setting that shows what the furniture would look like in-context.

See example here.

Note:

  • The Packshots are often associated with product variants as product variant images, but they do not need to be.
  • The Lifestyle images are not usually associated with variants, but can sometimes be if we're missing a Packshot for a given product.
  • The Packshots and Lifestyle images cannot be in any particular order for each product.
  • There cannot be the same number of Packshots and Lifestyle images for every product.
  • Some products do not have Lifestyle images at all.

Goal

Create theme sections that display Collections of products, with all thumbnail images displaying as Lifestyle images.

  • We want customers to be able to have the option to shop based on the "look" they want for their home as seen in a Lifestyle image, as opposed to only seeing the isolated product in a Packshot.

  • See example of our current collections page here, which simply displays the first image associated with each product. We still need to retain the ability to display collections this way. We just want to add the ability to "switch" from displaying Packshots to Lifestyle images.

Problems/Questions

  • Is there a way to tag or categorize product images that already exist in our product database?
  • It would not be ideal if we had to re-upload all of our product images, since we have many hundreds of products and continually add new products to our store.
  • Both Packshots and Lifestyle images still need to display on our product pages in the main image carousel.

 

Any insight or advice from folks who have similar needs would be much appreciated. Thank you.

Replies 2 (2)

SocialAutoPost
Shopify Partner
434 59 107

It sounds like you want to add the ability to display collections of products with Lifestyle images as the thumbnail images. Here are a few suggestions for how you can achieve this:

 

  1. Use the Shopify API to retrieve information about your products and their associated images. You can use the Product API to retrieve a list of products and their associated images, and the Image API to retrieve information about the images themselves.

  2. Use the tags or metadata of the images to distinguish between Packshot and Lifestyle images. You can add tags or metadata to your images using the Image API. For example, you could add a tag of "packshot" or "lifestyle" to each image, and use that information to determine which images to display in your collections.

  3. Use a custom section or app to display the collections with Lifestyle images. You can use the Shopify API to retrieve the products and images for a given collection, and then use that information to display the Lifestyle images as thumbnail images. You can use the Shopify Sections API to create a custom section that displays collections in this way, or you can use the Shopify App Bridge to build a custom app that integrates with your store.

I hope these suggestions are helpful! Let me know if you have any further questions.

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
Rarify
Tourist
9 1 4

@SocialAutoPost Thank you for your notes, this is helpful. To follow up:

 

See this resource.

 

With reference to your suggestion #2, are you suggesting I add “tags” in the form of image “metafields” (metadata) as mentioned in the above link?

 

If so, my next thought is: how can my non-engineering staff easily add and manage these image metafields…? Will need to do some searching for existing apps…