LoginRegister
Shop Settings

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:

PlatformLocaleLanguageCurrency

  • 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 and Twitter 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.

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:

Twitter
Facebook