Overlay PNG in einer Sektion

[oezkan_hp]

Hallo, eine kurze Frage: Wie kann ich auf der Seite ein Overlay-PNG positionieren? So genau mit CSS bekomme ich es nicht hin.

https://07bdtgi1vkt8btn7-51729465529.shopifypreview.com

Das Bild soll genau in die Mitte der Seite:

Es handelt es sich dabei um folgendes PNG:
https://cdn.shopify.com/s/files/1/0517/2946/5529/files/emblem-honey-and-pearls_DIN.png?v=1678114410

Danke!

[Gabe]

Hey @oezkan_hp 

Danke für die Frage und den Vorschaulink, und ich vermute mal du möchtest etwas wie das folgende Bild erreichen, ist das richtig?

Was hast du im CSS bis jetzt ausprobiert wenn ich fragen darf? Das frage ich, um eine bessere Idee davon zu bekommen, genau was du erzielen möchtest und wie es aussehen soll. Momentan habe ich keinen genauen Mock-up, sondern nur deine kurze Beschreibung.

Es DIY machen - immer zuerst in einer Theme-Kopie

Wenn du es selber auf deiner Warenkorbseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative 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!

Um ein Overlay-PNG-Bild auf der Shopify-Seite zu positionieren, könntest du einen Code wie den folgenden verwenden dass die obige CDN Url als asset_url verwendet:

<div class="overlay">
  <img src="{{ 'emblem-honey-and-pearls_DIN.png' | asset_url }}" alt="Overlay Image">
</div>

Der Code erstellt eine <div>-Schicht mit dem Class-Attribut "overlay", das das Overlay-Bild enthält.  Füge auch den folgenden CSS-Code ganz unten in die Assets CSS-Datei ein:

.overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.overlay img {
  display: block;
  max-width: 100%;
  height: auto;
}

Damit wird das Overlay-Bild in der Mitte der Seite positioniert, indem es den Abstand von oben und links auf 50% setzt und dann das Bild um die Hälfte seiner eigenen Breite und Höhe verschiebt, um es genau in die Mitte der Seite zu platzieren. Das "z-index"-Attribut legt die Reihenfolge fest, in der die Elemente gestapelt werden, und ein hoher Wert wie "9999" stellt sicher, dass das Overlay-Bild immer vor anderen Elementen angezeigt wird.

Apropos, Ich habe gemerkt, dass dein Hero Bild ganz oben einen "Stock Foto" Wasserzeichen drauf hat.

Lass wissen, wenn du weitere Fragen dazu hast oder 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!

[oezkan_hp]

Hallo @Gabe , hilft mir teilweise weiter. Danke für deine Hilfe und deine Hinweise.

Wir sind aktuell im Relaunch und daher noch die 'Baustelle'.

Noch eine Frage: Ich habe den Code genau in den Abschnitt eingebaut, aber jetzt ist der Overlay nicht nur im Abschnitt sondern fixed auf der ganzen Startseite. Es soll eigentlich nur genauso hier sein:

Siehe auch hier: https://jkh0qqxvrvvrqchk-51729465529.shopifypreview.com

Danke!

[Gabe]

@oezkan_hp 

Ha, jetzt sind wir einen Schritt weiter und das implementierte Code hat zwar die Plakette als Overlay erstellt, sie aber als "Floating Overlay" der ganzen Homepage erstellt, anstatt nur auf dem einen Bild.

Ich hatte ja gesagt, dass "Um ein Overlay-PNG-Bild auf der Shopify-Seite zu positionieren, könntest du einen Code wie den folgenden verwenden". Ein Overlay Bild ist halt ein Overlay Bild und das Problem hier ist, dass es nicht 100% klar ist was du mit dem Overlay erreichen möchtest, sprich, was der genaue Grund dafür ist, da du uns das folgende sagst:

• Wie kann ich auf der Seite ein Overlay-PNG positionieren? So genau mit CSS bekomme ich es nicht hin.

• Das Bild soll genau in die Mitte der Seite.

Und Du gibst uns das folgende Beispiel:

Overlays werden meistens für Texte verwendet und nicht für Bilder. Wie genau soll hier die Plakette ein "Overlay" sein und warum - was ist der genaue Use-Case der dahinter steckt und warum das Bild nicht als ein einheitliches Bild stattdessen wie oben abgebildet verwenden? Hoffentlich leuchtet der Sinn meiner Fragen ein.

Mein Code ist daher nur ein Beispiel das dich hoffentlich in die richtige Richtung verweisen kann und hier sollte man sich mit einem Programmierer zusammensetzen, der einen tieferen Blick in deine Theme Struktur und Theme Code werfen kann.

Das kann ich von hier aus leider nicht aber gerne können wir das Thema hier weiter anschauen. Andere Community Mitglieder, die das hier lesen, sind bestimmt auch daran interessiert und können von unserem Leitfaden auch profitieren. 😉