Anchor Links in .json because of sections

Technical Q&A
1

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!!!

2

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

3

Thanks for the reply Duncan.

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

4

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

5

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

6

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!

7

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.

8

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

9

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

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.

1 Like
10

Hello @Miss

I tried what you recommended with the dawn 2.0 templace.

I added custom liquid right before the place I want the link to move down. But i’m stuck there.

I tried to add a link such as this

#Anchor_Name_here

but it doesnt work.

Could you please help me with the last part. How can I create the link and make sure it goes down to the anchor I created wih custom liquid section.

Thank you

11

@Misfit_Code_Dev

petitlaurierco_0-1652577976109.png
petitlaurierco_0-1652577976109.png1894×937 118 KB

12

Did you manage to find a solution for this @petitlaurierco ?

Trying to add an Anchor Link into an index.json file also (I want to add the anchor link to a “Shop Now” button, then for it to scroll down to another section on the homepage).

13

@Buy_And_Build it never worked for me unfortunately :disappointed_face:

14

@Misfit_Code_Dev I also have the Dawn theme, have updated to the latest version and there is no Custom HTML section available as an option. The only option I can see is to edit the JSON file and I only know how to write plain HTML. So I’m stuck here.