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
orhttps://SHOPNAME.myspreadshop.ca
) - baseId
string
Theid
you had chosen for thediv
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:
platform locale language currency EU DK Danish Danish krone (kr) EU EN_EU English Euro (€) EU EN_GB English Pound Sterling (£) EU EN_IE English Euro (€) EU DE German Euro (€) EU AT German Euro (€) EU CH German Swiss Franc (CHF) EU ES Spanish Euro (€) EU FI Finnish Euro (€) EU BE French Euro (€) EU CH French Swiss Franc (CHF) EU FR French Euro (€) EU CH Italian Swiss Franc (CHF) EU IT Italian Euro (€) EU BE Dutch Euro (€) EU NL Dutch Euro (€) EU NO Norwegian Norwegian krone (kr) EU PL Polish Euro (€) EU SE Swedish Swedish krone (kr) NA US English Dollar ($) NA CA English Dollar ($) NA AU English Australian Dollar (AUD$) NA CA French Canadian Dollar (CAD$) - updateMetadata
boolean
(default:true
)
If not otherwise defined, your Shop’s relevant integrated SEO meta data changes in your site’s head (title
,description
andseoIndex
, as well as OpenGraph and Twitter Card tags). If you want to switch off this feature, set the parameter tofalse
. - 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 totrue
. 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 totrue
.
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: