Images displayed wrong in mobile and at checkout

Site URL: https://disc-snail-sk6j.squarespace.com

Site:

https://disc-snail-sk6j.squarespace.com

Password:

Fevroniapass

Page:

https://disc-snail-sk6j.squarespace.com/shop/p/crystal

Hi,

My client wants to show swatches paired to her products in her shop. Obviously this can't be included as part of the information in the right hand column along with her product variants... and in order to get around this I have trialled a workaround where the swatches are exported as the first product photo (as viewed on the above mentioned page).

As each product can have a key image I can avoid the swatches appearing as the first photo when viewed at the previous level in the shop, but they do unfortunately show as the product image on checkout. 

Also, whilst this works in desktop view it does not in mobile as the swatches are cut short and magnified. 

So questions in short:
– Can I change the product image displayed at checkout?
– Can I force mobile view to show the full width of all my images? 

Many thanks in advance,
Tom.

I checked that the image in the shop is the right image in your checkout page. 

Can you explain more detail about the product image displayed at checkout?

Hi Bangank36,

Thanks for looking into this.

As per my 'screenshot 4' above the image shown at checkout is the 'swatches'. I want the image shown at checkout to be the 'bed' shot, like in 'screenshot 1'.

As a separate question. 'screenshot 2' displays the page as I'd like with the full width swatches image at the top. However in mobile view 'screenshot 3' my swatches image is heavily cropped on the width. I'd like mobile view to display full width images.

Thanks,
Tom.