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:
- 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 %}
- 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>
- 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>
- then my index.liquid, which is located inside the templates folder, look like this, only one 1 line of code.
{{ content_for_index }}
- My customiser shows nothing as shown the image below.
Thanks in advance for your help.
Tu
