Forum

Thread tagged as: Question, Shop

Multiple product images

Is it possible to assign more than one product image to a product in Perch Shop? For example, if I wanted one product image to be used on the list page and a different one to be used on the product detail page.

Lindsay Masten

Lindsay Masten 0 points

  • 3 years ago
Duncan Revell

Duncan Revell 78 points
Registered Developer

Yes you can - ultimately you control the template as you would with any other template in Perch. Just edit the product.html template to include extra image(s).

Hi Duncan, I can see how they can be added to the product template, but I'm confused on how to make them show up under Product Details inside the admin for the client to control.

ETA, here: screenshot

Duncan Revell

Duncan Revell 78 points
Registered Developer

So what have you tried adding to the product template to be able to add extra images? And after changing the template, did you save one of the existing products to ensure the new template fields show up?

Hi Lindsay.

How are you managing the template HTML file?

Do you have a file at this location: perch/templates/shop/products/product.html

And when adding a second image to the template, have you given it a unique ID, different to the primary image ID?

Hi Duncan and Matthew,

My template is at /templates/shop/products/product.html, you can view it live and in action here: https://138.197.208.91/shop/products/helens-blend/

Here's how I've quickly coded a second image in for testing:

<img src="<perch:shop id="image" type="image" label="Main product image" required="true" />" alt="<perch:shop id="title" type="text" label="Title" required="true" />" /> <img src="<perch:shop id="image2" type="image" label="Second product image" required="true" />" alt="<perch:shop id="title" type="text" label="Title" required="true" />" />

It's showing up as a duplicate image on the frontend, and not at all in the admin.

Well, that's the behaviour you would expect if the template has 2 images, both with the same ID.

Do you have a copy of the template in both these locations:

/perch/templates/shop/products/product.html /perch/addons/apps/perch_shop/templates/shop/products/product.html

As if so, the first (in perch/templates) should get priority.

But they don't have the same ID? The first is image and the second is image2 ... or am I misunderstanding Perch semantics?

Hi Linday,

Apologies, your root folder is admin, not perch. If I go here (and inspect the HTML) I can see they both have the id "Image", so possibly you made a mistake and they both still have the same ID?

https://138.197.208.91/admin/templates/shop/products/product.html

Thanks Matthew, I was editing the wrong version of that file (I'm simultaneously coding and testing locally and have a lot of windows open). Thank you. Problem solved.

Hi,

No problem! Very easily done, glad you've sorted it!

P.s. I can see the ID is repeated for the 2 images' alt attributes too (id="title") ;)

Yeah, it's all rather rough and hapdash right now as I sort the functionality out. :) It'll get set soonish. Thanks again, this forum is invaluable for when I'm running on low sleep.