Anpassung so bauen, dass du sie im Theme-Editor per Regler änderst — 3 Stufen

Deutsch Diskussion Shopify-Diskussionen
, ,
1

Viele Antworten, die wir alle geben (meine eingeschlossen), sind „füg diesen Code ein, dann geht’s." Und es geht — bis du den Wert ändern willst. Dann musst du jedes Mal wieder in den Code-Editor. Hier zeige ich, wie du genau dieselbe Lösung eine Stufe weiterbringst, sodass du sie einmal einstellst und danach für immer im Theme-Editor anpasst — ohne erneute Code-Eingriffe.

Beispiel, das ständig aufkommt: ein Bild-Overlay (eine dunkle/getönte Ebene, damit Text über einem Foto lesbar bleibt) auf einer Section, die dafür kein natives Setting hat. Der eingebaute Bild-Banner HAT einen Deckkraft-Regler — Multicolumn, Collection und Custom-Image-Sections meist nicht. Dasselbe Prinzip gilt für Abstände, Schriftgrößen, Button-Farben, Badges ein-/ausblenden und mehr.

STUFE 1 — Custom CSS (am schnellsten, aber eingefroren und global)
Die übliche Antwort: CSS in den Theme-Code — theme.liquid oder das Haupt-Stylesheet des Themes:

css

.multicolumn-card__image-wrapper { position: relative; }
.multicolumn-card__image-wrapper::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

Funktioniert — trifft aber JEDES passende Element auf der Seite, die 0.4 ist hartkodiert, und zum Ändern musst du wieder in den Code. Für einmalig ok, in der Pflege mühsam.

STUFE 2 — Custom-Liquid-Block (gescopet, aber noch hartkodiert)
Einen Custom-Liquid-Block einfügen und das Styling über die id auf genau diese Instanz begrenzen, damit es nicht auf alle Karten überschwappt:

liquid

<div class="overlay-{{ block.id }}">
  <!-- dein Bild / Inhalt -->
</div>
{% style %}
  .overlay-{{ block.id }} { position: relative; }
  .overlay-{{ block.id }}::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.4);
  }
{% endstyle %}

Besser — keine Theme-Datei-Edits, wirkt nur auf diesen Block. Aber die Custom-Liquid-Box hat keine eigenen Settings, also bleibt 0.4 im Code eingefroren. Hier hören die meisten „paste this"-Lösungen auf.

STUFE 3 — Eine Section mit eigenen Settings, sodass der Wert zum Editor-Regler wird
Das ist der Online-Store-2.0-Weg: den Wert als range-Setting ins {% schema %} legen — dann wird er zum Regler im Editor. Lege eine Section-Datei sections/image-with-overlay.liquid an (Code bearbeiten > Sections > Neue Section hinzufügen):

liquid

{% style %}
  #Overlay-{{ section.id }} { position: relative; display: grid; place-items: center;
    min-height: {{ section.settings.min_height }}px; overflow: hidden; }
  #Overlay-{{ section.id }} .overlay-media { position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; }
  #Overlay-{{ section.id }}::after { content: ""; position: absolute; inset: 0;
    background: {{ section.settings.overlay_color }};
    opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }}; }
  #Overlay-{{ section.id }} .overlay-content { position: relative; z-index: 1;
    color: {{ section.settings.text_color }}; text-align: center; padding: 2rem; }
{% endstyle %}

<div id="Overlay-{{ section.id }}">
  {% if section.settings.image %}
    {{ section.settings.image | image_url: width: 2000 | image_tag:
       class: 'overlay-media', loading: 'lazy', widths: '600,1000,1500,2000' }}
  {% endif %}
  <div class="overlay-content">
    {% if section.settings.heading != blank %}<h2>{{ section.settings.heading }}</h2>{% endif %}
    {{ section.settings.text }}
  </div>
</div>

{% schema %}
{
  "name": "Bild mit Overlay",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Bild" },
    { "type": "range", "id": "overlay_opacity", "min": 0, "max": 100, "step": 5, "unit": "%", "label": "Overlay-Deckkraft", "default": 40 },
    { "type": "color", "id": "overlay_color", "label": "Overlay-Farbe", "default": "#000000" },
    { "type": "color", "id": "text_color", "label": "Textfarbe", "default": "#ffffff" },
    { "type": "range", "id": "min_height", "min": 200, "max": 800, "step": 20, "unit": "px", "label": "Section-Höhe", "default": 400 },
    { "type": "text", "id": "heading", "label": "Überschrift", "default": "Deine Überschrift" },
    { "type": "richtext", "id": "text", "label": "Text" }
  ],
  "presets": [{ "name": "Bild mit Overlay" }]
}
{% endschema %}

Drei Dinge, damit es im Editor auftaucht und funktioniert:

  • „presets" sorgt dafür, dass die Section unter Section hinzufügen erscheint — ohne bleibt sie unsichtbar (die #1-Ursache für „warum sehe ich sie nicht").
  • Jeder Eintrag unter „settings" wird zum Bedienelement im Section-Panel: range = Regler, color = Farbwähler, text/richtext = Textfelder.
  • range liefert eine Zahl 0–100 → für CSS-Deckkraft durch 100 teilen: overlay_opacity | divided_by: 100.0 (100.0 mit Komma, sonst rundet Liquid auf 0 ab).
  • Das Scopen auf #Overlay-{{ section.id }} heißt: du kannst die Section zehnmal mit zehn verschiedenen Overlays einsetzen — keine Kollisionen.

Jetzt zieht der Merchant „Overlay-Deckkraft" selbst im Editor und fasst nie wieder Code an. (Fortgeschritten: dasselbe Schema funktioniert als Theme-Block in /blocks/ — dort ebenfalls „presets" setzen, und in jede Section einbauen, die „blocks": [{ “type”: “@theme” }] plus {% content_for ‘blocks’ %} hat; dann block.settings.…)

Fazit: Immer wenn du einen festen Wert in ein fremdes Theme einfügen willst — ein Abstand, eine Schriftgröße, eine Farbe, eine Deckkraft, ein Ein-/Ausblenden — frag dich: „Sollte das nicht ein Setting sein?" Wird der Wert je geändert, sparen dir die paar Extra-Minuten für einen range/checkbox/color jede künftige Anpassung.

Helfe gern, das auf dein konkretes Theme oder deine Section anzupassen — poste einfach, woran du gerade arbeitest.

1 Like