Shopify-Themes, Liquid, Logos und ähnliche Themen
Leute
ich habe das Dawn theme und bei der Produktseite sind die Produktbilder kleiner, sodass rechts und links einiges an Luft habe. Ich habe schon im Theme den Abstand von oben und unten minimiert habe aber nichts gefunden um es an den Seiten zu minimieren.
Wie kann ich das machen bzw wie bekomme ich die Produktbilder größer?
lg
Gelöst! Zur Lösung
Erfolg.
Hi @T_50,
vielen Dank für deinen Post.
Wie lautet der Link zu deinem Shopify Shop? Dann schaue ich mir die dortigen Bilder gerne einmal an.
Ich gehe im folgenden kurz die einzelnen verschiedenen Fotoarten an, die ein Shopify Theme beinhalten kann.
Zunächst sollten die Bilder groß genug sein, um das Produkt im Detail zu zeigen, und gleichzeitig klein genug, um schnelle Ladezeiten zu ermöglichen.
Wenn es um Shopify-Bildgrößen geht, beträgt die maximale Größe im Allgemeinen 4472 x 4472 Pixel mit einer Gesamtgröße von 20 MB. Das bedeutet nicht, dass alle Bilder diese Größe haben sollten – es ist nur die obere Grenze dessen, was möglich ist.
Typischerweise wird geraten, dass quadratische Bilder eine Größe von 2048 x 2048 Pixel haben, um den optimalen Punkt zwischen Größe und Geschwindigkeit zu erreichen.
Zu klein sollten sie auch nicht sein, denn Produktbilder, die kleiner als 800 x 800 Pixel sind, können nicht vergrößert werden. Dies ist eine wichtige Überlegung, für die Maximierung der Conversions.
Größe des Shopify-Produktbilds: 2048 x 2048 Pixel
Da Käufer die Produkte nicht physisch inspizieren können, muss diese Erfahrung mit Bildern so weit wie möglich nachgebildet werden, um die Textur, das Material oder andere Details aus der Nähe beurteilen zu können. Sie sind also das Herzstück eines jeden Onlineshops.
Wenn der Großteil des Traffics von mobilen Geräten kommt, sind quadratische Bilder die beste Wahl. Ein Shopify-Theme passt die Größe von Bildern automatisch an, um die beste Benutzererfahrung zu erzielen. Auf Mobilgeräten erzielen quadratische Bilder mit dem Produkt in der Mitte optimale Ergebnisse.
Bildgröße der Shopify-Kategorien: 2048 x 2048 Pixel
Eine Shopify-Kategorie ist eine Gruppe von Produkten auf den Seiten des Shopify Shops. Da die Bilder meist nebeneinander liegen, ist es wichtig sicherzustellen, dass alle Bilder das gleiche Bildseitenverhältnis und die gleichen Bildgrößen haben, denn es ist sehr auffällig, wenn ein Produktbild nicht die gleiche Größe hat.
Shopify-Slideshow-Bildgröße: 1200-2000 Pixel Breite x 400-600 Pixel Höhe
Bei vielen Themen sehen Besucher als Erstes die Startseiten-Slideshow.
Große, hochauflösende Bilder, die sich von der Seite abheben und Aufmerksamkeit erregen, sind an der Tagesordnung. Themen haben unterschiedliche Anforderungen an die Größe der Diashow. Zum Beispiel hat das beliebte Debut-Design vier Faktoren, die sich darauf auswirken, wie die Bilder angezeigt werden:
Da die Diashow von einem Bild zum nächsten „gleitet“, sollten du sicherstellen, dass alle Bilder das gleiche Seitenverhältnis haben. So sehen die Dinge konsistent und professionell aus.
Größe des Shopify-Bannerbilds: 400-600 Pixel Breite x 1200 Pixel Höhe
Shopify-Bannerbilder sind Slideshows sehr ähnlich und enthalten oft überlagerten Text.
Genau wie bei Diashow-Bildern ist die Verwendung von hochauflösenden Bildern hier wichtig. Es lohnt sich auch, den Hintergrund einfach zu halten, damit der Text gut zur Geltung kommt.
Werden die Seiten des Bannerbilds auf Mobilgeräten abgeschnitten, ist möglich, dies zu beheben, indem man Code hinzufügt, um die Ausrichtung, das Seitenverhältnis und den Bildrand zu ändern. Eine Breite von 1200–2000 und Höhe von 400–600 Pixel passt meist gut.
Bildgröße des Shopify-Logos: 450 Pixel Höhe x 250 Pixel Breite
Die offizielle Größenempfehlung für das Shopify-Logo beträgt nicht mehr als 450 x 250 Pixel Breite. Das bedeutet natürlich nicht, dass die Bildgröße genau diese Abmessungen haben muss.
Hast du noch kein Logo? Dann kannst du Hatchful – den kostenlosen Logo-Builder von Shopify benutzen, um noch heute ein einfaches Logo für dein Geschäft zu erstellen.
Bildoptimierung
Nachdem du die besten Bildgrößen für deinen Shopify-Shop festgelegt hast, müssest du als Nächstes überlegen, welche Art von Bildformaten du verwenden möchtest.
Hier sind einige der gängigsten Bildformate samt Vor- und Nachteile, die zu beachten sind:
1. JPG/JPEG
JPG ist wahrscheinlich der am häufigsten verwendete Bilddateityp für Shopify-Shops. Es hat eine hervorragende Farbpalette und eine kleine Dateigröße, die sich für ein schnelles Laden eignet. Die Komprimierungsfähigkeiten von JPG bieten ein exzellentes Gleichgewicht zwischen Qualität und Größe. Aus diesem Grund empfiehlt Shopify den Händlern tatsächlich, JPG für Bilder auf der Produktseite zu verwenden.
2.PNG
Ein weiteres sehr verbreitetes Bildformat, das in Shopify-Shops verwendet wird, ist PNG. PNG eignet sich perfekt für E-Commerce-Websites, da du damit die Bilddateigröße reduzieren kannst, ohne die Gesamtbildqualität zu beeinträchtigen. Außerdem unterstützt PNG auch Transparenz, wodurch du mehr Kontrolle über das Design deines Shops hast. Ein Problem mit PNG ist die verlustfreie Komprimierung – das bedeutet, dass die Bilddatei oft sehr groß werden kann.
3. GIF
GIFs sind ein allgemein bekanntes Bildformat, das für kurze Animationen oder Produkterklärungen nützlich ist (sehr beliebt in Shopify Dropshipping Stores). Das GIF-Bildformat beschränkt Bilder auf nur etwa 250 Farben, sodass sie nicht die lebendigsten sind. Sie können jedoch hervorragend funktionieren, wenn sie in Verbindung mit anderen Bildformaten verwendet werden.
4. TIFF
TIFF ist ein nützliches Bildformat, das von mehreren Webbearbeitungs-Apps unterstützt wird. Das bedeutet, dass es für Designer und Händler einfach ist, die Bilder zu bearbeiten und sie für Marketingkampagnen anzupassen. TIFF bietet eine hohe Auflösung und ermöglicht es, mehrere Bilder in einer Datei zu speichern. Wie bei PNG ist die Dateigröße jedoch dank verlustfreier Komprimierung tendenziell größer.
Wenn du dir nicht sicher bist, welche Bildgröße du verwenden sollst, ist es immer ratsam, dich für ein JPG/Jpeg zu entscheiden. Denn wie bereits erwähnt, schafft JPG das Gleichgewicht zwischen Dateigröße und Bildqualität besser als jedes andere Bildformat.
Kostenlose Shopify-Bildgrößen-Apps und -Tools
Nachfolgend findest du einige Ressourcen, die bei der Optimierung der Bildgrößen helfen:
Die Optimierung der Shopify-Bildgrößen kann eine Herausforderung sein, die sich jedoch lohnt, wenn es gelingt, dem Kunden das Produkt im Detail und der Handhabung zu präsentieren, als hätte er/sie es real vor Auge.
Klappt es damit für dich, die deine Produktbilder wie gewünscht anzeigen zu lassen?
Da du dich gerade mit dem Design deines Shopify Shops beschäftigst, dachte ich kannst du bestimmt auch von diesen Tips zum Thema profitieren. Was meinst du?
Kai | 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
Erfolg.
Hi @T_50,
vielen Dank für deinen Post.
Wie lautet der Link zu deinem Shopify Shop? Dann schaue ich mir die dortigen Bilder gerne einmal an.
Ich gehe im folgenden kurz die einzelnen verschiedenen Fotoarten an, die ein Shopify Theme beinhalten kann.
Zunächst sollten die Bilder groß genug sein, um das Produkt im Detail zu zeigen, und gleichzeitig klein genug, um schnelle Ladezeiten zu ermöglichen.
Wenn es um Shopify-Bildgrößen geht, beträgt die maximale Größe im Allgemeinen 4472 x 4472 Pixel mit einer Gesamtgröße von 20 MB. Das bedeutet nicht, dass alle Bilder diese Größe haben sollten – es ist nur die obere Grenze dessen, was möglich ist.
Typischerweise wird geraten, dass quadratische Bilder eine Größe von 2048 x 2048 Pixel haben, um den optimalen Punkt zwischen Größe und Geschwindigkeit zu erreichen.
Zu klein sollten sie auch nicht sein, denn Produktbilder, die kleiner als 800 x 800 Pixel sind, können nicht vergrößert werden. Dies ist eine wichtige Überlegung, für die Maximierung der Conversions.
Größe des Shopify-Produktbilds: 2048 x 2048 Pixel
Da Käufer die Produkte nicht physisch inspizieren können, muss diese Erfahrung mit Bildern so weit wie möglich nachgebildet werden, um die Textur, das Material oder andere Details aus der Nähe beurteilen zu können. Sie sind also das Herzstück eines jeden Onlineshops.
Wenn der Großteil des Traffics von mobilen Geräten kommt, sind quadratische Bilder die beste Wahl. Ein Shopify-Theme passt die Größe von Bildern automatisch an, um die beste Benutzererfahrung zu erzielen. Auf Mobilgeräten erzielen quadratische Bilder mit dem Produkt in der Mitte optimale Ergebnisse.
Bildgröße der Shopify-Kategorien: 2048 x 2048 Pixel
Eine Shopify-Kategorie ist eine Gruppe von Produkten auf den Seiten des Shopify Shops. Da die Bilder meist nebeneinander liegen, ist es wichtig sicherzustellen, dass alle Bilder das gleiche Bildseitenverhältnis und die gleichen Bildgrößen haben, denn es ist sehr auffällig, wenn ein Produktbild nicht die gleiche Größe hat.
Shopify-Slideshow-Bildgröße: 1200-2000 Pixel Breite x 400-600 Pixel Höhe
Bei vielen Themen sehen Besucher als Erstes die Startseiten-Slideshow.
Große, hochauflösende Bilder, die sich von der Seite abheben und Aufmerksamkeit erregen, sind an der Tagesordnung. Themen haben unterschiedliche Anforderungen an die Größe der Diashow. Zum Beispiel hat das beliebte Debut-Design vier Faktoren, die sich darauf auswirken, wie die Bilder angezeigt werden:
Da die Diashow von einem Bild zum nächsten „gleitet“, sollten du sicherstellen, dass alle Bilder das gleiche Seitenverhältnis haben. So sehen die Dinge konsistent und professionell aus.
Größe des Shopify-Bannerbilds: 400-600 Pixel Breite x 1200 Pixel Höhe
Shopify-Bannerbilder sind Slideshows sehr ähnlich und enthalten oft überlagerten Text.
Genau wie bei Diashow-Bildern ist die Verwendung von hochauflösenden Bildern hier wichtig. Es lohnt sich auch, den Hintergrund einfach zu halten, damit der Text gut zur Geltung kommt.
Werden die Seiten des Bannerbilds auf Mobilgeräten abgeschnitten, ist möglich, dies zu beheben, indem man Code hinzufügt, um die Ausrichtung, das Seitenverhältnis und den Bildrand zu ändern. Eine Breite von 1200–2000 und Höhe von 400–600 Pixel passt meist gut.
Bildgröße des Shopify-Logos: 450 Pixel Höhe x 250 Pixel Breite
Die offizielle Größenempfehlung für das Shopify-Logo beträgt nicht mehr als 450 x 250 Pixel Breite. Das bedeutet natürlich nicht, dass die Bildgröße genau diese Abmessungen haben muss.
Hast du noch kein Logo? Dann kannst du Hatchful – den kostenlosen Logo-Builder von Shopify benutzen, um noch heute ein einfaches Logo für dein Geschäft zu erstellen.
Bildoptimierung
Nachdem du die besten Bildgrößen für deinen Shopify-Shop festgelegt hast, müssest du als Nächstes überlegen, welche Art von Bildformaten du verwenden möchtest.
Hier sind einige der gängigsten Bildformate samt Vor- und Nachteile, die zu beachten sind:
1. JPG/JPEG
JPG ist wahrscheinlich der am häufigsten verwendete Bilddateityp für Shopify-Shops. Es hat eine hervorragende Farbpalette und eine kleine Dateigröße, die sich für ein schnelles Laden eignet. Die Komprimierungsfähigkeiten von JPG bieten ein exzellentes Gleichgewicht zwischen Qualität und Größe. Aus diesem Grund empfiehlt Shopify den Händlern tatsächlich, JPG für Bilder auf der Produktseite zu verwenden.
2.PNG
Ein weiteres sehr verbreitetes Bildformat, das in Shopify-Shops verwendet wird, ist PNG. PNG eignet sich perfekt für E-Commerce-Websites, da du damit die Bilddateigröße reduzieren kannst, ohne die Gesamtbildqualität zu beeinträchtigen. Außerdem unterstützt PNG auch Transparenz, wodurch du mehr Kontrolle über das Design deines Shops hast. Ein Problem mit PNG ist die verlustfreie Komprimierung – das bedeutet, dass die Bilddatei oft sehr groß werden kann.
3. GIF
GIFs sind ein allgemein bekanntes Bildformat, das für kurze Animationen oder Produkterklärungen nützlich ist (sehr beliebt in Shopify Dropshipping Stores). Das GIF-Bildformat beschränkt Bilder auf nur etwa 250 Farben, sodass sie nicht die lebendigsten sind. Sie können jedoch hervorragend funktionieren, wenn sie in Verbindung mit anderen Bildformaten verwendet werden.
4. TIFF
TIFF ist ein nützliches Bildformat, das von mehreren Webbearbeitungs-Apps unterstützt wird. Das bedeutet, dass es für Designer und Händler einfach ist, die Bilder zu bearbeiten und sie für Marketingkampagnen anzupassen. TIFF bietet eine hohe Auflösung und ermöglicht es, mehrere Bilder in einer Datei zu speichern. Wie bei PNG ist die Dateigröße jedoch dank verlustfreier Komprimierung tendenziell größer.
Wenn du dir nicht sicher bist, welche Bildgröße du verwenden sollst, ist es immer ratsam, dich für ein JPG/Jpeg zu entscheiden. Denn wie bereits erwähnt, schafft JPG das Gleichgewicht zwischen Dateigröße und Bildqualität besser als jedes andere Bildformat.
Kostenlose Shopify-Bildgrößen-Apps und -Tools
Nachfolgend findest du einige Ressourcen, die bei der Optimierung der Bildgrößen helfen:
Die Optimierung der Shopify-Bildgrößen kann eine Herausforderung sein, die sich jedoch lohnt, wenn es gelingt, dem Kunden das Produkt im Detail und der Handhabung zu präsentieren, als hätte er/sie es real vor Auge.
Klappt es damit für dich, die deine Produktbilder wie gewünscht anzeigen zu lassen?
Da du dich gerade mit dem Design deines Shopify Shops beschäftigst, dachte ich kannst du bestimmt auch von diesen Tips zum Thema profitieren. Was meinst du?
Kai | 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
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024