Fixed product image on page scroll. Debut theme

[FurryFriends]

Hello community! 

I'm struggling to get product image fixed on the screen while scrolling (on desktop only, not Mobile). I'm currently on the Debut theme and the product image is zoomable. 

Attached is a mockup of the images on the left side of the page I would like to make sticky so there's no blank white space on the left when the user scrolls down upon viewing product description details. 

I have tried everything! I can't work it out, shopify help said they 'can't help me with code changes', and all the other forum posts I have seen on this issue has not been resolved 😞 

If someone has any CSS/JS suggestions I could use to solve this it would be much appreciated!! 

Thank you in advance!

[FurryFriends]

Hello community! 

I'm struggling to get product image fixed on the screen while scrolling (on desktop only, not Mobile). I'm currently on the Debut theme and the product image is zoomable. 

Attached is a mockup of the images on the left side of the page I would like to make sticky so there's no blank white space on the left when the user scrolls down upon viewing product description details. 

I have tried everything! I can't work it out, shopify help said they 'can't help me with code changes', and all the other forum posts I have seen on this issue has not been resolved 😞 

If someone has any CSS/JS suggestions I could use to solve this it would be much appreciated!! 

Thank you in advance!

[ikolarov]

You can look into 

position: sticky;

That's what you need.

[FurryFriends]

Thank you @ikolarov , 

Do you have any ideas on where I am to put this?

I have tried a combination of CSS at the end of the Theme.Liquid however unfortunately it didn't work 😞 

I tried; 

.product.featured_image {

  position: -webkit-sticky;

  position: sticky;

  top: 40px;

}

[OTM]

Hi, @FurryFriends ,

This is Evita from On The Map.

Can you add your store URL?

Best,
Evita

[FurryFriends]

Hi @OTM 

Thank you so much for your reply, 
I have yet to make it live, however can I provide you the product.Liquid or product-template.liquid instead? 

[FurryFriends]

Hello @OTM 

The shop URL is  https://www.furryfriends.boutique

Thank you !

[ikolarov · Accepted solution]

Your parent element ( the element that holds the left and right section ) must have a position: relative; set to it.

Here is an example jsfiddle: https://jsfiddle.net/f7omjkn5/

In addition if there is element with "overflow: hidden" that hold the sticky element, this won't work.

Example how it breaks when there is an "overflow: hidden;" added to the top wrapper: https://jsfiddle.net/f7omjkn5/1/

[FurryFriends]

Thank you so much for this! I have tried everything you suggested, but it still won't work! Would you mind looking at my page code? it would be so appreciated!!

---

@ikolarov wrote:

Your parent element ( the element that holds the left and right section ) must have a position: relative; set to it.

Here is an example jsfiddle: https://jsfiddle.net/f7omjkn5/

In addition if there is element with "overflow: hidden" that hold the sticky element, this won't work.

Example how it breaks when there is an "overflow: hidden;" added to the top wrapper: https://jsfiddle.net/f7omjkn5/1/

---

my Url ishttps://www.furryfriends.boutique/collections/homepage/products/hygienic-pooper-scooper

[FurryFriends]

I worked it out! thank you so so much!!!

[Ana18]

Hello!

How could you solve it?

Thanks in advance 

Ana

[CodingLover]

You can use the codes given above, but this needs some coding knowledge to know where exactly to put in your theme.

If you're looking for a theme that uses this features, you can take a look at Plak theme product page : https://plak-themev1-demo-store.myshopify.com/collections/best-selling/products/casual-long-sleeve-s...

[SJSTUDIO]

Hi, please can you tell me the code you used and where on the product template file you insert it? I've tried everything!! It would be amazing if you could share as I am also using the Debut theme. 

[CodingLover]

Here is a step by step short tutorial on how to fix the left product image in Debut theme.

1- Click on online store => actions => edit code => theme.scss.liquid
2- in the line 2638, remove the following line  (Note: if you have modified your theme.scss.liquid, you may fin this code in a different line)

overflow: hidden;

3- at the very bottom of the code paste the following code :

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: +1; 
@include media-query($small) {
 position: relative;
      top: 0px;
  }  
}

4- Now open product-template.liquid and go to the line 43 which looks like this and remove it

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

5- Paste this code instead 

    <div class="sticky grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

Click save ! And it should work

[SJSTUDIO]

Thank you so much for the clear instructions! Worked perfectly, thank you!!

---

@CodingLover wrote:

Here is a step by step short tutorial on how to fix the left product image in Debut theme.

1- Click on online store => actions => edit code => theme.scss.liquid
2- in the line 2638, remove the following line  (Note: if you have modified your theme.scss.liquid, you may fin this code in a different line)

overflow: hidden;

3- at the very bottom of the code paste the following code :

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: +1; 
@include media-query($small) {
 position: relative;
      top: 0px;
  }  
}

4- Now open product-template.liquid and go to the line 43 which looks like this and remove it

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

5- Paste this code instead 

    <div class="sticky grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

