Hey @Kaan31
In einem Shopify Free Theme gibt es eine geteilte Gestaltung der Homepage, wie Bilder usw. out-of-the-box nicht. Dies gibt es nur in den Premium Themes die mit viel mehr Gestaltungsmöglichkeiten kommen. Hast du welche zum Shop hinzugefügt wie Frame, Impact, Impulse, Prestige, Icon usw.? Ich würde empfehlen dass zu machen denn ansonsten wird das eine ziemlich Code Lösung verlangen die ich unten jetzt andeuten werde, aber OHNE GEWÄHR!
Für Desktop und Mobile unterschiedliche Bildgrößen zu nutzen, könntest du mit CSS Media Queries CSS Media Queries arbeiten. Diese ermöglichen es dir, bestimmte CSS-Regeln basierend auf der Größe des Browserfensters oder des Geräts anzuwenden. Dabei verwendest du das background-image CSS-Attribut für die .slideshow__media Klasse, anstatt direkt <img> Tags in HTML zu nutzen. So kannst du leicht unterschiedliche Bilder basierend auf der Bildschirmgröße laden.
/* Basis CSS für Desktop-Ansicht */
.slideshow__media {
background-size: cover; /* Stellt sicher, dass das Bild den Container voll ausfüllt */
background-position: center; /* Zentriert das Bild */
height: 400px; /* Setzt eine feste Höhe für den Slider, kann angepasst werden */
}
/* CSS für Mobile Geräte */
@media only screen and (max-width: 768px) {
.slideshow__media {
background-image: url('//pfad/zu/deinem/mobile-bild.jpg'); /* Pfad zum Bild für Mobile Ansicht */
height: 250px; /* Kann angepasst werden, um besser auf kleinen Bildschirmen zu passen */
}
}
/* CSS für Desktop Geräte */
@media only screen and (min-width: 769px) {
.slideshow__media {
background-image: url('//pfad/zu/deinem/desktop-bild.jpg'); /* Pfad zum Bild für Desktop Ansicht */
}
}
Für den schwarzen Raster um die Slideshow kannst du einfach die Hintergrundfarbe des Elternelements des Sliders setzen. Wenn dein Slider zum Beispiel innerhalb eines div mit der Klasse .slideshow-wrapper liegt, könntest du folgendes tun:
.slideshow-wrapper {
background-color: black; /* Setzt die Hintergrundfarbe auf Schwarz */
}
Diese Beispiele gehen davon aus, dass du in der Lage bist, CSS in deinen Code zu integrieren und die Bildpfade entsprechend anzupassen. Die background-image Methode ist besonders nützlich, wenn du unterschiedliche Bildformate für verschiedene Gerätetypen bereitstellen möchtest, ohne die Struktur deines HTML-Codes ändern zu müssen.
Solltest du weiterhin das <img> Tag verwenden wollen und nicht auf background-image umsteigen möchten, könntest du stattdessen mit JavaScript oder speziellen HTML-Attributen wie srcset und sizes arbeiten, um verschiedene Bildgrößen für verschiedene Bildschirmbreiten zu definieren.
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.
Wie gesagt, Ä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 obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
VG
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
