Header - live

support-shopsettingscategory-amanda.myers

Support FAQ - running-a-non-profit-shop/ - Arsi

Non-Profit-Shop betreiben

Du kannst deinen Spreadshop ohne Probleme als Non-Profit-Shop betreiben. Non-Profit-Shops sind zum Beispiel für gemeinnützige Vereine oder Organisationen interessant, die keine Gewinne erzielen dürfen, weil sie sonst ihre Gemeinnützigkeit verlieren. Mit der Non-Profit-Option wird deine Marge mit einem Klick auf Null gesetzt und du verzichtest auf die Gewinne in deinem Shop (Shop bearbeiten &gt; Preise &amp; Rabatte &gt; Preise im Shop). Dein Kund\*innenpreis entspricht somit dem [Basispreis](1fe43a5e-99b6-4ccb-8db8-c5ab671d0224). Du erhältst dann keinen [Erfolgsbonus](5a9050e2-08fa-4ff3-adbf-20c579a68547) und wirst auch nicht an den Kosten für Rabatt-Aktionen beteiligt. Weitere Informationen zur Versteuerung Deiner Shop-Einnahmen findest Du [hier](9386628c-0c4b-40ac-8aaf-dc3851f10f94).

Support FAQ - printing-costs-and-print-areas/ - Arsi

Druckkosten und Druckbereiche

Die Kosten für einen Druckbereich sind bereits im [Basispreis](1fe43a5e-99b6-4ccb-8db8-c5ab671d0224) enthalten. Das gilt für alle [Druckarten](85a67a57-fc85-4942-adfe-fb3e64133dc3), die in deinem Spreadshop angeboten werden: Egal ob Digitaldruck, Flex-, Flock- oder Thermodruck – der erste Druckbereich ist immer inklusive.

Willst du oder wollen deine Kund\*innen weitere Druckbereiche auf einem Produkt anlegen, werden diese mit 4,50 € / CHF 5,00 (ab 1. August 2023 6,00 € / CHF 6,00) pro Druckbereich berechnet. Diese zusätzlichen Kosten werden einfach zum Kundenpreis addiert und haben keinen Einfluss auf die Art wie du dein [Geld verdienst](db84da51-878f-49fe-9799-88fbea2abe3d). Deine Marge bleibt gleich hoch.

### Faire Druckkosten

Es ist egal, wie viele Designs oder Text Kund\*innen in einem Druckbereich platzieren. Wir rechnen immer nur die Zahl der genutzten Druckbereiche ab, nicht die Anzahl der Motive auf einem einzelnen Druckbereich. Einzige Ausnahme: Sollten sich deine Kund\*innen im Design-Tool deines Shops bei den kostenpflichtigen Community-Designs bedienen, werden diese Kosten zum Kundenpreis addiert. Auch in diesem Fall ändert sich an deiner Vergütung nichts.

Support - website-integration-with-javascript - clbe

Website-Integration mit JavaScript

Im Folgenden zeigen wir Dir, wie Du Deinen Spreadshop in eine bestehende Website einbettest. Dafür benötigst Du ein paar grundlegende Kenntnisse in HTML, CSS und JavaScript sowie Zugriff auf den Quellcode der Website.

## **Wo soll Dein Shop erscheinen?**

Lege fest, wo auf der Website Dein Spreadshop angezeigt werden soll. Dafür platzierst Du an der entsprechenden Stelle in der HTML-Datei einen `div`-Container. Dein Spreadshop wird in diesem Container gerendert. Die `id` kannst du frei wählen.

Alles, was Du innerhalb des `div`-Elements schreibst, wird so lange angezeigt, bis der Shop geladen ist. Deshalb eignet sich der Ort zwischen den div-Tags besonders gut für eine Meldung wie „Spreadshop wird geladen...“

```
<div id="shop">Spreadshop wird geladen ...</div>
```

## **Konfigurieren**

Damit Dein Shop geladen wird, konfigurierst Du mit `spread_shop_config` die entsprechende Variable in JavaScript. Dabei muss `spread_shop_config` im ‚window scope‘ gesetzt werden.

In seiner minimalen Variante sieht das so aus:

