Hintergrundbild auf Produktseite

[LoganDeLaCruz]

Hi Leute,

ich habe folgendes “Problem”. Ich möchte für bestimmte Produkte, bestimmte Hintergrundbilder anzeigen. Es ist mir so weit klar, dass ich die Hintergrundbilder über Metafelder einsetzen kann, aber dazu habe ich nun ein paar Problemchen, da ich keine Ahnung vom Code habe.

Zum einen ist es so, dass die Hintergrundbilder nur auf dem Desktop angezeigt werden sollen (aufm Smartphone-Bildschirm wäre das zu voll, denke ich) und zum anderen benötige ich einen Code um die Bilder überhaupt angezeigt zu bekommen. Ich nutze das Refresh-Theme.

Des weiteren wäre auch die Frage, in welcher Größe die Hintergrundbilder angelegt werden müssen?

Ich bedanke mich schon mal für die Hilfe

[Ben310]

Erstelle ein neues Metafeld:

• Name: Hintergrundbild

• Namespace und Schlüssel: z. B. custom.background_image

• Content-Type: Datei > Bild. Speichern.

• Hintergrundbilder hochladen:

  • Öffne ein Produkt in Shopify und scrolle zum neuen Metafeld (Hintergrundbild).
  • Lade das gewünschte Bild hoch. Das Einbinden von produktspezifischen Hintergrundbildern in Shopify mit Metafeldern ist eine großartige Idee, um das Design zu personalisieren! Ich helfe dir Schritt für Schritt dabei, dies im Refresh-Theme umzusetzen.

  • 1. Finde die richtige Datei:

           - Gehe zu **Online-Shop > Themes > Aktionen > Code bearbeiten**.
           - Suche nach der Datei, die das Produktseiten-Template enthält:
                   - sections/main-product.liquid (oder eine ähnliche Datei im Abschnitt sections).
       

    2. Code hinzufügen: Füge den folgenden Code oberhalb des

       -Tags ein, das den Hauptinhalt umschließt (meist oder

       )Jetzt musst du den Code im Refresh-Theme anpassen, damit das Hintergrundbild angezeigt wird.

{% if product.metafields.custom.background_image %}
  
{% endif %}

Damit die Bilder auf Desktop-Geräten gut aussehen, empfehlen sich folgende Größen:

• Größe: 1920px Breite x 1080px Höhe (Full HD).
• Dateiformat: JPEG oder PNG.
• Komprimierung: Verwende Tools wie TinyPNG, um die Dateigröße zu reduzieren.

[RSafrosisters]

Hallo!

ich habe das Sense Theme und möchte allen Produktbildern (freigestellte PNG mit alpha) einen Hintergrund zufügen. ZB wie hier:

1. Produktbild:

https://cdn.shopify.com/s/files/1/0762/0778/4267/files/Taliah_Waajid_Children_Kinky_Wavy_Natural_Tangles_Out_Today.png?v=1742547198

2. Hintergrund

https://cdn.shopify.com/s/files/1/0762/0778/4267/files/HINTERGRUND-PRODUKTE.png?v=1742559347

3 Produktbild mit Hintergrund

https://cdn.shopify.com/s/files/1/0762/0778/4267/files/PRODUKTBILD_HINTERGRUND-PRODUKTE.webp?v=1743022484

Ich habe es versucht mit dem Metafeld custom.background_image und habe dort das Background image hochgeladen und habe auch den code genau so eingetragen im main-product.liquid wie oben geschrieben. Jedoch hat es nicht funktioniert. Bei keinem einzigen Bild.

Was könnte hier das Problem sein? Ich habe das gefühl dass ich irgendwas nicht korrekt gemacht habe.

Vielen Dank schonmal falls jemand drauf schaut.

In den Anhänden noch die änderungen die ich gemacht habe.

[Ecomhacker]

Hey, am besten du teilst auch gleich die Url. Versuche mal folgendes mit Anführungszeichen. Andernfalls hast du keinen string.

url("{{ ... }}");

[RSafrosisters]

Hi Marcel,

https://cdn.shopify.com/s/files/1/0762/0778/4267/files/HINTERGRUND-PRODUKTE.png?v=1742559347

Das ist die url zu dem Hintergrund Bild.

also so?:

{% if product.metafields.custom.background_image %} @media (min-width: 768px) { .product-page { background-image: url(“{{ https://cdn.shopify.com/s/files/1/0762/0778/4267/files/HINTERGRUND-PRODUKTE.png?v=1742559347}}”); background-size: cover; background-repeat: no-repeat; background-position: center; } } {% endif %}

dann kommt folgender fehler:

Liebe Grüße Achim

[Ecomhacker]

Moin Achim, ne da muss dann stehen …

background-image: url("{{ product.metafields.custom.background_image | file_url }}");

am besten immer store url teilen.

[RSafrosisters]

schade das hat auch nichts verändert. Der shop ist noch nicht komplett online - nur der teil von unserem Haarsalon - die shop und Produktseiten sind noch nicht aktiv.

was isch so seltsam finde, wenn ich auch nur bei einem produkt im metafeld custom.background_image das hintergrundbild hinterlege passiert auch nichts. ich habe jetzt mal kurz ein Produkt auf aktiv gesetzt, bei diesem ist das Hintergrundbild mit der url : https://cdn.shopify.com/s/files/1/0762/0778/4267/files/HINTERGRUND-PRODUKTE.png?v=1742559347 im metafeld gesetzt. leider passiert da nichts.

https://afrosisters.de/products/shea-moisture-coconut-hibiscus-hold-shine-moisture-mist?utm_source=copyToPasteBoard&utm_medium=product-links&utm_content=web

www.afrosisters.de

[Ecomhacker]

Ok,

bitte versuchen/ersetzen:

@media (min-width: 768px) {
      .product-media-container {
        background-image: url({{ product.metafields.custom.background_image.value  | image_url: width: 400 }});
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
    }

[RSafrosisters]

okay, da hat sich jetzt was getan! allerdings ist es ein stehender hintergrund über die ganze seite im bereich der produktbilder. ich haätte gerne, das jedes produktbild als hintergrund das afrosisters logo hat.

[RSafrosisters]

… jetzt habe ich was gefunden, so klappt es - das Background Bild füllt das Produktbildfenster aus und ist daran fixiert.

Vielen Dank für deine Hilfe Marcel! Wüsste jemand wie es jetzt noch auf der Mobilen ansicht auch so funktionieren könnte?

so habe ich es jetzt geschrieben:

@media (min-width: 768px) {
.product-media-container {
background-image: url({{ product.metafields.custom.background_image.value | image_url: width: 400 }});
background-size: cover;
background-attachment: local;
}

[Ecomhacker]

top, dann musst du die Klammer @media (min-width: 768px) { weglassen, also …

.product-media-container {
background-image: url({{ product.metafields.custom.background_image.value | image_url: width: 400 }});
background-size: cover;
background-attachment: local;
}

… dann geht es auch für mobile