Solved

Fixed product image on page scroll. Debut theme

FurryFriends
Tourist
7 0 0
 

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!

 

Screen Shot 2019-10-04 at 4.14.30 pm.png

Accepted Solution (1)
ikolarov
Shopify Partner
101 17 27

This is an 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/

View solution in original post

Replies 34 (34)

ikolarov
Shopify Partner
101 17 27

You can look into 

 

position: sticky;

 

That's what you need.

FurryFriends
Tourist
7 0 0

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
Shopify Expert
696 170 252

Hi, @FurryFriends ,

This is Evita from On The Map.

 

Can you add your store URL?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
FurryFriends
Tourist
7 0 0

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
Tourist
7 0 0

Hello @OTM 

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

Thank you !

ikolarov
Shopify Partner
101 17 27

This is an 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
Tourist
7 0 0

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
Tourist
7 0 0

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

Ana18
New Member
5 0 0

Hello!

 

How could you solve it?

 

Thanks in advance 

Ana

CodingLover
Shopify Partner
56 2 18

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
Visitor
2 0 2

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
Shopify Partner
56 2 18

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;

 

 

remove.png

 

 

 

 

 

 

 

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
Visitor
2 0 2

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;

 

 

remove.png

 

 

 

 

 

 

 

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
Visitor
2 0 0

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
Shopify Partner
56 2 18

where your frequently bought together feature is located ?

Carmifero
Visitor
2 0 0

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
Shopify Partner
2 0 0

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
Visitor
2 0 0

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
Visitor
2 0 0

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
Tourist
42 0 1

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!pink mingo sk.png

mrkj_
Visitor
1 0 0

@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;

 

 

remove.png

 

 

 

 

 

 

 

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
Visitor
2 0 0

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

Michelle12
Shopify Partner
10 0 8

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
Excursionist
20 0 4

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
Visitor
1 0 0

Hey, what about 

Venture

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

 

houwenjie
Visitor
2 0 0

It doesn't work any more

a1club
Tourist
3 0 1

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

veradek
Visitor
2 0 1

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

CodingLover
Shopify Partner
56 2 18

@veradek

 

 

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

 

      <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">

arvidmueller
Tourist
42 0 1

Hey guys, does it work for Venture theme?

Designer518
New Member
4 0 0

@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
Tourist
4 0 1

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

Kenza55
Visitor
2 0 1

Have you found solution? Going through it rn