Jump to content

Moving 'Additional Info' underneath product image on mobile

Recommended Posts

Site URL: https://blueberry-raccoon-cmmc.squarespace.com/originals/p/rv43zgtplx13idz95r1kvmrfxt58pb-6rfcr-lhlyz-m4j3r/?password=cow

EDIT. Decided to go with the plugin by @creedon after all – but I'm leaving this post up as I'm still very interested if/how the Additional Info could be moved. 🙂

---

Hi! First post here. I've really appreciated everyone's help on here, the code snippets have been super useful and I've bookmarked lots of them. You're the best, thanks for all you do!

I was wondering about the 'Additional Info' on the product page, which by default is underneath the product image on desktop. But on mobile, it's located at the very bottom. Can it be moved to underneath the image (and preferably with very little padding)?

Or, if anyone has an alternative suggestions of how to add text below the image on mobile, I'd love to hear it. My problem is that product images are cropped to a square on mobile (desktop shows them full-sized) so I need to tell the customers to click the image to see the product fully.

I'm currently testing out this plugin by @creedon which adds a text overlay on the bottom of the image, but I think I might still prefer having the text underneath. 

 

Thanks so much in advance!

 

image.thumb.png.de7f132fbe18f5efab81ae1d1a95f92b.png

Edited by Sio
removed unnecessary url
Link to comment
11 hours ago, tuanphan said:

It looks like you figured it out? I see it already under image on mobile

Yes and no – I used the plugin by creedon which adds the text onto the image. I'll stick with this for now as I quite like it. But I added this edit to my original post, as I'm still curious how to move Additional Info, so I could compare the two looks.

On 6/18/2022 at 9:57 AM, Sio said:

EDIT. Decided to go with the plugin by @creedon after all – but I'm leaving this post up as I'm still very interested if/how the Additional Info could be moved. 🙂

 

Link to comment

Moving the whole additional info up under the image might be problematic as that area wasn't designed to have extra stuff put in there. It is easier to move blocks out of AI to other places. The only place I've done it is into the detail area as that was designed to be somewhat flexible in accepting new elements.

If you need just one phrase below the images you could use something like the following.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .ProductItem-gallery::after {
  
    content : 'Click to show the full image';
    order : -1;
    
    }
    
  </style>

This is for v7.1.

It could be wrapped in a media query if you only want it to appear on mobile.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Awesome, thanks! I'll be testing this out. Even if I don't use it now, it might be useful for the future.

Most importantly, many thanks for the plugin, creedon! Sent you a small donation just now, because without the plugin we literally would not have been able to launch our website earlier today; the 'Click to enlarge' text was that important. 🥳 Please keep up the great work!

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.