How to make button scroll to specific section on same page

Technical Q&A
1

How can I make an already existing Shop Now button as part of a hero section scroll down the page to the product details section of the page?

I am using the Elixir 1.3.0 theme

2

Hi @Matthew114

Like in any theme, you should have id for that section, it is HTML attribute. Like

<section id-"Product-details"....

then in button you can add

#Product-details

as link and it will scroll to that section.

3

You need an anchor – element with an id attribute.

You can use section id for this, but I’d rather create a separate one.

This can be done using “Custom liquid”/“Custom code” section.
Code for this section can be like:

<div id=shop-now style="height:1px; display:block;"></div>

Then, on the section with a button, when entering link, just type #shop-now (as in id) as an URL.

Having a separate section for the anchor gives you benefit of better positioning as, for example with fixed header if you use featured product section id, part of it may end-up below the fixed header.
Also, custom id would look better in URL when button is clicked than default section id.

The style is to make sure this element is visible – some themes hide empty elements and we need it visible to work.

4

That didn’t work for me

5

@Matthew114

Can we see your store at least?

6

That didn’t work for me, I think my theme has constraints that make me not allowed to scroll to a specific section

7

Usually this is not the case. but yes, share a link to your store (with a preview password if one is set).
If it’s a draft theme, share a preview link.

9

Click the shop now button on the homepage then that is the page im trying to edit currently

10

Click the shop now button on the homepage then that is the page im trying to edit currently. thanks

11

Well, you can try this as a link

#shopify-section-template--28059645673817__main

Note that if you delete that sectiona nd place another, you will need to change it also in the button.

Also, Tim’s code also works; maybe you did not follow it exactly.

And to make the scroll smoother, you can add another Custom liquid/Code section with

<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});
</script>

Try it out.

12

It has worked now. Thank you so much