Using Main Navigation To Anchor Link Hompage Sections?

Jason_Harmon
Tourist
13 0 3

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
Tourist
13 0 3

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

Richard15
Excursionist
29 0 6

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.

0 Likes
Richard15
Excursionist
29 0 6

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.

Jason_Harmon
Tourist
13 0 3

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 :D

0 Likes
Richard15
Excursionist
29 0 6

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 ;)

0 Likes
Jason_Harmon
Tourist
13 0 3

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

0 Likes
Richard15
Excursionist
29 0 6

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/#youranchornamemaybe even without the "pages/".

0 Likes
Richard15
Excursionist
29 0 6

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

 

0 Likes
TheITShop
Tourist
4 0 2

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.

0 Likes