Menu

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 = { &Tab;shopName: 'goats', &Tab;prefix: 'https://shop.spreadshirt.de', &Tab;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://shop.spreadshirt.de or https://shop.spreadshirt.co.uk)
  • 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 European Shops:

<script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script>

For North American Shops:

<script type="text/javascript" src="https://shop.spreadshirt.com/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://shop.spreadshirt.de', shopName: 'goats', baseId: 'shop' }; </script> <script type="text/javascript" src="https://shop.spreadshirt.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 and seoIndex, as well as OpenGraph and Twitter Card tags). If you want to switch off this feature, set the parameter to false.
  • usePushState booelan (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.
  • startToken string
    Path to a page in your Shop that should be displayed as your start page.

Example

An example using all available parameters could look like this:

 var spread_shop_config = { shopName: 'goats', prefix: 'https://shop.spreadshirt.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 the Spreadshop has been designed for HTML5. Without this tag, there will be layout and styling issues. In an imbedded Shop, you’ll see a very prominent banner pointing to the missing tags.

Buttons and links won’t work

The Spreadshop uses React.js, which leads to errors when used with MooTools in compatibility mode. In case nothing in your Shop is clickable, MooTools may be used in the compatibility mode.

Shop imbedded multiple times

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

Unusual special character (e.g. “”)

Please pay attention to UTF-8 coding. Most CMS have a setting for it. If you have access to your own HTML files, code them with UTF-8 and make sure that the day <meta charset=“UTF-8“> is present in your head.

Tutorial

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

Was this article helpful?