How To Make Product Photos Sticky On Flex (Swagger) Theme?

Store Design
1

On the product page it has the photos on the left hand side and the description text on the right hand side.

How can I make the product photos sticky when scrolling down the page to read text on the right hand side so the product photos don’t scroll off the screen.

Thank you in advance!

2

Hello @N-B ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file

Add this following code at the bottom of page

/* Make product photos sticky */
.product-single__photos {
  position: sticky;
  top: 0;
  z-index: 100;
}

Save changes

Hope this can help.

Ali Reviews team.

3

@irene-vintage

Thanks for your reply but it didn’t work :pensive_face:

I only have styles.css.liquid and not base.css.

I tried pasting it in there at the bottom but nothing changed.