How to keep product image fixed while scrolling down the description column in DAWN theme.

How to keep product image fixed while scrolling down the description column in DAWN theme.

Chucklesfaq
Tourist
15 0 1

Screenshot 2024-01-12 at 2.30.09 PM.png

Replies 11 (11)

techlyser_web
Shopify Partner
1780 330 357

Hello @Chucklesfaq 

can you share store url?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Chucklesfaq
Tourist
15 0 1

It's not live yet. Any other way @techlyser_web 

 

Chucklesfaq
Tourist
15 0 1

Any other way?

Chucklesfaq
Tourist
15 0 1
techlyser_web
Shopify Partner
1780 330 357

How can I apply customs CSS on it without inspecting it?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Chucklesfaq
Tourist
15 0 1
Chucklesfaq
Tourist
15 0 1
techlyser_web
Shopify Partner
1780 330 357

Hello @Chucklesfaq 

You can add code by following these steps 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>

     @media screen and (min-width: 750px){
          .product__info-container {
                max-width: 60rem;
                overflow-x: auto;
                height: 400px;
         }
    }

</style>

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Chucklesfaq
Tourist
15 0 1

Hey thanks a lot. It's working now. Thanks for being so cool here.

Skyride18
Visitor
2 0 0

And if i want the exact contrary?

In my case when i scroll down the page, the description is higher than the image, and the image will scroll down until the footer.

 

Senza titolo.png

ozgur-ipekci
Visitor
2 0 0

Hey @Chucklesfaq 

Yes, we can do it with manipulation to css.

Please 'inspect' the image layout and change the css as:
when you scroll down, the images comes:

position: sticky;


But if you want to fix the images on top, please write that css:

position: static!important;


I hope it helps you!