Click save ! And it should work

---

[Carmifero]

Hi guys! I was looking for the same, i tried and works but the products images overlap my frequently bought together. Any idea to determine the distance where images have to scroll down? Thx

[CodingLover]

where your frequently bought together feature is located ?

[Carmifero]

Below the product description (taking the full width)

.product-single

So i can try to place it in other location or try to solve the problem with some code. 

thanks you 

[rvbxn]

I'm trying to make the product image column in Shopify debut theme stick to the bottom when there are no more images to show and the description in the right column goes on.

My goal is to avoid that white space that you get there usually.

As of right now you can see that the product image column sticks to the top rather than the bottom. https://mandybag.com/products/mandybag

That's the custom css I added:

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: +1; 
@include media-query($small) {
  position: relative;
  top: 0px;
  }  
}

The parent element looks like this:

.page-container {
  transition: $transition-drawer;
  position: relative;

  @include media-query($medium-up) {
// Prevent mobile menu inline styles from overriding desktop styles
// sass-lint:disable no-important
@include transform(translate3d(0, 0, 0));
  }
}

From my knowledge I should be able to just replace "top: 0px" with bottom "bottom: 0px" but when I do this nothing happens.

Looking forward to any ideas!

[Marciajupe]

Thanks for posting this. Currenlty I don't have a theme.scss.liquid I only have a theme.css.liquid file. How do find or set up the scss ?

[MandaleesVinoth]

Hi,

I use BW Store - Multipurpose Responsive Shopify Theme for my store. I face the same problem, the scrolling in mobile is not responsive when touched the product image. I couldn't find  stylesheet.css or style.scc.liquid code in the theme. I couldn't find any other solution. Please help me.

Thanks.

P.S. I don't have previous coding knowledge so please help me with the step by step process.

[arvidmueller]

Thank you! Thats works perfectly for me. 

Does anyone know what I have to change in the code so that the pictures practically scroll down? As in the screenshot.

Thank you!

[mrkj_]

---

@CodingLover wrote:

Here is a step by step short tutorial on how to fix the left product image in Debut theme.

1- Click on online store => actions => edit code => theme.scss.liquid
2- in the line 2638, remove the following line  (Note: if you have modified your theme.scss.liquid, you may fin this code in a different line)

overflow: hidden;

3- at the very bottom of the code paste the following code :

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: +1; 
@include media-query($small) {
 position: relative;
      top: 0px;
  }  
}

4- Now open product-template.liquid and go to the line 43 which looks like this and remove it

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

5- Paste this code instead 

    <div class="sticky grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

Click save ! And it should work

---

Followed everything and what happens now is my description is pushed to the left side while the image is now in the middle and as the page scrolls down the image follows but it overlaps the description

[houwenjie]

Hello, have you solved this problem already? The code given above doesn't work yet now

[Michelle12]

Wow... none of this worked for me. There is no "overflow: hidden" on line 2638 for me.

Mine says: .icon-arrow-down:before { content: "\34"; }

????

[Vbello]

Hi  @CodingLover 

I can't find the line below in the product-template.liquid.

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

  Is there an alternative line that would do the same?

Thank you for your help!!

[bandarasssir]

Hey, what about 

Venture

i try to do it in this theme but it seems there's a different !!

[houwenjie]

It doesn't work any more

[a1club]

hello , what was the solution, I have the Pipeline theme, but also looking for a similar result. 

[veradek]

I am trying to do this on the Brooklyn theme! Does anyone have any idea how I could do this?

[CodingLover]

Hi @veradek

On Brooklyn theme, the product images are all showed in vertical line, you can't technically make them all stick

The best thing is to make the right section (product title, description, ..) to be sticky when scrolling down. To do so in Brooklyn theme, please follow these steps :

1. Go to Online store => Actions => Edit code
2. Open the file theme.scss.liquid, at the very bottom paste the following code 

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: +1;  
}

      3. Open the file product-template.liquid, Locate the following line and remove it

      <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">

      4. Paste the following code in the same line and click Save

      <div class="sticky grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">

I hope this may help 🙂

[arvidmueller]

Hey guys, does it work for Venture theme?

[HelpX]

here you go! 😃

https://community.shopify.com/c/Shopify-Design/Fixed-Sticky-Product-Imaged-on-Page-scroll-VENTURE-th...

[Designer518]

@CodingLover Are you able to assist with this site? I've tried what feels like everything to have the fixed product/stacked images on scroll. https://emaritaly.myshopify.com/products/aiden Your help would be greatly appreciated!

[san5]

Can anyone tell me how to do it in debutify theme. Searching for about a week but can't find a solution

[Kenza55]

Have you found solution? Going through it rn

[Siraengs]

Hi, in case someone tries to fix it in Drive theme (Dawn version)

Go to asset/section-main-product.css and change "position: sticky;" to "position: relative;"

@media screen and (min-width: 750px) {
.product__column-sticky {
display: block;
position: relative;
top: 3rem;
z-index: 2;
}