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"
Thanks for all the help in advance
Jason I have found a solution.
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:
5) Save the page.
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:
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.
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:
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
I am using the Debut theme and it works for me. I think It should work for you as well. Let me know ;)
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!
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/".
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: