Can I link a button to a specific section on a page?

[epoll24]

Hi all. Pretty much as the title says. Just want to link a button to a specific section on a specific page instead of just a specific page. Is this possible? I'm using Impact theme and my website is PulseDevice.com. Thanks!

[StephensWorld · Accepted solution]

This is possible via 'anchor' links.

https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-pa...

You would essentially need to add a bit of HTML coding, right above the section on a page that you want to link to (most themes have a "custom liquid" or "custom content" section/block that you can add the coding to, within the theme editor). 

Something like this: 

<a id="name-goes-here" class="anchor"></a>

You would change the "name-goes-here" part to whatever you want the link's handle to be. Then to link to that part of the page, you would simply link to "#name-goes-here". 

I'm actually doing this on my own site (https://stephens.world). I have 3 buttons right under my main video header (Project Pricing + Learn More + Read All Reviews). Each of those buttons go to a section further down the page. 

For example, the "Project Pricing" button links to "#pricing" ... and then the coding I have right above my pricing section is:

<a id="pricing" class="anchor"></a>

If the spot you're trying to link to is on a different page, then you would just add the hashtag bit to the end of the URL of the page that you want to link to. 

So if the link is on the same page, you just link to: "#name-goes-here". 

But if the link is on a different page, you would do (for example): "/pages/contact#name-goes-here"

So all that's to say, it is 100% doable! 🙂

Note: If your theme has a 'sticky header' (ie. the header shows when scrolling down the page), then your anchor links might be 'jumping' too far down (instead of landing at the top of the section, it's landing in the middle of the section). In this case, you'll want to add some additional CSS to your theme's coding, so that it knows how far to jump down.

You would add the following coding to your theme's main CSS file:

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

You can change the "-250px" part to be whatever you need it to be (more or less, scrolling down the page). Play around with it until you're happy with where the anchor link is landing/jumping. 

Hope the above helps! 🙂

[epoll24]

Thank you so much! Extremely helpful

[AnnaMaria2]

Thank you so much, really helped. A related question (if the post is still open): what if the anchor target is on a custom template/page? I do find it in the code editor, but its a json file, so I´m not sure where/how to edit the html for it...

Thanks a lot in advance!

[StephensWorld]

Json files are kind of like reference files, rather than actual coding you can edit -- the actual coding should be in a liquid file ... so in this case, it's more likely that the coding exists somewhere else in your theme files (it's hard to point you in the right direction though, without having access to the store/theme, and seeing where exactly on the specific page/section you're working with). You'd need to be experienced with making custom coding edits within the theme templates to figure it out. Your best option is probably to reach out to the theme's developers for help finding the respective coding, or else hire a Shopify Partner to search for the coding and edit it for you. My original post is more of advice for adding new anchors, rather than trying to edit hardcoded anchors. 

[AnnaMaria2]

Thank you anyway for taking the time, really appreciate it :)!