```
var spread_shop_config = {
	shopName: 'goats',
	prefix: 'https://SHOPNAME.myspreadshop.de',
	baseId: 'shop',
};
```

Damit die Konfiguration geladen werden kann, musst Du noch die entsprechenden Parameter definieren:

* **shopName** `string`\
 Der Name oder die ID Deines Shops. Diese findest Du im Admin-Bereich Deines Spreadshops.

* **prefix** `string/url`\
 Die komplette Domain Deines Shops. Das ist alles vor dem Schrägstrich, z.B. `https://SHOPNAME.myspreadshop.de` oder `https://SHOPNAME.myspreadshop.co.uk`)

* **baseId** `string`\
 Die von Dir vorher festgelegte `id` des `div`-Elements (siehe oben)

## **Letztes Puzzleteil: Das Script**

Zum Schluss musst Du noch einen Link zu dem Script hinzufügen, das die eigentliche Arbeit erledigt und Deinen Shop lädt. Idealerweise platzierst Du es unterhalb Deiner Konfiguration. Je nachdem, auf welcher Plattform Dein Shop gehostet wird, fügst Du die folgenden Zeilen ein:

### **Für europäische Shops:**

```
<script type="text/javascript" src="https://SHOPNAME.myspreadshop.net/js/shopclient.nocache.js"></script>
```

### **Für nordamerikanische Shops:**

```
<script type="text/javascript" src="https://SHOPNAME.myspreadshop.com/js/shopclient.nocache.js"></script>
```

## **So arbeitet alles zusammen**

Ein vollständiges Beispiel sieht so aus:

```
<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Integrated Shop Test</title>
 </head>
 <body>
 <div id="shop">Spreadshop loading...</div>
 <script>
 var spread_shop_config = {
 prefix: 'https://SHOPNAME.myspreadshop.de',
 shopName: 'goats',
 baseId: 'shop',
 };
 </script>
 <script type="text/javascript" src="https://SHOPNAME.myspreadshop.net/js/shopclient.nocache.js"></script>
 </body>
</html>
```

## **Schriftarten**

Damit Dein Spreadshop gut zu Deiner Website passt, definieren wir keine eigenen Schriftarten im eingebetteten Shop. Das bedeutet für Dich, dass Du Deine Schriftarten selbst definieren musst: entweder im `body`-Tag, einem den Shop umschließenden `div` oder im Spreadshop-Container selbst.

## **Anpassungen für Fortgeschrittene**

Es gibt noch weitere Parameter, die Du einstellen kannst.

