Spreadshirt Shop erstellen und auf eigene Webseite einbinden
Um einen Spreadshirt Shop zu erstellen, klären wir zuerst wer oder was ist Spreadshirt? Der SpreadShop ist eine Print on demand (POD) Plattform.
Hier kann man seine eigenen Designs / Bilder etc. hochladen und auf unterschiedliche Produkte wie z.B. T-Shirts, Langarmshirts, Tassen, Hoodies drucken lassen.
Diese können auf dem Spreadshirt Marktplatz oder im eigenen SpreadShop verkauft werden.
Spreadshirt kümmert sich um den Vertrieb, die Bezahlung und Auslieferung der Ware. Man selbst erhält Provisionen auf die verkauften Produkte und die eigenen hochgeladenen Designs bzw. Motive.
Wir haben vor kurzem ein Projekt begonnen, welches Motive für Babymode und Kinderkleidung über den Spreadshirt Partnershop anbietet. In diesem Projekt geht es darum den Shop auf eine eigene Webseite einzubinden.
Spreadshirt hat bereits eigene WordPress Plugins erstellt, welche über die API verbunden werden können. Wir haben uns aber für eine andere Implementierung entschieden. Das Einbinden des Partnershops mit JavaScript.
SpreadShop erstellen und mit JavaScript einbinden
1. Melden Sie sich über https://partner.spreadshirt.de/login bei Spreadshirt an.
2. Klicken Sie auf das orangene Shop Symbol und wählen Sie Ihren Shop aus.
3. Wählen Sie „Erweitert“ aus und klicken Sie darauf.
4. Nun klicken Sie auf „Shop in Website einbinden“.
5. JavaScript Code kopieren und ins HTML Ihrer Webseite einbinden.
Nun hat man seinen Spreadshirt Partnershop in seine Webseite eingebunden. Hier erscheinen nun Header, Footer, Suchfunktion,
evtl. auch die Startseite, wenn diese nicht ausgeschaltet ist.
Um die Spreadshirt Startseite auszuschalten gehen Sie auf das orangene Shop Icon und klicken auf Seiten, danach auf Startseite. Nun können Sie die Startseite deaktivieren. Jetzt werden Ihre Produkte angezeigt ohne „Landingpage“.
Shop einbinden
Beginnen Sie mit dem Aufbau der eigenen Webseite. Die „Home-Seite“ („Startseite“) haben wir in unserem Projekt neu erstellt.
Vom Menü, über den Body (hier haben wir jede Seite einzeln konfiguriert), bis hin zum Footer.
Um die „richtigen“ Spreadshirt-Seiten in unserem Projekt anzuzeigen, sind einige Änderungen im JavaScript vorzunehmen.
Zum Beispiel, möchten Sie auf einer Seite nur DESIGNS anzeigen. Hier benötigt man die ID DESIGN. Oder Sie möchten Kinder T-Shirts in einer weiteren Seite anzeigen lassen. Hierzu ist die ID P42 notwendig usw. Wo findet man die ID? Die jeweilige Produkt-ID wird im https-Link angezeigt und diese können Sie im Spreadshop ablesen.
Der startToken Pfad wird hierzu im JavaScript Code benötigt: startToken: '?q=P42‘
Header ausblenden im Spreadshirt Shop
Nachdem die Struktur der Seiten erstellt ist und die jeweiligen Produkte Ihres Spreadshirt Shops angezeigt werden, wird es an der Zeit weitere Anpassungen an Ihrer Webseite vorzunehmen.
Hierzu öffnen Sie im Spreadshirt Partnershop den Tab „Erweitert“ und „HTML & CSS“, um den Header zu entfernen geben Sie in das Feld Shop CSS ein:
.sprd-header {
visibility: hidden
}
Um die Navigation und Breadcrumb ebenfalls auszublenden benötigen Sie folgenden Code:
.SprdMain .sprd-navigation,
.SprdMain .sprd-breadcrumb {
display: none;
}
Wenn Sie die Überschrift bzw. den Titel des Designs ebenfalls nicht anzeigen lassen möchten, können Sie dies wie folgt ausblenden:
.sprd-listpage__title {
visibility: hidden
}
Und zu guter letzt wird der Promo-Banner mit folgendem Code vom Shop entfernt:
.sprd-promo-header {
visibility: hidden
}
Wie kann man den Footer im Spreadshirt Shop ausblenden?
Auch für diese Frage gibt es eine Antwort. In unserem Projekt haben wir den Footer komplett herausgenommen.
Folgender Code kann in das Feld Shop CSS eingegeben werden:
.sprd-footer {
display:none;
}
Um weitere Codes zu erstellen bzw. um herauszufinden wie die einzelnen Code-Snippets bei Spreadshirt heißen, können Sie das Google Entwicklertool verwenden.
Dieses Werkzeug befindet sich unter:
1. Google-Fenster öffnen
2. In der Google-Leiste rechts oben, die drei Punkte im Fenster anklicken
3. Mit der Maus über weitere Tools gehen
4. Entwicklertools heraussuchen und anklicken
Nun öffnet sich ein Fenster, mit welchem Sie Ihren Spreadshirt Partnershop nach passenden Code-Snippets inspizieren können…
Unser Projekt, den fertigen Spreadshop können Sie sich unter Baby & Kids Fashion ansehen. Ebenfalls haben wir ein kurzes Tutorial über die Einbindung auf unseren Youtube Kanal gestellt. Weitere Videos können Sie auf unserer Mitgliederseite ansehen. Hierzu können Sie sich kostenlos registrieren.