I have 2 medias for each product.
I want to show photo 1 in the collection page then when you click on to go to the product page i want to show the second image. how do i do this?
heres my site - https://shop.myedspace.co.uk/
pass - reulyi
Hi @oworor
This can be done but would require coding this in. You can have a few options here:
Option 1: Create a new field for each product where you select the index of the photo that needs to show up outside the product page, thus leaving the product page to behave normally and follow the order you have in place.
Option 2: Create a field where you can upload the photo you want to show outside the product page, if the field is empty it reverts back to the default one, if not it takes the image you uploaded.
This would need some custom coding though, we’ll need to see your theme’s code to properly check this.
i see - im not a beginner coder so im down to make these changes - just not sure how!
Should be able to implement if you can help me with the solution.
Which code file would you like me to send for you to see?
May we request theme access from our end? We will use the Collaborator access to only access your theme files.
Should all your products for example display the second image outside the product page? This is the basic solution that can be deployed easily, more granular control per product would require a more custom work which would need to be estimated.
Let us know!
yes - every product to show the second media in product page but show the first image in the collection page.
i am happy to but can you work in a copy?
Of course, main theme will be duplicated then changes deployed. You can check and if ok the fix will be deployed on the live theme. Sounds good?
done!
Keep me updated
There we go, this is an unpublished theme with a preview URL: https://rtz2zod7hjzitym9-77103989023.shopifypreview.com/collections/frontpage
Sorry if i was unclear!
i meant - the follwing page to show the first image ( the black background images with big text)
would this be possible?
Then this following page to show onnly the second photo (the kids with the laptop pointing up)
Clear, adjusted!
Now only the second image shows on the product page.
cool,
dont mean to be a pain but is it possible to change the size and position of the image as it looks quite out of place here:
if so - let me know how!
and which file i need to copy to my main page to apply it
If you’re sure no more images will be added, we can hardcode the image to take the place of two, not the most flexible way to do it but it gets the job done. Let me know!
sure!
lets do that for the timebeing.
dont see a time where we would have another photo tbh
Is there a reason why some variants have images assigned and others not? Compare KS3 & GCSE on the backend, if there is no specific reason, please clear the images from the variant as we don’t have product editing permission.
We will then see how to best do this across the board.
No worries - will do now.
Theres no reason for this
Great, have a look now!
Cool!
Dont want to take more of your time - where can i find the code to paste it in mine - will probably play with the code to make it a tiny bit smaller but we can do that on our end - not new to playing with code!
Thanks
Code is in that file: product-media-gallery.liquid
We commented the regular way the theme builds the gallery inside the loop and took one snapshot and manually filled it:
- {%- liquid
assign media_position = media_position | default: 0 | plus: 1
assign lazy_load = false
if media_position > 1
assign lazy_load = true
endif
-%}
{% render 'product-thumbnail',
media: product.media[1],
media_count: 1,
position: 1,
desktop_layout: section.settings.gallery_layout,
mobile_layout: section.settings.mobile_thumbnails,
loop: section.settings.enable_video_looping,
modal_id: section.id,
xr_button: true,
media_width: media_width,
media_fit: section.settings.media_fit,
constrain_to_viewport: section.settings.constrain_to_viewport,
lazy_load: lazy_load
%}
Good Luck! Should that be all, don’t forget to like and mark as solution, cheers!
1 Like
Great - could you just point me to what i have to change to edit the media dimensions please
It uses the theme settings that control this. You’ll find it under the gallery section of the Product template customizer.
To be clear, we did not modify the dimensions, we just told the theme there was one image, not two so it would know to fill the image across the width. Good Luck!