1. Home
  2. Product Sales
  3. Sales boosting features
  4. Embed Digistore24 shopping cart onto your website

Embed Digistore24 shopping cart onto your website

When you embed Digistore24 Shopping Cart in your website, your customers gain the possibility of putting multiple products into the Shopping Cart before they 'proceed to checkout'. Using the Digistore24 order form, they pay for all products in the Cart with a single payment.

Below, we present an overview of the functionality, including installation guide, description of available options, as well as tips for the smooth functioning of the Shopping Cart feature on your website.

1. How the Digistore24 shopping cart works

Step 1: ​Customer clicks on one of your buy buttons

When someone clicks on the buy button, a confirmation message will appear indicating that the product has been added to the shopping cart. The subtotal and the number of products in the shopping cart are displayed. The customer can close the window in two ways: either by clicking on the button Continue shopping or by clicking on the cross in the upper right corner. More products can now be added to the cart in the same way. Finally, if the customer clicks the button Go to checkout, then they will be redirected to the Digistore24 order form.

Step 2: ​Show shopping cart in the purchase process

You can embed a shopping cart link (e.g. in your menu or as a shopping cart icon) into your page. If the customer then moves the mouse over this link (or this icon), the detailed view of the shopping cart will automatically appear. Customers using a smartphone or tablet need to tap the shopping cart link with their finger.

​Step 3: Pay by clicking on the button Go to checkout

After clicking on the button Go to checkout, the Digistore24 order form will appear. This now displays all the goods that the customer has previously placed in the shopping cart. Now the customer can pay for these products in just one sales process.

2. Installing the Digistore24 shopping cart

Step 1: ​Embed the shopping cart onto your website

You can embed the shopping cart onto your website via JavaScript or WordPress shortcode. The WordPress shortcode only works in conjunction with WordPress and the installed Digistore24 plugin (version 2.17 or higher).

Insert the downloaded file into your WordPress account under Plugins > Install > Upload plugin, and make sure that the plugin is activated. After that, you can embed the shopping cart onto your page using the shortcode below. Insert the shortcode where you would insert normal text or HTML code.

Alternatively, you can revert to the JavaScript code. To do this, insert the following code (from <script up to and including </script>) into the header of your website’s HTML document e.g. directly in front of </head>. If this is not possible, insert the code as high up as possible on the page.

Note:

Do not be surprised if you do not see the shopping cart on your website after completing this step. The shopping cart is already embedded onto your page, but it will not appear until you include the following links and use it on your website.

Step 2: ​Set up buy buttons

​The buy URL for the shopping cart is as follows: https://www.digistore24.com/add/123 (123 stands for the product ID here).

If you use page builders such as OptimizePress, it is sufficient to embed this link with the product ID into your buttons, images or your text in the desired places.

With HTML:
Please always only use the classic HTML-a-tag for the buy link. Otherwise, Digistore24 will not recognize the buy button correctly.

Please assemble the link correctly, as demonstrated in the following examples:

​Code for a text link:
<a href="https://www.digistore24.com/add/123">Link Text</a>

Code for an image link:
<a href="https://www.digistore24.com/add/123"><img src="button-image-url"/></a> 

Please replace the placeholder URL_TO_BUTTON_IMAGE with the URL of the image you want to use for the image link.

You can embed a shopping cart link or button into your website that allows the customer to call up their current shopping cart status. If they move the mouse over it (or tap the link on a smartphone/tablet), the shopping cart window will appear.

Another URL is required for this link: https://www.digistore24.com/cart

If you use a page builder e.g. OptimizePress, you can take this link as it is and embed it into a button.

With HTML:
Please also assemble this link correctly, as demonstrated in the following examples:

<a href="https://www.digistore24.com/cart">Link Text</a>

Code for an image link:
<a href="https://www.digistore24.com/​cart"><img src=​URL_TO_BUTTON_IMAGE/></a>

Please replace the shortcode URL_TO_BUTTON_IMAGE with the URL of the image you want to use for the image link.

​3. The settings options of the Digistore24 shopping cart

The Digistore24 shopping cart has several settings options. In order to add a setting to the shopping cart, you need to extend the JavaScript code or WordPress shortcode using additional options.

In the JavaScript code: digistoreCart("Option1 Option2");

In the WordPress shortcode: [digistore_cart Option1 Option2]

If there are several settings options for an option, then place the settings options before an equals sign:

In Javascript Code: digistoreCart("Option1 Option2");

In WordPress Shortcode: [digistore_cart Option1 Option2]

A concrete example of a WordPress shortcode that causes the Added to shopping cart message to appear at the bottom of the browser window:

 [digistore_cart info_position=bottom]

Possible settings and the associated options

Examples

​​​​In Javascript Code:
<script src="https://www.digistore24-app.com/service/digistore.js"></script>
<script>
digistoreCart("language=en netto tracking='campaign 1'");
</script>

In WordPress Shortcode:
[digistore_cart language=en netto tracking="campaign 1"]

4. Tips and tricks for the Digistore24 shopping cart

Tip 1: ​Adjust payment plans of all products to each other

If you sell products by subscription or installment payments, you must choose the same billing intervals, e.g. monthly or yearly. This results in a lower number of direct debits to the customer, which leads to greater satisfaction.

Otherwise Digistore24 selects the billing interval that is most frequently used:

Example:

Product 1 has annual payment (first interval) and monthly payment (subsequent intervals).

Product 2 has annual payment (first interval) and two-year payment (subsequent intervals).

Product 3 has a single payment only.

=> The buyer can only pay per year.

If the products have test periods, the shortest test periods of the selected products are used.

 

In order for the debits to be made at the same time, it must also be decided for all products (including single payments) whether VAT is included in the price or not.

 

You can set all these settings under Account > Products in the product details in the tab “Payment plans”.

Tip 2 (for your web designers): ​Permanently display windows

You can permanently display the various windows to make them easier to rearrange. To do this, add the following option to the URL with which the shopping cart was installed: ?ds24debug.

Example: https://www.domain.com?ds24debug

Tip 3 (for your web developers): Add products via JavaScript

If you want to make your website more flexible, then products can be added to the shopping cart using the JavaScript function ds24cart_add() e.g.:

ds24cart_add( 123 ); // inserts product no. 123 to the shopping Cart
ds24cart_add( 123, 3 ); // inserts product no. 123 three times

To show the shopping cart, use ds24cart_show( button ).

<button onclick="return ds24cart_show(this);">Show shopping cart</button>

Updated on 16. November 2019

Was this article helpful?

Related Articles