How can I make product images sticky on the Dawn theme?

How can I make product images sticky on the Dawn theme?

smandabach
Excursionist
26 0 10

Hello.  I want to make the product image sticky on the left side of my product so when customers scroll they don't have to scroll past all the pictures before the right side of the page moves.  My website is:

 

https://timber-hill-apparel.myshopify.com/

 

or https://timberhillapparel.com

 

I saw some answers provided to go to https://codepen.io/clairecodes/pen/bvWKdr but I don't know where specifically to place this code to make it work. @KetanKumar can you help?

Replies 5 (5)

AvadaCommerce
Shopify Partner
3879 839 983

Hi @smandabach 

 

You could try to do this method:

  • Navigate to Theme > Customize.
  • In the dropdown at the top center, select Product > Default product.
  • In the sidebar, select Product information.
  • In the Desktop layout, select Thumbnail Carousel on the dropdown menu

Screenshot_1.png

 

If you find this answer helpful, please mark it as a Solution.

Best regards.

banned
smandabach
Excursionist
26 0 10

I do not see an option for Desktop layout

smandabach_0-1646466075337.png

 

AvadaCommerce
Shopify Partner
3879 839 983

Hi @smandabach 

 

May I ask which Dawn theme version did you use? Because this feature is only available for Online Store Dawn 2.0 or 3.0. If you don't want to update to this version, you could try to edit the code mentioned by another above.

 

All the best.

banned

kai-nguyen
Shopify Partner
41 6 10

Hi,

 

Pls, add this code CSS:

.product__media-wrapper .slider-mobile-gutter {
    position: sticky;
    top: 0;
}

I hope this can help you.

 

Thank,

Chucklesfaq
Tourist
15 0 1

Doesn't work.