Anchor Links in .json because of sections

Solved
Highlighted
Tourist
8 1 4

I am trying to embed anchor links on a page that was built with sections. I use the Turbo Theme from Out of the Sandbox. Since the page is built in sections, I can't use the rich text theme editor on the page itself. Also, the page-template.liquid simply has the available sections, not the actual sections used, so I can't embed there. As I see it, the only place I see reference to the actual spots where I want to anchor are in the settings_data.json. Anyone know how I can implement anchor tags in the .json?

 

Thanks for your help!!!

0 Likes
Highlighted
Shopify Partner
274 22 40

Create new sections, for Custom HTML.

Use something like 

 

<span id="anchor_a"></span>

Slide them just above the section you are moving to, and target those with the links :)

Best Regards,
Duncan.
Isle of misfit code & development
http://ecomdev.ca
0 Likes
Highlighted
Tourist
8 1 4

Thanks for the reply Duncan.

 

Did you mean to add the section in the templat.liquid or in the .json?

0 Likes
Highlighted
Shopify Partner
274 22 40

When your in the theme customizer, you should be able to add a new section.  Usually the last section option you can use is "Custom HTML"

 

Happy to take a look (no charge) if you want to provide your .myshopify.com address and I will send you a collab request

Best Regards,
Duncan.
Isle of misfit code & development
http://ecomdev.ca
0 Likes
Highlighted

Success.

Tourist
8 1 4

Just updated my theme yesterday. I now have the Custom HTML section available. Thanks!

0 Likes
Highlighted
New Member
2 0 0

Hi, Could you provide detailed steps (for a non-coder!) in how to do this? I would like two of the items in my Header to link to sections on my homepage, but I can't figure out where exactly to put the anchor link. Thank you!

0 Likes
Highlighted
Pathfinder
93 6 14

Hey there.

 

Depending on your theme, a lot have a Section called "Custom HTML" or "Custom Content"  This is literally a Section where you can put in any HTML/CSS/Javascript you want and it will load.  You would add that, and use  the above code.

 

Then for your links, you would have it point to 

#Anchor_Name_here

Best Regards.

0 Likes
Highlighted
New Member
2 0 0

Thanks for the quick reply! I have a "custom-html.liquid" section that already has a bunch of code in there. I'm confused as to where to drop that line of code in. Everyone keeps saying to "place the code above the section you want to link to", but what does that mean? There aren't any section names listed in the code. (Sorry, I'm clearly not a coder...and am loathe to hire someone for something seemingly so simple.)


 

0 Likes
Highlighted
Pathfinder
93 6 14

aye, but one thing to remember.  Physics is simple to some, and hard for others.  Its ok to hire for small things as long as you dont over pay ;)

 

In the customizer, down the left side you should see the sections you can place and move around.  If you don't, you might have a wicked old theme in which case you would need to go hard code the Anchors in.

0 Likes