Header

Pop Up - Login

support-shopsettingscategory-amanda.myers

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

Running a non-profit shop

It’s no problem to run your Spreadshop as a non-profit shop. Non-profit shops are interesting for non-profit associations or organizations that are not allowed to make a profit since they would otherwise lose their non-profit status. With the non-profit option, one click sets your margin to zero and you forgo profits in your Shop (Shop Settings &gt; Prices &amp; Promos &gt; Shop pricing). Your retail price is thus the same as the [base price](a02190ac-41f4-4e73-9885-8e7b57d4b3da). You will not receive a [performance bonus](7feb3c1c-d62c-4658-9cf9-5ae88671e36b), nor will you be liable to share the costs of discount campaigns. You can find more information on the taxation of your shop income [here](e6d5c0c9-21ea-49cb-ad15-58c69c634c2c).

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

Printing costs and print areas

The costs for one print area are already included in the [base price](a02190ac-41f4-4e73-9885-8e7b57d4b3da). This applies to all [print types](817cf3eb-ea32-4844-8984-050f9bce7bd5) offered in your Spreadshop: Whether digital printing, flex, flock or [thermal printing](817cf3eb-ea32-4844-8984-050f9bce7bd5) — the first print area is always included.

If you or your customers want to create additional print areas on a product, they will be charged $4.50 (CAD 6.00/AUD 7.50) per print area. These additional costs are simply added to the retail price and have no influence on how you [earn your money](adb6a3e8-d7ba-46bd-a02d-5a08d74f9ca1). Your margin will stay the same.

### Fair printing costs

It doesn’t matter how many designs or text elements a customer chooses to place in a print area. We only charge customers per print area, regardless of the number of designs on a single print area they customize. The only exception is: If your customer uses a paid community design in the Customize Tool of your Shop, these costs are added to the retail price the customer pays. But this won’t have an effect on your earnings.

Support - website-integration-with-javascript - clbe

Website Integration with JavaScript

You can embed your Spreadshop in a website you run.

It’s very easy to embed your Shop if you know a bit of HTML/CSS/JavaScript and if you have access to the source code of your page.

### **Where is your Shop supposed to show?**

To determine the placement on your page, place a div element with an id (that you can choose freely) in the respective position in your HTML code. Everything you write in this div element will be shown until the Shop is loaded. Then it will be deleted completely. This is why the place between the `div` tags is quite suitable for a statement like “Spreadshop loading...“

```
<div id="shop">Spreadshop loading...</div>
```

### **Configure**

To make sure your Shop will be loaded successfully, add the object spread_shop_config in JavaScript (should be available in window Scope).

At minimum, it should look like this:

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

### **The necessary parameters:**

* **shopName** `string`\
 Your Shop’s name or ID. You can find them in the overview of your sales channels

* **prefix** `string/url`\
 Your Shop’s complete domain (everything before the dash, i.e. `https://SHOPNAME.myspreadshop.com` or `https://SHOPNAME.myspreadshop.ca`)

* **baseId** `string`\
 The `id` you had chosen for the `div` elements (see above)

### **Last piece of the puzzle: The Script**

Last but not least, you need to add a link to the script that will deliver the goods when loading the Shop. Ideally, you should place it somewhere below your configuration.

#### **For North American Shops:**

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

#### **For European Shops:**

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

### **Everything goes hand in hand this way**

A complete, minimalistic example could look like this:

```
<!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>
</code>
```

### **Fonts**

So you can easily adjust your Shop to the look of your website, we don’t define fonts for embedded Shops. This means that you need to define the fonts yourself — either in the body tag, in a div enveloping your Shop or in the Spreadshop container itself.

### **Shop adjustment for advanced users**

There are a few other parameters you can adjust.

* **locale** `string`\
 If you run an international Shop, you can change language and currency of your embedded Shop with these parameters. The following values are at your disposal:

* **updateMetadata** `boolean` (default: `true`)\
 If not otherwise defined, your Shop’s relevant integrated SEO meta data changes in your site’s head (`title`, `description` and `seoIndex`, as well as [OpenGraph](http://ogp.me/) and [Twitter](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary) Card tags). If you want to switch off this feature, set the parameter to `false`.


* **usePushState** `boolean` (default: `false`)\
 In a standardized way, hashbang URLs are created when navigating an embedded Shop (`.../shop/#!/männer+t-shirts?q=P24`). You can bypass this by setting the parameter to `true`. This is considered an expert feature since it requires changes to the `.htaccess`-file on your webserver.

* **pushStateBaseUrl**\
 Is only relevant if you already use 'usePushState' (= `true`), and if you want to suppress a 'redirect' to your Spreadshop or if you want to embed your Shop at different places. Define the entry point of the embedding website, in which your Shop should be hooked in.Is only relevant if you already use 'usePushState' (= true), and if you want to suppress a 'redirect' to your Spreadshop or if you want to embed your Shop at different places. Define the entry point of the embedding website, in which your Shop should be hooked in.

* **startToken** `string`\
 Path to a page in your Shop that should be displayed as your start page.

* **swipeMenu** `boolean` (default: `false`)\
 If you use a burger menu for navigation of your embedded shop, you can deactivate the Spreadshop burger menu with this parameter and use a swipe menu instead. Set the parameter to `true`.

### **Example**

An example using all available parameters could look like this:

```
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,
};
```

### **Common mistakes and their causes**

#### **DOCTYPE missing**

Your HTML file needs to start with the tag `<!DOCTYPE html>`, because Spreadshop has been designed for HTML5. Without this tag, there will be layout and styling issues. In an embedded Shop, you’ll see a very prominent banner to remind you in case the tag is missing.

#### **Buttons and links don’t work**

Spreadshop uses React.js, which leads to errors when used in conjunction with MooTools when in compatibility mode. If you encounter this problem, try disabling the compatibility mode, or remove MooTools entirely if possible.

#### **Shop embedded multiple times**

We strongly advise against embedding the Shop on the same page several times. This will lead to undesired behaviour.

#### **Unusual special characters (e.g. “Â”)**

Please change your html encoding to utf-8. Most CMS have an editable property for that. If you use plain HTML files, just make sure to encode your files in utf-8 and ensure that `<meta charset=“UTF-8“>` is present in your HTML's `head` section.

#### **“DOCTYPE missing” warning when embedding in a Weebly site**

This warning is usually only visible in the editor. If you publish your changes anyway, the integration will function on the published site.

#### **GoDaddy Website Builder integration not working**

Due to technical constraints from GoDaddy, it is unfortunately not possible to set up a working integration right now.

### **Tutorial**

Check out our new video tutorial to find out more about embedding: