Customizer input to set the id of a div element

Technical Q&A
1

I want to create a section that will take input in the customizer to set the id of a div element. The goal is to be able to insert a section I can link to that is not visible to the customer. This id would then be used in an anchor link elsewhere on the page. The reason I’m doing this hacky approach is that some of the sections on my homepage don’t all me to set an id (or I don’t understand how). If there is a better approach I’m all ears.

The code in the section looks like this:

*In the id = " ", part I put {{setting.id}} , although I know this does not work… just a placeholder.

anchor

{% schema %}
{
    "name": "anchor box",
    "settings": [
        {
            "id": "page-anchor-link",
            "type": "text",
            "label": "Page Anchor Link Id",
            "default": "go "
        }
    ],
    "presets": [{
        "name": "Jump To Anchor",
        "category": "Text"
      }]
}

{% endschema %}
2

Hi @imari8 ,

Sorry, I don’t really understand what you are describing. Can you explain it again, what are you trying to add this section for? Or the end goal you’re trying to accomplish?

I will check it.

3

This, for example, has a dynamic value for the id.

<h2 id="{{ article.handle }}">{{ article.title | escape }}</h2>

Let’s say I want to make this a div element instead and have the id set based on a setting I enter in the customizer. For example, I want to set the id to ‘faq-1’ This code would be in the markup of a section.

Then to jump to that section, I would have another section with a link like this:

<a href="#{{ article.handle }}">Link</a>

Here also, I would have a setting in this section that allows me to enter the id ‘faq-1’ (where the href="#{{ article.handle }} is) in my customizer . Then, on my page, I could click that link and jump to the faq-1 anchor.

The reason I want to do is because I have parts of my page that do not have the option to add any kind of HTML with an id. I know I can add HTML in the description of a product or a blog post, but, I don’t see an option to do this with rich text for example

4

Hi @imari8 ,

Please change code here:

Screenshot.png
Screenshot.png769×447 16.9 KB

Code: {{section.settings.page-anchor-link}}

Hope it helps!