Jump to content

Images displayed wrong in mobile and at checkout

Recommended Posts

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








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,


1_shop view displays key image correctly.png

2_the swatches appear as the first image correctly.png

3_mobile view heavily crops the swatches I want them to display full width.png

4_checkout shows the swatches rather than the key image from the shop can I change this.png

Link to comment

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.