Why is my custom text not displaying in my liquid section?

Store Design
, , ,

Topic summary

A user created a custom Liquid section in Shopify with an image and text layout. After adding schema settings to make the heading and paragraph text editable through the Shopify admin, the text stopped displaying on the page.

Code Issue Identified:
The section code appears corrupted or reversed in the post, making it difficult to diagnose the exact problem. The schema definition seems incomplete (ends with {% endschem instead of {% endschema %}).

Likely Problem:
The text isn’t rendering because the Liquid output tags {{ section.settings.title }} and {{ section.settings.text }} may not be properly implemented, or the schema syntax error is preventing the section from functioning correctly.

Status: The issue remains unresolved with no responses yet. The user needs to verify their schema syntax is complete and ensure Liquid variables are correctly referenced in the HTML markup.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Hello! I made a custom liquid section and designed a custom image with text section.

I want to make the text heading and paragraph editable so I added it to my sections and added schema to make it editable in the shopify admin.

Now the text is not showing up at all in the section.

Here is the section:

{% schema %}
{
  "name": "Custom Image and Text Section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title Text",
      "default": "Product Title"
    },
    {
      "type": "textarea",
      "id": "text",
      "label": "Description Text",
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }
  ],
  "presets": [
    {
      "name": "Custom Image and Text",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div style="display: flex; flex-wrap: wrap; justify-content: center; padding: 0 20px; align-items: center;">
  <div style="flex: 0 0 538px; margin-right: 20px;">
    <img src="{{ 'productimage1.jpeg' | asset_url }}" alt="Product Image" style="width: 538px; height: 538px; border-radius: 10px;">
  </div>
  <div style="flex: 1; max-width: 538px;">
    <h1 style="text-align: center;">{{ settings.title }}</h1>
    <p style="text-align: center; max-width: 538px; margin: 0 auto;">{{ settings.text }}</p>
  </div>
</div>
<style>
@media only screen and (max-width: 768px) {
  div {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  h1, p {
    text-align: center;
  }
  img {
    width: 100%;
    height: auto;
  }
}
</style>

Here is how I want it to look, and this is how I currently have it working on the custom liquid section:

https://gyazo.com/21126794ad7cef038446553f8ddf42c6