Jump to content

Any "hover" hacks for mobile shop page to show secondary image?

Recommended Posts

URL: https://caminito.co/shop

Hi there,

On my current shop page if you hover the mouse over the product the second image pops up which is useful to see the blanket unfolded. I'm curious if there's a way to have the second image show up on the mobile site since hover isn't applicable to mobile. I've seen other shops where you can swipe the product image on the shop page in mobile to achieve the same action as hover. Is this possible with some coding? 

thank you!

Liz

Link to comment
  • Replies 12
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

Add this to Website Tools (under Not Linked) > Custom CSS

/* Mobile shop images */
@media screen and (max-width:640px) {
.ProductList-image {
    position: static !important;
    left: 0 !important;
    width: 50% !important;
    height: auto !important;
    opacity: 1 !important;
    top: 0 !important;
}

.ProductList-innerImageWrapper {
    overflow: visible !important;
    display: flex;
    flex-direction: row !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/13/2023 at 1:05 AM, caminito said:

Ok just added it- it's still showing the same blank square for the second image and the first one is really stretched out.

Let me know if you can see what the issue might be!

Thanks

Hi,

I don't see your code in CSS box. Maybe you added to wrong place. Can you take a screenshot of your CSS box?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi there!

Yes I had it up for a day and removed it because I didn't want my mobile shop to look like that for the weekend but I just added it again. See attached for a screenshot of the CSS box with the "mobile" view of my website on my desktop: it does show the second image but the first one is very squished. Second screenshot is of my actual mobile device and it still doesn't show the second full blanket image.

Is there is a way for the full blanket image to go underneath the first image on mobile?

Thank you for your input!!

Liz

 

 

Screenshot 2023-10-16 at 10.33.15 AM.png

IMG_6C6469F35C7B-1.jpeg

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.