Can I hyperlink a button on the header menu to a section of the home page

Shopify Discussion
,
1

On my home page I have a small About Us section that is short enough that it doesn’t need it’s own page. How can I direct the button on hyperlink to the proper section?

I tried to follow the code and instruction in the links below, but got stuck at button to navigate.

https://community.shopify.com/c/shopify-design/anchor-links/td-p/321353

https://community.shopify.com/c/shopify-design/linking-anchor-within-page/m-p/224235

In my attempt, i added the

<h2 id="About">…</h2>

code to the first line of the feature-row.liquid under sections. I know that It will make the hyperlink come up every time I use that section, but at I’m only using it once, I was hoping it wouldn’t be a problem. Though if anybody can guide me to a better place in the HTML to add the code I would greatly appreciate it!

Next I went to Navigation - Menu and added the About Us menu Item. But when i went Edit the Menu Item to create the link -

<a href="#About"></a>

none on of the options seem to allow it. I’m not even sure if the code is correct, considering I’m not trying to turn text into a link, but rather make an existing button link to a section.

I must be missing something that will allow the header navigation bar button to hyperlink to a section lower on the page. Please help!

Thanks!!

2

Hello @wizz_kid82 ,

Please check the screenshot

about.PNG
about.PNG1485×781 31.9 KB

If still there is an issue provide me store login and I’ll config it.

Thanks

3

Hi Guleria,

Thank you for the screenshot! I thought I could only pick from the Link drop down menu, it never occurred to me that I could type into the box! Your solution works great on the hyperlink in the Home page.

Could I ask if there is a way to have the buttons link back to the home page when on a different page? As it is, the hyperlink works when on the Home page, but when on a different page, the About Us button- being on the Header navigation menu, it is visible on all pages - doesn’t work.

I hope you have a solution for this up your sleeve too, thanks again!

4

Use # identifier with dolman name
e.g. https://your-domain.com/#About

5

Thanks Guleria! It worked, hyperlink is working across the site!