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”
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.
press Edit page and select the HTML editor in the corner of the content box.
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>
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>
Save the page.
STEP 2
Now go to your dashboard and select → Online Store → Navigation → Main menu.
Now you can add a new menu item or edit an existing one.
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?
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:
Visit your theme file by going to Online Store → Themes → Edit code
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.
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
Save your changes
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
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.
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
class but that applies to ALL featured promotions.
Thanks again for all the help, you’ve been awesome!
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.
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.
No need to “Edit Code” I just pasted the Anchor Code 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
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
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.
