Solved

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

Bless10
Tourist
18 0 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

 

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1850 522 401

This is an accepted solution.

Link 1:

<a class="button btn" href="#shopify-section-template--17296448946408__main">Scroll To Products</a>

 

Link 2: 

<a class="button btn" href="#shopify-section-template--17315447865576__main">Scroll To Products</a>

 

Link 3:

<a class="button btn" href="#shopify-section-template--17296448848104__main">Scroll To Products</a>

 

Link 4:

<a class="button btn" href="#shopify-section-template--17296448815336__main">Scroll To Products</a>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 12 (12)

ThePrimeWeb
Shopify Partner
1850 522 401

Hey @Bless10,

 

You can try this.

 

<a class="button btn" href="#product-list-template--17296448946408__main" style="
    position: fixed;
    bottom: 40px;
    z-index: 3;
    right: 50%;
    transform: translateX(50%);
">Scroll To Products</a>

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Bless10
Tourist
18 0 1

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

 

Capture 15.JPG

ThePrimeWeb
Shopify Partner
1850 522 401

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

 

<a class="button btn" href="#product-list-template--17296448946408__main">Scroll To Products</a>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Bless10
Tourist
18 0 1

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

 

Capture 16.JPG

ThePrimeWeb
Shopify Partner
1850 522 401

Can you save it so I can test?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Bless10
Tourist
18 0 1

yes of course here is the link

ThePrimeWeb
Shopify Partner
1850 522 401

Try this one. Worked for me

<a class="button btn" href="#shopify-section-template--17296448913640__main">Scroll To Products</a>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Bless10
Tourist
18 0 1

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?

ThePrimeWeb
Shopify Partner
1850 522 401

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. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Bless10
Tourist
18 0 1

Perfect I understand and here are the links :

Link 1 Body care

Link 2 Face care

Link 3 Body scrubs 

Link 4 Body cream

ThePrimeWeb
Shopify Partner
1850 522 401

This is an accepted solution.

Link 1:

<a class="button btn" href="#shopify-section-template--17296448946408__main">Scroll To Products</a>

 

Link 2: 

<a class="button btn" href="#shopify-section-template--17315447865576__main">Scroll To Products</a>

 

Link 3:

<a class="button btn" href="#shopify-section-template--17296448848104__main">Scroll To Products</a>

 

Link 4:

<a class="button btn" href="#shopify-section-template--17296448815336__main">Scroll To Products</a>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Bless10
Tourist
18 0 1

Thank you very much for your help it works now