Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
This has been solved.
How did you solved this issue.
What steps you took
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024