Re: Problem with {{content_for_index}} in index.liquid

ttaenang · ‎06-08-2024

Dear all,

I am very new to shopify theme development, now I am having a problem with my custom section that the Add Section interface in the customiser do not even appear.

I tried to follow the solution suggested here but it doesn't existed, must have been removed.

What I did so far:

1. In the sections folder of my template, I have this file -> hero.liquid

<section class="container py-5">
    <div class="row">
        <div class="col-1g-6 col-md-8 mx-auto">
            <h1>{{section.settings.title}}</h1>
            {{ section.settings.description }}
        </div>
        <a class="btn btn-secondary" href={{ section.settings.button_link }}>{{ section.settings.button_label }}</a>
    </div>
</section>

{% schema %}
    {
        "name": "Hero",
        "tag": "section",
        "class": "hero-section",
        "settings": [
            {"type": "text", "id": "title", "label": "Hero Section Title", "default": "Hero Heading text"},
            {"type": "richtext", "id": "description", "label": "Example Description", "default": "<p>Example Description</p>"},
            {"type": "text", "id": "button_label", "label": "Button label", "default": "Button"},
            {"type": "url", "id": "button_link", "label": "Heading Button Link"}
        ],
       "presets": [{
            "name": "Hero",
            "category": "Hero Section"
  }]

    }
{% endschema %}

2. In the sections folder of my template, I have this header.liquid file

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="https://teira-demo.myshopify.com/">Leena</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      aria-controls="navbarNav"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          {% for link in linklists.main-menu.links %}
            {% assign child_list_handle = link.title | handleize %}
              {% if linklists[child_list_handle].links != blank %}
                  <li class="nav-item">
                    <a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
                  </li>
                    [{% for childlink in linklists[child_list_handle].links %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
                        </li>
                    {% endfor %}]
                {% else %}
                  <li class="nav-item">
                    <a class="nav-link" href="{{ link.url }}"> {{ link.title }} </a>
                  </li>
              {% endif %}
        {% endfor %}
        <li class="nav-item">
            <a class="nav-link" href="/cart">Cart</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

3. In the layout folder, my theme.liquid file looks like this

<!doctype html>
<html>
<head>
  <title>{{ page_title }}</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="{{ page_description | escape }}">
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  {{ content_for_header }} <!-- Header hook for plugins -->
  {{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
</head>
<body>
  {% section 'header' %}

  <main role="main">
    {{ content_for_layout }}
  </main>

  {{ 'bootstrap.min.js' | asset_url | script_tag }}
</body>
</html>

4. then my index.liquid, which is located inside the templates folder, look like this, only one 1 line of code.

{{ content_for_index }}

5. My customiser shows nothing as shown the image below.

Thanks in advance for your help.

Tu

ttaenang · ‎06-09-2024

This has been solved.

Pmandal · ‎06-10-2024

How did you solved this issue.
What steps you took

Re: Problem with {{content_for_index}} in index.liquid

Problem with {{content_for_index}} in index.liquid

Community Blog Articles