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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.