Button auf Hintergrundbild positionieren (Smartphoneansicht)

[Tiziannn]

Hallo, ich bräuchte Hilfe dabei, den Shop Now Button in der Handyansicht über das Hintergrundbild zu positionieren. In der Desktopansicht ist der Button zentriert im Bild. Ich nutze das Theme Dawn.
Webseite: morethanheaven.de passwort: tizian123

[Gabe · Accepted solution]

Hey @Tiziannn 

Danke und so einfach ohne eine größere Coding Lösung wird das nicht da der Button ja ein Overlay auf Mobile sein muss. Um sicherzustellen, dass der Button in der mobilen Ansicht zentriert bleibt, musst du etwas CSS hinzufügen. Apropos, der Bildbanner Abschnitt hat ja den CTA Button direkt als Overlay auf Handy im Dawn Theme. Da du ja nur ein Bild verwendest, warum nicht den Bildbanner statt die Slideshow verwenden?

Wenn du es selber DIY programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Im sections/slideshow.liquid oder im CSS Editor vielleicht einen Code wie den folgenden ergänzen an der richtigen Stelle:

@media only screen and (max-width: 749px) {
  .slideshow__text-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
  }

  .slideshow__slide {
    position: relative;
  }

  .slideshow__text {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }

  .banner__buttons {
    margin-top: 0; 
  }

  .button--primary {
    display: inline-block;
  }
}

Erklärung:

• @media only screen and (max-width: 749px): Diese Media Query stellt sicher, dass die Stile nur auf Bildschirmen kleiner als 749px (mobile Geräte) angewendet werden.
• .slideshow__text-wrapper: Positioniert das Text-Wrapper absolut statt relativ in der Mitte der Folie.
• .slideshow__slide: Stellt sicher, dass die Slide selbst relativ positioniert ist, damit das absolute Positionieren innerhalb funktioniert.
• .slideshow__text: Verwendet Flexbox, um den Inhalt vertikal und horizontal zu zentrieren.
• .banner__buttons und .banner--primary: Passt die Anzeige und den Abstand des Buttons an, um die Platzierung und Sichtbarkeit sicherzustellen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Tiziannn]

Das hat geholfen, ich danke dir 🙂

[Kai]

Super @Tiziannn, das freut uns zu hören. 

[Tiziannn]

Ich habe leider ein neues Problem. Mein Impressum ändert sich nicht mehr.

Wenn ich das Theme bearbeite, wird jedoch das geänderte Impressum angezeigt.

[Gabe]

Hey @Tiziannn 

Die Policies sind sehr beschränkt HTML-fähig. Möchtest du die Impressum Seite editieren dann müsstest anstatt der Policy Page, stattdessen eine Content Page dafür verwenden -> Online Store Kanal -> Pages und neue Impressum Seite erstellen und im Menü verlinken.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