Design spricht Bände für ein
hilft jedem Unternehmen – auch einem kleinen und beginnenden –, im Internet professionell auszusehen und zu verkaufen. Sie müssen nicht viel bezahlen, um
Wir haben hinzugefügt Dutzende neuer Storefront-Design-Funktionalitäten zu , damit Sie Ihre
Das Einrichten jedes kleinen Details in Ihrem Online-Shop-Design ist kinderleicht. Ändern Sie Bildstile, Produktseitenlayouts und Storefront-Elemente ohne Codierung. In diesem Beitrag werden Sie es selbst sehen.
Die neuen Einstellungen verschachteln sich unter in Ihrem -Kontrollbereich. Um sie zu verwenden, stellen Sie sicher, dass Sie alle Storefront-Updates in .
![Abschnitt „Was ist neu“ im -Kontrollfeld](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-store-desing-2-1524574378-1024x310.png)
Aktivieren Sie diese Updates unter Einstellungen → Was ist neu, um die neue Seite mit den Designeinstellungen anzuzeigen.
Was ist, wenn ich die ältere Version des -Storefronts verwende?
Der Wechsel zur neuen Storefront kann das Aussehen Ihres Shops komplett verändern. Mit den neuen Designeinstellungen erhalten Sie mehr Anpassungsmöglichkeiten und ein ansprechenderes Aussehen für Ihren Shop. Seien Sie jedoch vorsichtig, wenn Sie ein
Gestalten Sie Ihren Online-Shop
Sie kontrollieren das gesamte Erscheinungsbild Ihres Produktkatalogs, von Produktbildern bis hin zu Artikelnummern und Schaltflächen.
1. Wählen Sie die beste Bildgröße, um Ihre Produkte zu präsentieren
Standardmäßig sind Produktbilder
Einige Produkte weisen wichtige Details auf, die Sie möglicherweise visualisieren möchten (beispielsweise, wenn Sie Schmuck oder Gemälde verkaufen). Wählen Sie die große Bildgröße, damit Ihre Kunden Ihre schönen Produkte und Fotos bewundern können.
Wenn Sie einen Produkttyp in einem großen Sortiment verkaufen (sagen wir 200 Ledergürtel in verschiedenen Farben), sollten Sie sich an kleinere Bilder halten. Ihr Geschäft zeigt viele Produkte auf dem Bildschirm und Ihre Kunden werden von der Auswahl beeindruckt sein.
![Produktbilder gestalten in](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-8-1524574356.gif)
Kleine, mittlere und große Bildgröße für Produktbilder
2. Optimieren Sie das Bildseitenverhältnis entsprechend den Abmessungen Ihres Produkts
Verkaufen Sie Palmen? Oder vielleicht
Das horizontale Verhältnis eignet sich für breite Produkte, beispielsweise Schuhe, Sofas oder Nährstoffriegel.
Verwenden Sie für runde Objekte (oder im Zweifelsfall) quadratische Bilder, diese sehen immer gut aus.
![Vertikale, horizontale und quadratische Produktbilder](https://don16obqbay2c.cloudfront.net/wp-content/uploads/GIFMaker.org_2SrMTw-1524576477.gif)
Vertikale, horizontale und quadratische Bilder
Wenn Sie Produktbilder hervorheben und vom Shop-Hintergrund abheben möchten, wählen Sie „Bildhintergrund abdunkeln“.
3. Wählen Sie aus, welche Produktinformationen im Schaufenster angezeigt werden sollen
Ähnlich wie bei Produktfotos können Sie auch für andere Storefront-Elemente aus zahlreichen Designoptionen wählen: Produktnamen, Titel, Preise, SKUs, „Kaufen“-Buttons. Entscheiden Sie, wie jedes davon angezeigt werden soll – unter dem Produktbild oder beim Mouseover.
![Gestaltung von Produktbildern in](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-9-1524574358.jpg)
Elemente unter Produktbildern, beim Hovern oder Ausblenden anzeigen
Wenn Sie die Informationen unter den Produktbildern platzieren möchten, können Sie das Layout festlegen. Richten Sie Ihren Inhalt linksbündig, rechtsbündig, zentriert oder im Blocksatz aus.
![Verschiedene Layouts der Elemente (Produktname und Preis) Verschiedene Layouts der Elemente](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-7-1524574354.png)
Unterschiedliche Anordnung der Elemente (Produktname und Preis)
Es ist auch möglich, Elemente auszublenden. Blenden Sie alle aus, damit Ihr Schaufenster wie ein Lookbook aussieht. Wenn Ihre Kunden auf eines der Produktbilder klicken, gelangen sie auf die Produktseite.
Wählen Sie die Anzeige eines zusätzlichen Produktbilds, wenn Sie weitere Details anzeigen möchten. zeigt das erste Bild aus der Produktfotogalerie an, wenn Sie mit der Maus darüber fahren.
![Zusätzliches Produktbild bei Mouse-Hover](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-store-design-3-1524574375.gif)
Zusätzliches Produktbild bei Mouse-Hover
Durch die neuen Einstellmöglichkeiten ergeben sich zahlreiche Gestaltungsmöglichkeiten für die Optik Ihres Schaufensters.
4. Gestalten Sie Ihre Shop-Kategorien
Sie finden Optionen zum Einrichten des Aussehens Ihrer Kategorien. Egal, ob Sie Fotos, Symbole oder Markenlogos für Ihre Kategoriebilder haben, bietet Designoptionen, um ihnen ein atemberaubendes Aussehen zu verleihen.
![Gestaltung von Produktkategoriebildern](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-10-1524574360.gif)
Kategorienamen unter Bildern, auf Bildern, beim Hovern und ausgeblendet
Optimieren Sie Produktseiten für die Konvertierung
Jetzt können Sie die Informationen Ihrer Produktseiten auf unterschiedliche Weise organisieren, je nachdem, was für Ihre Kunden am besten funktioniert. Jede Designoption wird nach den besten
1. Wählen Sie das Produktseitenlayout
Es gibt vier neue Optionen zum Organisieren von Inhalten auf Ihren Produktseiten.
Machen Sie mit Ihren Produktbildern auf sich aufmerksam. Platzieren a
![Optimierung der Produktseite](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-11-1524574362.png)
Die
Fügen Sie detaillierte Produktbeschreibungen hinzu. Bei Produkten wie Elektronik oder Pharmazeutika können Produktbeschreibungen ziemlich lang sein. Wählen Sie dann die
![Produktseitenoptimierung 2](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-store-design-1-1524574373.png)
Die
Heben Sie die Produktoptionen und die Schaltfläche „Zur Kasse“ hervor. Wenn Ihre Kunden keine langen Beschreibungen lesen oder die Galerie genau durchsehen müssen, um Ihre Produkte zu kaufen, können Sie die Produktoptionen mit der Schaltfläche „Zur Kasse gehen“ auf der linken Seite anzeigen. Angenommen, Sie verkaufen kleine Aquarienfische.
![Produktseitenoptimierung 3](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-store-design-5-1524574377.png)
Der „Zur Tasche hinzufügen“-Button im Fokus
Minimieren Sie Scrollen und Ablenkung. A
![Produktseitenoptimierung 4](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-14-1524574370-1024x302.png)
die kompakte
Sie können uns auch Wählen Sie das Layout Ihrer Fotogalerie. Helfen Sie Ihren Kunden, mit einer überzeugenden Fotogalerie ein Gefühl für Ihr Produkt zu bekommen. Wählen Sie das Layout für Miniaturansichten der Bilder in Ihrer Galerie (vertikal oder horizontal) oder zeigen Sie Ihre faszinierenden Bilder in voller Größe. Je mehr abwechselnde und detailliertere Ansichten Sie zeigen, desto besser.
![Layoutoptionen für die Fotogalerie](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-2-1524574349.gif)
Layoutoptionen für die Fotogalerie
3. Wählen Sie die Produktinformationen aus, die in der Seitenleiste angezeigt werden sollen
Eine konvertierende Produktseite bietet ausreichend Produktinformationen und ist dennoch einfach gehalten. In können Sie die Elemente (wie SKU, Produktoptionen, Teilen-Schaltflächen) ausblenden, wenn Sie sie nicht benötigen, damit Ihre Kunden auf dem Weg zum Warenkorb nicht abgelenkt werden.
Das Beste daran ist, dass Sie jedes Element ziehen und in beliebiger Reihenfolge anordnen können. Testen Sie viele neue Möglichkeiten, um Ihre Produktseiten für Conversions zu optimieren.
![Produktseitenoptimierung 5](https://don16obqbay2c.cloudfront.net/wp-content/uploads/Ecommerce-design-12-1524574365.gif)
Flexible Seitenleisteneinstellungen
Ändern Sie die Navigation und Farben Ihrer Storefront
Es gibt noch einige weitere Storefront-Einstellungen, die standardmäßig aktiviert sind, um Ihren Kunden die Navigation in Ihrem Shop zu erleichtern. Sie können diese Einstellungen jederzeit deaktivieren.
Wenn Sie von der älteren Storefront-Version wechseln, werden diese Einstellungen in der Originalversion in die neue Storefront migriert.
Farbadaptiver Modus. Wenn Sie einen -Onlineshop auf Ihrer Website installieren, werden die Shopfarben automatisch an das Design Ihrer Website angepasst. Ihr Shop sieht dann wie ein natürlicher Teil Ihrer Website aus.
Das Fußzeilenmenü und die Breadcrumbs Helfen Sie Kunden, sich in Ihrem Geschäft schneller zurechtzufinden und verhindern Sie, dass sie sich verirren.
Die
„Sortieren nach“-Optionen Ermöglichen Sie Ihren Kunden, Ihre Produkte nach Preis, Name und anderen Bedingungen zu sortieren.
Andere Möglichkeiten, das Design Ihres -Shops zu ändern
Die neuen Designeinstellungen decken die häufigsten Anwendungsfälle ab. Wenn Sie Ihren Shop auf andere Weise verändern möchten:
- Wenn Sie ein benutzerdefiniertes Design für Ihren Shop ohne Codierung benötigen, versuchen Sie (verfügbar in kostenpflichtigen -Plänen, es gelten App-Preise).
- Erstellen Sie ein benutzerdefiniertes CSS-Design (ein Satz von Regeln, der das Aussehen jedes Elements im Shop bestimmt, wie Größe, Form oder Farbe). Das Erstellen eines CSS-Designs erfordert bestimmte technische Kenntnisse. Es gibt eine das erklärt, wie Sie Ihr eigenes CSS-Theme erstellen und . Sie können jederzeit das -Kundenbetreuungsteam um Hilfe bitten oder .
- Für Entwickler: Verwenden Sie die .
Holen Sie sich eine kostenlose Website für Ihren Online-Shop
Ihr -Shop sieht toll aus, aber Sie haben keine Website zum Verkaufen?
Instant Site ist ein kostenloser Website-Builder, den Ihnen bei der Erstellung Ihres -Kontos zur Verfügung stellt. Damit können Sie schnell mit dem Online-Verkauf auf einer übersichtlichen Webseite beginnen und sofort Gewinne erzielen, um Ihr Geschäft auszubauen.
Apropos Design: Instant Site wurde erstellt mit
Wen rufen Sie an, wenn Sie Ihre Instant Site anpassen müssen? Niemanden! Sie können die gesamte Website ohne Spezialkenntnisse bearbeiten, indem Sie Ihren Desktop-Computer verwenden oder sogar die Mobile Store Management-App für iOS.
mit unseren
- Inspirierende Instant Site Beispiele
- Instant Site mit fertigen Themen und über 99 Designoptionen
- Neue -Designeinstellungen: Dutzende Anpassungsoptionen, keine Codierung erforderlich
- So wählen Sie eine E-Commerce-Vorlage für Ihre Website aus
- Eine umfassende Anleitung zur Anpassung Ihres -Store-Designs
- Entwerfen Sie Ihre kostenlose E-Commerce-Website von Grund auf
- Wie s barrierefreie Online-Shop-Vorlage zum Erfolg wurde