Fixed product image on page scroll. Debut theme

Solved
Shopify Partner
42 2 6

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

The best and fastest Shopify theme www.plaktheme.com
0 Likes
New Member
2 0 1

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. 

0 Likes
Shopify Partner
42 2 6

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

 

The best and fastest Shopify theme www.plaktheme.com
0 Likes
New Member
2 0 1

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

 


 

1 Like
New Member
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

0 Likes
Highlighted
Shopify Partner
42 2 6

where your frequently bought together feature is located ?

The best and fastest Shopify theme www.plaktheme.com
0 Likes
New Member
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 

0 Likes
New Member
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!

0 Likes
New Member
2 0 0

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

0 Likes