Tipps & Tricks: Bootstrap für Shopbetreiber
Mittwoch, 3. März 2021

Tipps & Tricks: Bootstrap für Shopbetreiber

Sie können nämlich eine elegante Abkürzung benutzen. Viele Dutzend von fantastischen Gestaltungselementen sind bereits in Smartstore verfügbar. Sie sind verblüffend einfach in viele Bereiche einzubinden. Der Standard dahinter: Bootstrap 4.

Damit gestalten Sie zum Beispiel

  • Buttons mit erweiterten Funktionen
  • Navigationselemente wie Menüs, Tabs und Kästen mit zuerst verborgenen und dann auf Klick freigegebenen Texten
  • wunderschöne “Karten”-Elemente mit optisch absetzbaren Kopf- und Fußbereichen

Normalerweise müsste ein Shopbetreiber wie ein Webdesigner arbeiten und für alles dies mühsam feinsäuberlich HTML- und CSS-Code programmieren. Nicht so mit Bootstrap.

Das in Smartstore bereits integrierte Bootstrap 4 ist eine professionell gestaltete, sofort einsatzbereite, voll responsive HTML- und CSS-Bibliothek. Sie ist in jedem HTML-Editor der Shopsoftware ohne weiteres verfügbar.

Wo kann man Bootstrap-Elemente einsetzen?

  • in Smartstore Widgets
  • in Smartstore Artikel-Langtexten
  • in Pagebuilder-Text- und HTML-Blöcken
  • auf Smartstore-Seiten

Kurz, überall da, wo ein Shopadmin einen längeren, formatierten Text in einem HTML-Editor eingeben kann.

Der Technikaufwand ist minimal. Sie müssen lediglich einen vorgefertigten HTML-Block in der HTML-Code-Ansicht mit Ihren Inhalten ergänzen. Das ist schnell zu lernen und das erzielte Ergebnis überzeugt Sie und Ihre Kunden!

Somit können Sie mit minimalem Aufwand mindestens 1.000 Prozent mehr Kunden begeistern! Wir stellen Ihnen im folgenden nur einige der Bootstrap-Fertigelemente vor, mit denen Sie ganz einfach einen Standard-Smartstore-Onlineshop zur individuellen Verkaufsmaschine erweitern!

Sogar an Javascript und Animationen wurde gedacht. Das bringt Ihre Elemente zum Leben und Strahlen.

Beispiel: Inhalte auf Knopfdruck zeigen

Diesen Inhalt sehen Shopkunden erst, wenn sie den Button angeklickt haben. Prima, um Details zu einem Angebot nur auf Klick freizugeben. Natürlich können hier im Text auch Links und Bilder enthalten sein. Das erfordert dann nur ein wenig HTML-Code.

Beispiel: Nav Pills

Das hier vorgestellte Beispiel enthält drei Nav Pills. Ein Klick auf “Bonus” zeigt verborgene Inhalte an.

Ihr Bonus: Sie erhalten eine schicke Aufbewahrungstasche gratis dazu!
Warten Sie nicht, denn die verfügbare Menge ist begrenzt!
Nur noch bis kommenden Montag im Angebot!

Beispiel: Jumbotron

Kauf mich!

Dies ist eine Vorlage für eine einfache Marketing-Message in Ihrem Smartstore-Shop. Sie sehen hier eine große Jumbotron-Textbox. Sie enthält diesen Fließtext und einen ...

Bootstrap-Button

Beispiel: Bootstrap Card

Standard-Card

Dies ist eine einfache Hero-Unit, um Shopbesucher auf besondere Inhalte oder Informationen hinzuweisen.


Diese Card verwendet Utility-Klassen für Typografie und Abstände, um den Content innerhalb des größeren Containers zu verteilen.

mehr erfahren


So fangen Sie an

Den Bootstrap-Code für erste Versuche können Sie einfach aus dem HTML-Quelltext dieser Seite entnehmen. Weitere Code-Beispiele finden Sie in der Bootstrap-Dokumentation (siehe unten).

Starten Sie zuerst mit ein paar Komponenten und bauen Sie E-Commerce-Projekte für Smartphones, Tablets, Desktops aus einem Guß! Sie können auch Webseiten, Marktplätze und Produktkataloge mit diesem genialen System entwickeln.

Responsives Design mit Bootstrap

HTML-Inhalte können in Smartstore über einen HTML-Editor erfasst werden, wie etwa in der ausführlichen Produktbeschreibung, in Widgets oder HTML-Seiten, im Content Slider, dem Mega Menu usw. Diese Inhalte sollen auf allen Geräten gut aussehen. Nichts leichter als das mit Bootstrap. Für die responsive Darstellung dieser Inhalte gilt es, ein paar Dinge im Hinterkopf zu behalten.

Responsive Bilder

Nachdem ein Bild über den HTML-Editor eingefügt wurde, muss man einmal in den HTML-Quellcode gehen, den man bequem über einen Button im HTML-Editor erreichen kann. Das style-Attribut des img-Elements sollte entfernt werden und das Bild sollte mit der Klasse img-fluid ausgestattet werden.

<img class="img-fluid" scr="#" ...="">

Layout: Elemente anordnen

Layout bedeutet hier die Anordnung verschiedener Elemente auf einer Webseite oder einem Bereich. Vielleicht möchten Sie Bilder in mehreren Spalten anzeigen, dies aber nur auf dem Desktop?
Da Smartstore mit Bootstrap 4 erstellt wurde, kann man die Klassen, welche von Bootstrap zur Verfügung gestellt werden, für diese Zwecke nutzen.

Responsive Tabellen

Wenn man eine tabellarische Auflistung darstellen möchte, kommt man um die Nutzung eines HTML-table-Tags nicht herum. Um diese Tabelle responsiv – also unabhängig von der Bildschirmgröße – zu gestalten, genügt das Zufügen von CSS-Klassen wie in folgendem Beispiel:

<table class="table table-responsive"></table>

Weitere Informationen zu Bootstrap finden Sie in der offiziellen Bootstrap-Dokumentation.
Ihr Kommentar

Kommentare (1)

G
Gast | Vor einem Monat

Hallo, ich bin immer wieder erstaunt, wie einfach es ist, in Smartstore alles zu modifizieren und zu verbessern, ich arbeite seit 20 Jahren im E-Commerce und habe schon 10 verschiedene Systeme ausprobiert, alle namhaften, keines davon kommt auch nur annähernd an das heran, was Smartstore leistet. Ich bin gespannt, was die Core Umstellung bringen wird, aber so wie ich Smartstore kenne, wird diese alles in den Schatten stellen. Weiter so! VG. Wladimir