How to add a scroll down button to my product page?

Store Design
, , ,

Topic summary

A user needed help adding a scroll-down button to their Shopify collection pages to navigate to the product section.

Initial Solution:

  • A helper provided custom liquid code with HTML markup and inline JavaScript to create a clickable “Scroll To Products” button
  • The button uses scrollIntoView() to smoothly scroll to a specific element ID

Implementation Challenges:

  • First attempt placed the button incorrectly (middle of page)
  • Second attempt positioned correctly but didn’t scroll
  • Solution required creating a new custom liquid block rather than adding to existing blocks

Key Technical Detail:

  • Each collection page has a unique element ID, so the code must be customized per collection
  • The JavaScript targets specific IDs like #shopify-section-template--15404301115574__product-grid

Resolution:

  • Helper provided working code snippets for 4 different collection pages (body care, face care, body scrubs, body creams)
  • Each snippet tailored with the correct section ID for that specific collection
  • User confirmed the solution works successfully across all collections
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hello I would like to have the liquid code to add a scroll button to scroll the page down to see the products in my page collection.

Here is the link

Thank you for your help!

Bless10_0-1710605903798.jpeg
Bless10_0-1710605903798.jpeg999×406 36.5 KB

2

Hey @Bless10 ,

You can try this.

Scroll To Products
3

Thank you but it doesn’t work the button remains in the middle of the page

Capture 15.JPG
Capture 15.JPG1014×471 25.9 KB

4

You can’t add it to the existing block because custom liquid code creates a new block. You can try just adding this then

Scroll To Products
5

Okay now the button is in the right place but it doesn’t scroll

Capture 16.JPG
Capture 16.JPG1295×493 46.3 KB

6

Can you save it so I can test?

7

yes of course here is the link

8

Try this one. Worked for me

Scroll To Products
9

It works but when I copy it to my other collections it no longer works. Should I send you the link to my other collections?

10

Every collection page will have different ID’s, so the code above only works for the collection you sent to me. You can send me the links to the other collections.

11

Perfect I understand and here are the links :

Link 1 Body care

Link 2 Face care

Link 3 Body scrubs

Link 4 Body cream

12

Link 1:

Scroll To Products

Link 2:

Scroll To Products

Link 3:

Scroll To Products

Link 4:

Scroll To Products
13

Thank you very much for your help it works now