Jump to content

Product Page - stacked gallery, scroll down button

Recommended Posts

For SS's 7.1 Product Page, there is the stacked version, that keeps the product details sticky on 1/2 the screen, and a vertical stack of the product images on the other half, visible on scroll.

I am wondering if it is possible to build out a div element (via product header injection) that functions as a down arrow button sitting near the bottom of the first product image that when clicked, scrolls the viewport down to the second image.

This way, viewers will know that additional product images exist beyond the first and only visible image in the viewport. I am comfortable with CSS to place the element, but am wondering if anyone has thoughts on how to implement script to make this come alive?

 

Thanks!
Maya

Link to comment
  • Replies 3
  • Views 452
  • Created
  • Last Reply

Top Posters In This Topic

On 1/14/2023 at 5:48 PM, tuanphan said:

Can you share link to a product? We can test some script code

Yes! Product page is here, pw: ygstudio

Thanks so much @tuanphan, let me know what you can find. I am also interested to see if in general, there is a way to implement an "anchor link" effect, without having an actual anchor to direct it to, but with the ability to control the increment (ex - 100vh) in which the button scrolls down the page, for other general pages?

 

Thanks for your time and brain power!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.