Schrift im Abschnitt "Bild-Banner" ändern

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Problemstellung:
Ein Nutzer möchte im Shopify-Theme “Crave” den Titel im Abschnitt “Bild-Banner” anpassen:

  • Titel vertikal nach unten verschieben
  • Spaltenbreite des Titels ändern (aktuell zu breit, nur 2 Zeilen trotz Platz)
  • Schriftgröße in der mobilen Ansicht reduzieren (derzeit zu groß)

Lösungsansatz:
Code-Anpassungen in der base.css-Datei erforderlich:

  • CSS-Code für Positionierung und Breite des Titels (70% Höhe, 50% max. Breite, zentriert)
  • Media Query für mobile Schriftgröße (30px bei max. 749px Bildschirmbreite)

Wichtige Hinweise:

  • Code-Änderungen können Ladezeiten verlangsamen und Theme-Updates beeinträchtigen
  • Empfehlung: Zuerst in Theme-Kopie/Testumgebung testen
  • Hinweis auf Shopifys 60-Min Design Time für kleine Anpassungen durch Entwickler
  • Nutzer plant, Vorschläge auszuprobieren und sich bei Bedarf erneut zu melden

Status: Offen – Nutzer testet die vorgeschlagene Lösung

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

Hallo!

Ich möchte den Titel im Abschnitt “Bild-Banner” des Themes “Crave” ändern, und zwar folgendes:

  1. den Titel horizontal verschieben (weiter nach unten auf dem Bild).

  2. die Spaltenbreite des Titels ändern (aktuell wird der Titel in 2 Zeilen angezeigt, obwohl rechts und links genug Platz ist).

  3. die Schriftgröße in der mobilen Ansicht anpassen (aktuelle ist die Schriftgröße in der Mobilen Ansicht so riesig, dass vom Banner-Bild fast nichts mehr zu sehen ist)

Danke!

2

Hey @fusedrummer

Danke für die Fragen und schauen wir was alles möglich ist um das zu erreichen was du haben möchtest. Wenn das nicht in den Theme Einstellungen geht was du erreichen möchtest, wird es eine Code Anpassungen verlangen. Nur dass du einverstanden bist - eine Code Anpassung verlangt das Ändern deines Theme Code was 1) die Ladezeiten verlangsamen kann, und 2) dein Crave Theme aus den Theme Updates ausschließen kann.

Hast du auch von deinen 60-Min Design Time Gebrauch gemacht? Jedes Shopify Theme bekommt einen 60-Min Guthaben wo unsere Entwickler kleine Jobs im Theme ausführen können, je nach Machbarkeit und unserer Design Richtlinie.

DIY - das folgende immer zuerst in einer Theme Kopie/Testumgebung testen!

Das Folgende ist auch ohne Gewähr und ggf. muss man den Code tweaken, aber bitte nur mit einem Experten/Programmierer:

Um den Titel im Bild-Banner des Shopify Themes anzupassen, muss man Änderungen im Theme-Code vornehmen. Hier sind die Schritte:

  1. Gehe zu Theme → Aktionen → Duplizieren → Code bearbeiten

  2. Navigiere zur Datei → base.css und füge den folgenden Code ganz unten dazu:

.section--image-banner .image-banner__title-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 70%;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}

Was genau macht dieser Code?
Die CSS-Eigenschaft display: flex; wird hier verwendet, um ein flexibles Layout zu erstellen. flex-direction: column; stellt sicher, dass der Titel in einer Spalte angezeigt wird. justify-content: flex-end; verschiebt den Titel nach unten. align-items: center; zentriert den Titel horizontal. height: 70%; legt die Höhe des Titels auf 70% des Bildes fest. max-width: 50%; beschränkt die Breite des Titels auf maximal 50% des Bildes. margin-left: auto; margin-right: auto; zentriert den Titel horizontal.

Um die Schriftgröße in der mobilen Ansicht anzupassen, den folgenden CSS-Code im base.css ganz unten verwenden:

@media only screen and (max-width: 749px) {
  .section--image-banner .image-banner__title h1 {
    font-size: 30px;
  }
}

Was passiert hier?

Das CSS-Attribut @media wird verwendet, um die Schriftgröße nur in der mobilen Ansicht zu ändern. only screen and (max-width: 749px) legt fest, dass der Code nur auf Geräten mit einer maximalen Bildschirmbreite von 749px ausgeführt wird. .section--image-banner .image-banner__title h1 zielt auf den Titel im Bild-Banner ab. font-size: 30px; ändert die Schriftgröße auf 30px.

Das ganze empfehle ich aber nur mit einem Programmierer zu testen und gerne kann ich welche empfehlen!

Lass wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Habt ihr schon über Ostern nachgedacht? Warum nicht etwas “Easter Egg Gamification” im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

giphy

1 Like
3

Hey @Gabe ,

vielen Dank für die sehr ausführliche und für mich als Laien nachvollziehbare und verständliche Antwort.

Ich werde die Vorschläge demnächst einmal ausprobieren und mich dann noch einmal melden.

Von der 60-Min Design Time hatte ich noch nicht gehört, vielen Dank für den Tipp!

1 Like