Recipe: a custom section

A "Storage tips" section: heading + editable tip cards (image, title, text).

Create sections/tips.fluid in the code editor (or the base theme):

{% comment %} Storage tips — heading + a grid of tip cards (blocks).
Reuses the shared card/grid classes so theme colours, dark mode and
the auto-appended style overrides all apply without extra CSS. {% endcomment %}
<section class="page-section{% if Section.Settings.background == "alt" %} page-section--alt{% endif %}">
<div class="container">
<h2 class="text-center mb-1">{% if Section.Settings.heading %}{{ Section.Settings.heading }}{% else %}Storage tips{% endif %}</h2>
{% if Section.Settings.subheading %}<p class="page-subtitle">{{ Section.Settings.subheading }}</p>{% endif %}
<div class="grid grid--cols-{{ Section.Settings.columns | default: '3' }}">
{% for tip in Section.Blocks %}
<div class="feature-card">
{% if tip.Settings.image %}
<div class="feature-card__icon"><img src="{{ tip.Settings.image }}" alt="" loading="lazy"></div>
{% endif %}
<h3>{{ tip.Settings.title }}</h3>
<p>{{ tip.Settings.text }}</p>
</div>
{% endfor %}
</div>
</div>
</section>

{% schema %}
{
"name": "tips",
"label": "Storage tips",
"settings": [
{ "id": "heading", "type": "text", "label": "Heading", "default": "Storage tips" },
{ "id": "subheading", "type": "text", "label": "Subheading", "default": "Get the most out of your space." },
{
"id": "columns", "type": "select", "label": "Columns", "default": "3",
"options": [
{ "value": "2", "label": "2 columns" },
{ "value": "3", "label": "3 columns" },
{ "value": "4", "label": "4 columns" }
]
},
{
"id": "background", "type": "select", "label": "Background", "default": "default",
"options": [
{ "value": "default", "label": "Plain" },
{ "value": "alt", "label": "Tinted" }
]
}
],
"blocks": [
{
"type": "tip",
"name": "Tip",
"settings": [
{ "id": "image", "type": "image", "label": "Icon or image" },
{ "id": "title", "type": "text", "label": "Title", "default": "Label your boxes" },
{ "id": "text", "type": "textarea", "label": "Text", "default": "Number every box and keep a list on your phone so you can find things later." }
]
}
],
"maxBlocks": 12,
"defaultBlocks": [
{ "type": "tip", "settings": { "title": "Label your boxes", "text": "Number every box and keep a list on your phone so you can find things later." } },
{ "type": "tip", "settings": { "title": "Heavy items low", "text": "Pack heavy items in small boxes and keep them at the bottom of stacks." } },
{ "type": "tip", "settings": { "title": "Leave a walkway", "text": "Keep a centre aisle in your unit so everything stays reachable." } }
]
}
{% endschema %}


Notes on why this "just works":

• The schema name must equal the filename (tips ↔ tips.fluid).
• defaultBlocks means a freshly added section never renders empty.
• The six style overrides (text size/colours/background/buttons) are appended to the schema automatically — declare nothing, they arrive.
• Reusing page-section / container / grid grid--cols-N / feature-card / text-center mb-1 / page-subtitle means the section inherits theme colours, dark mode, and typography with zero new CSS. See the class inventory in §5 below.
• Save it and it's immediately in the builder's Add section list, on every page.