Dawn Anchor Links Using Multicolumn Section Buttons

[Charlie1029]

Hello,

I'm having issues creating anchor links using the multicolumn section buttons, using the "Link Label" and and link URL. I am trying to create anchor links from a "Multicolumn" section that link to a particular section on the same page.

I am able to get this to work using the "Inspect Element > Get section ID > Create a link using that section ID" method, but I dont like that you cannot customize the site URL to make it look more intuitive.

I have tried using a "Custom Liquid" section and putting 

<a href="#features"></a>

in there, but that did not work. 

I have tried creating section files in the "Edit Code" area, and and trying to ad a custom section ID, but it seems to be overridden by the random section ID that Shopify adds in. Maybe I have been doing this the wrong way, as I'm not great at code.

Also, could anyone please tell me why Shopify doesn't have Anchor Links built in? This seems to be a common question since even before the 2.0 theme days, and I haven't seen any elegant solutions implemented.

Any help would be greatly appreciated!

[Charlie1029 · Accepted solution]

Okay, so I think that I was able to get it to work. If this is an incorrect way to do this, or you foresee issues, please let me know. The following is the workflow that Im now using:

1. Create a “Multicolumn” section where you want the buttons to be. This section has a “Column” block. Select the appropriate one.
2. In the “Link label” area, put your button label there (eg: Specifications).
3. In the “Link” area, put the URL that you want to direct to (eg: #specifications). Note the “#” symbol before the label. Remember to select the appropriate item from the drop-down menu. Do not simply select “Enter” on the keyboard.
4. Create a “Custom Liquid” section right above where you want the link to direct to. Insert the following code:

<div id="putyoururlhere"> </div>

example:

<div id="specifications"> </div>

Replace the “specifications” id with the appropriate id, keeping the quotes as shown above.

Note the space in between the

<div id="specifications">

 and the

</div>

If there is no space, it wont work. That’s where I messed up.

Again, if you see any issues, please let me know. This code is very new to me.