Using Main Navigation To Anchor Link Hompage Sections?

[Jason_Harmon]

Hey all, having a little bit of trouble here and I can't seem to find anything on the forums here that hasn't been closed as far as a post goes. Or anything with "Actual" information on how to go about this. I am currently using 6.2.0 Responsive Theme from Out Of The Sandbox. 

I am trying to setup anchor linking from the main navigation. I have some areas on the page for example "What Is It?" section. And I would like the main navigation link to either scroll to that section of my homepage or jump to that section of the homepage. Essentially creating a 1 page design. 

The Jumpstart Theme does something of this nature, however, I'm bewildered on how to get this job done in the Responsive Them.  Any help would be greatly appreaciated. Im not an expert, but not a novice. And am fairly familiar with the coding within shopify. 

Here is a link to the Jumpstart page. You can click the navigation at the top to get an idea of what im referring to with "Jumping"

https://themes.shopify.com/themes/jumpstart/styles/jumpstart/preview

Thanks for all the help in advance

Jason

[Jason_Harmon]

Nobody huh? Still wondering how to fix this problem..

[FileNumberDate]

Looking for a same solution. I would like this for my About page, with dropdown items company, products, etc. so when someone clicks on those dropdown items, it jumps and scrolls down to that section.

[FileNumberDate]

Jason I have found a solution.

STEP 1
What you need to do is:
1) go to your page where you want to "jump" to.
2) press Edit page and select the HTML editor in the corner of the content box.
3) Paste in the below code where you want to jump to. Could be below your heading or above.

​​​​​​​<a name="Your Anchor Name Here"></a>

4) Change the "Your Anchor Name Here" with whatever your want (LEAVE THE APOSTROPHE " ". In my example I will use "Company". If you use multiple anchors on the same page, make sure each have their own unique name.
Should now look like this:

​​​​​​​<a name="Company"></a>

5) Save the page.

STEP 2
1) Now go to your dashboard and select --> Online Store --> Navigation --> Main menu.
2) Now you can add a new menu item or edit an existing one.
3) Either way, give your menu item the desired name you want and in Link write:
 https://yourstoredomain.com/pages/page-handle#youranchorname
Example: https://WeFoundASolution.com/pages/about-us#company

• your page-handel is the name of your page
• youranchorname is the name you gave your anchor in step 1.

4) Save menu

​​​​​​​Hope you can follow my instructions, and have the indea now of how to do it. You can repeat the step for each "jump" you want.

[Kokocards]

This was super helpful, thank you!! 

[AAKhan]

hello, Please help me, as i can not understand and stuck since morning.

I want to make an anchor link from main menu, a to rich text section in home page, in Narrative cold theme 

please help me in which file and where I should put the code.

[AAKhan]

Can you please tell......where exactly we have to paste this code line in the code

[Chase12]

This doesn't work. I have tried every possibility. Don't waste time.

[Jason_Harmon]

OK, this looks like a really good place to start. Now however, let me ask you this. What if its on the homepage that I'd like to anchor link to? As the theme.liquid page is what controls our homepage? Where would i be sticking this HTML code? 

Thanks for the info so far 😄

[FileNumberDate]

You can accomplish this by editing one of your section .liquid files in your store code by doing the following and adding the anchor tag:

1) Visit your theme file by going to Online Store --> Themes --> Edit code
2) Find the folder Sections and select the .liquid file where you want the linking to. So if you want to link to a "rich-text" section you would edit your rich-text.liquid file.
3) Mark the specified section using something like the below code:

​​​​​​​<a name="gohere"></a>

Remember that "Your Anchor Name" is determining what we will need to put in the URL to get to it

4) Save your changes
5) Next, you just follow STEP 2 from my previous comment. But you will have to link your menu item to a Web Address and have it go to you anchor name. Example

/#gohere

I am using the Debut theme and it works for me. I think It should work for you as well. Let me know 😉

[AAKhan]

I have single page site with different sections, I want to link my main menu options to various section on my same page (home page)  i follow your guidance from this post  but its not working.

so

Please explain part 2,  as u mentioned that after pasting  

​​​​​​​<a name="gohere"></a>

in the target section, we should follow your previous comment, but there its confusing,.... I have my page " https://mysite.myshopify.com" shall add the link

https://merijaga.myshopify.com/#gohere  ?

I tried it but its giving an error..

please help!!! 

[Jason_Harmon]

Hey there Richard.

Thanks for all the help with this. I have gone ahead and done what you've requested, however, oddly enough not having the best of luck. This is what seems to be my problem. Earlier in your post you mentioned to use this coding. "https://yourstoredomain.com/pages/page-handle#youranchorname". And replace page-handle with the, well "Page Handle" all said and good no problem. However, a "Featured Promotion" on the homepage doesn't have a handle from what i can see. 

Here is my web address. www.prepperschest.com

What i am trying to do is see where it says "What comes in it?" halfway down the page with all the listed items? Well when i click the "What comes in it" link in the main navigation I want it to jump to this portion of the homepage. However, i have multiple "Featured-Promotions" on the front page. So the handle is kind of non existent. There is a <div> class but that applies to ALL featured promotions. 

Thanks again for all the help, you've been awesome!

Thanks

Jason

[FileNumberDate]

Did you try to write "https://yourstoredomain.com/pages/page-handle#youranchorname" without the handle? Since the front page doesn't contain a handle you could try to write " https://yourstoredomain.com/pages/#youranchorname" maybe even without the "pages/".

[FileNumberDate]

You could assign a header above your promotion with the following example:

<h1 id="Promotion1" style="text-align: center;">Check out our amazing promortions</h1>

and then assign the menu item either:

#Promotion1

or try:

www.prepperschest.com/#Promotion1

[TheITShop]

Any idea how to do this with the Debut theme? There doesn't seem to be an Edit HTML button or any specific code that relates to the actual content of the site in the liquid files.

[AntonColenbrand]

How does one add an anchor handle halfway down a page that has been set up using Shopify Theme?  There seems to be no option to edit the HTML code within the theme.

In my case https://www.feedmehealthy.ph/ I am trying to set up anchor handles at Food Menu Page 1 header and Drinks Menu Page 1 header so that the user can go directly to the area of interest from the menu, which I have setup the menu with links https://www.feedmehealthy.ph/#Food_Menu and https://www.feedmehealthy.ph/#Drinks_Menu 

Seems to be no way that I can insert the code <a name = "Food_Menu"> and <a name = "Dinks_Menu"> withing the confines of the Theme editor.

[HYDAWAY]

No need to "Edit Code" I just pasted the  Anchor Code <a name="contact"></a> into the title of the section on the home page builder.  As if it was just regular text, but it doesn't show up on the public facing page. And then anchor linked to it and it worked! I'm using Streamline from Archetype. Check it out.  https://shop.myhydaway.com

[adkliman]

nice web site.

[accsdesign]

What I did :

Preview your website

Right click to view the Code of the destination

Copy the DIV id and paste as alink adding # before. It shoud be something like this:

<div id="shopify-section-template--17166966292771__16359276425da8ce46" class=...

your link will be #shopify-section-template--17166966292771__16359276425da8ce46

Works for me.

[MiracleD]

Thank you very much

It works like bananas, it's also more straightforward than the above answers because you are not adding any code to your store but you're just copying the DIV id.

[fkshpfy]

in 2023 this is still a **bleep** problem. That's what shopify thinks of its paying customers.

the accepted solution does not work for me because the section i want to link to is an app. so i have no control over the template.