* **locale** `string`\
 Hast Du einen internationalen Shop, kannst Du die Sprache und Währung Deines eingebetteten Shops mit diesem Parameter ändern.\
 Folgende Werte stehen zur Verfügung:

 | platform | locale | language | currency |
 |----------|----------|----------|----------|
 | EU | da_DK | Danish | Danish Krone (kr |
 | EU | en_EU | English | Euro (€ |
 | EU | en_GB | English | Pound Sterling (£ |
 | EU | en_IE | English | Euro (€ |
 | EU | de_DE | German | Euro (€ |
 | EU | de_AT | German | Euro (€ |
 | EU | de_CH | German | Swiss Franc (CHF |
 | EU | es_ES | Spanish | Euro (€ |
 | EU | fi_FI | Finnish | Euro (€ |
 | EU | fr_BE | French | Euro (€ |
 | EU | fr_CH | French | Swiss Franc (CHF |
 | EU | fr_FR | French | Euro (€ |
 | EU | it_CH | Italian | Swiss Franc (CHF |
 | EU | it_IT | Italian | Euro (€ |
 | EU | nl_BE | Dutch | Euro (€ |
 | EU | nl_NL | Dutch | Euro (€ |
 | EU | no_NO | Norwegia | Norwegian Krone (kr |
 | EU | pl_PL | Polish | Euro (€ |
 | EU | sv_SE | Swedish | Swedish Krone (kr |
 | NA | en_US | English | Dollar ($ |
 | NA | en_CA | English | Dollar ($ |
 | NA | en_AU | English | Australian Dollar (AUD$ |
 | NA | fr_CA | French | Canadian Dollar (CAD$ |

* **updateMetadata** `boolean` (default: `true`)\\

 Falls nicht weiter definiert, verändert der integrierte Shop SEO-relevante Metadaten im `head` Deiner Seite (`title`, `description` und `seoIndex` sowie [OpenGraph](http://ogp.me/) und [Twitter](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary) Card tags). Möchtest Du diese Funktionalität ausschalten, setze den Parameter auf `false`.

* **usePushState** `boolean` (default: `false`)\\

 Standardmäßig entstehen beim Navigieren in eingebetteten Shop Hashbang-URLs (`.../shop/#!/männer+t-shirts?q=P24`). Dies umgehst Du, wenn Du diesen Parameter auf `true` setzt. Dazu sind jedoch auch Änderungen an der `.htaccess`-Datei auf Deinem Webserver notwendig und deswegen sollten sich nur Experten an dieses Feature wagen.

* **pushStateBaseUrl**\\

 Ist nur relevant, wenn Du bereits ‚usePushState‘ nutzt (= `true`), einen ‚redirect‘ zu Deinem Spreadshop unterdrücken oder aber Deinen Shop an unterschiedlichen Stellen einbetten möchtest. Definiere dafür den Einstiegspunkt der einbettenden Website, ab der Dein Shop eingehängt werden soll.

* **startToken** `string`\\

 Mit diesem Pfad legst Du fest, welche Seite in Deinem Shop als Startseite angezeigt werden soll.

* **swipeMenu** `boolean` (default: `false`)\\

 Hat die einbettende Seite bereits ein Burger-Menü, deaktivierst Du am besten das Burger-Menü Deines Spreadshops. Ändere diesen Parameter und nutze stattdessen ein Swipe-Menü. Setze dafür den Parameter auf `true`.

## **Beispiel für fortgeschrittene Anpassungen**

Ein Beispiel, das alle verfügbaren Parameter verwendet, könnte so aussehen:

```
var spread_shop_config = {
 shopName: 'goats',
 prefix: 'https://SHOPNAME.myspreadshop.de',
 baseId: 'shop',
 locale: 'de_DE',
 startToken: 'men+t-shirts?q=P24',
 usePushState: false,
 updateMetadata: true,
};
```

## **Häufige Fehler und Ursachen**

### **DOCTYPE fehlt**

Deine HTML-Datei muss mit dem Tag `<!DOCTYPE html>` beginnen, weil Spreadshop für HTML5 erstellt wurde. Ohne dieses Tag kommt es zu Layout- und Styling-Problemen. Im eingebetteten Shop wird Dich ein sehr prominentes Banner auf das Fehlen dieses Tags aufmerksam machen.

### **Buttons und Links funktionieren nicht**

Wenn nichts in Deinem Shop klickbar ist, könnte es am Kompatibilitätsmodus von MooTools liegen.Der Spreadshop benutzt nämlich `React.js`, was mit MooTools im compat-Modus inkompatibel ist.

### **Shop merhmals eingebettet**

Wir raten dringend davon ab, den Shop mehrmals in dieselbe Seite einzubetten.

### **Ungewöhnliche Sonderzeichen (z.B. „Â“)**

Bitte achte auf UTF-8-Kodierung. Die meisten CMS haben eine Einstellung dafür. Hast Du Zugang zu Deinen eigenen HTML-Dateien, kodiere sie bitte mit UTF-8 und stelle sicher, dass das Tag `<meta charset=“UTF-8“>` in Deinem `head` vorhanden ist.

### **“DOCTYPE missing” Meldung beim Einbetten in Weebly-Site**

Diese Fehlermeldung ist in der Regel nur im Weebly-Editor sichtbar und kann ignoriert werden. Das Einbetten Deines Spreadshops funktioniert trotzdem, wenn Du die Änderungen veröffentlichst.

### **Integration mit GoDaddy Website Builder funktioniert nicht**

Mit GoDaddy lässt sich zurzeit leider keine funktionierende Integration realisieren.

Shop einrichten

Non-Profit-Shop betreiben

Druckkosten und Druckbereiche

Website-Integration mit JavaScript