Anyone know how to make product image sticky on Impact theme 3.0.0?

galenamadi
New Member
4 0 0

I need someone who can do this for me! I can't make my product image sticky and a lot of guys are trying to charge me for that even though I know it only takes 2 minutes to fix it if you know how to. Please just tell me how to do it and I'll do it by myself...Please...

Replies 3 (3)

Ujjaval
Shopify Partner
1242 197 210

@galenamadi add below css into theme.css

@media screen and (min-width: 1150px)
{
.product-gallery--desktop-thumbnails-left {
    position: sticky;
    top: 0;
}
}
LuisMrotzek
Shopify Partner
4 0 1

Thanks for the help!

NomtechSolution
Astronaut
1245 113 150

To make an image sticky on your website, you'll need to use CSS. Here's a general approach to achieve this effect:

  1. Identify the CSS selector for the product image you want to make sticky. This will depend on your website's HTML structure and how the product image is implemented.

  2. Once you have the CSS selector, add the following CSS properties to make the image sticky:

 

 

position: sticky;
top: 0;

 

 

This will make the image stick to the top of the viewport when scrolling.

  1. Apply the CSS properties to the product image selector using either an inline style attribute or by adding a CSS rule in your theme's CSS file. Here's an example of how it might look:

 

 

<img src="path/to/your/image.jpg" style="position: sticky; top: 0;">
​