Embed custom JavaScript code

In this article you will learn how to include your own JavaScript code with ThemeWare®.

You have several options with ThemeWare® to embed your own JS code in your shop.

Please note that custom code is not automatically compressed. It is best to compress your custom code manually before embedding it.

Note: Custom JS code is not automatically compressed. It is best to compress your code manually.

Also note that individual scripts are not automatically included in the cookie content manager of Shopware. If you use cookie relevant JS code, make sure that it is correctly integrated into the cookie content manager.

Important: Please note that custom JavaScript is not automatically integrated into the cookie content manager.

Before we talk about embedding JS code, we would like to point out that you should never edit original Shopware files or extensions (plugins, apps or themes). This can lead to various problems.

Attention: Do not edit Shopware files or files of any extension (plugins, apps or themes).

In addition, we point out that the functionality of Shopware, ThemeWare® and third-party extensions can be significantly affected by incorrect JavaScript code. Therefore, be sure to write clean and correct JS code!

Caution: Individual JavaScript code can lead to problems that can interfere with various features of Shopware, ThemeWare® or third-party extensions! Use JavaScript only if you are absolutely sure.

1. Integrate JavaScript code with configuration field

Enter the desired JS code in the following configuration field: Tab "Others" => Block "Expert settings" => Section "Individual code" => Field "Individual JS code".

The content of the configuration field is added 1:1 at the end of the HTML page. So please enter the full <script> tag here.

Example:

<script>
  alert( 'Hello, world!' );
</script>

Tip: To apply the "Expert settings" in the storefront, please activate "Expert mode" and deactivate the "Debug mode" of ThemeWare®:

• Tab "Others" => Block "Expert settings" => Expert mode

• Expert mode

• Debug mode

2. Integrate JavaScript code with external JS file

To deposit a file locally on your server and integrate it into the storefront, please proceed as follows:

2.1) Creating and editing a JS file on the server

1. Log in to your server via FTP and switch to file "js". File path: "public/js/"

2. Create the file "script.js".

3. Deposit your CSS code in file "script.js".

4. Save the modification of the file "script.js" and upload it again if necessary.

2.2) Embedding a JS file with ThemeWare®

1. Open ThemeWare® in the Theme Manager and switch to the Tab "Others" => Block "Expert settings" => Section "JS file"

2. Enter the path to the "script.js" in the field "JS file". (e.g. "yourshop.de/js/script.js")

3. Select the option "Yes" in the field "Load JS file".

4. Save the settings so that the current theme will be compiled and changes will take effect in the storefront.

Note: Access to external files (files on a different domain) is not recommended, see "Cross-Origin Resource Sharing".

3. Integrate custom JavaScript code (for experienced users)

Currently, the most professional way to integrate JavaScript code is to use a separate extension. There are special extensions (plugins or apps) for this in the Shopware Community Store.

Alternatively, you can use our free "ThemeWare® Customizing Plugin" (self-managed) or the "ThemeWare® Customizing App" (cloud) to integrate customizations and your own files.