> For the complete documentation index, see [llms.txt](https://docs.premsoft.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.premsoft.de/en/plugins/cross-selling-for-cart-and-checkout/storefront-integration.md).

# Storefront integration

To make cross-selling work in basket and checkout the plugin automatically inserts content in several places. You use the [Configuration](/en/plugins/cross-selling-for-cart-and-checkout/configuration.md) to control whether and where the slider appears.

## Where does the cross-selling slider appear?

The slider is available everywhere customers review or complete their order — and each spot can be activated individually:

### Off-canvas basket

The slide-in basket that appears after adding a product. Four options:

* **No** — no slider in the off-canvas.
* **Above basket** — slider in front of the line items.
* **Below basket** — slider between line items and subtotal.
* **Bottom of the off-canvas** — slider at the very bottom, below the buttons. Very effective on mobile.

### Basket page

The dedicated basket page (e. g. after clicking "Show basket"):

* **No** · **Above basket** · **Below basket**

### Checkout page

Both the confirmation page and the checkout register page:

* **No** · **Above checkout** · **Below checkout**

{% hint style="info" %}
Tip: Many merchants combine **Off-canvas (bottom)** with **Basket page (below)**. That way customers see the slider both in the quick flow and on the detailed basket view.
{% endhint %}

### Product detail page

The product detail page does not get a dedicated slider. Instead the **discounted price** is shown right on the product as soon as it is matched by an active cross-selling rule. This works even when the triggering product isn't yet in the basket — as long as the rule type is "Defined by products / Dynamic product group" and the current product belongs to the cross-selling list.

### Listing and search pages

Products also appear with their reduced price and discount badge in:

* Category listings
* Search result pages
* Search suggestions (auto-suggest)

That way the offer is visible already in the overview, not only in the basket.

## What does the slider look like?

The slider uses the **Shopware standard product slider design**:

* Title "Suitable products" (translatable per language via Shopware snippets).
* Outside navigation arrows, touch swipe on mobile.
* Standard card layout, compatible with every standard theme.
* Discounted products carry a colored **badge** with percentage and custom text.
* Optional: **"Add to cart" button** visible right away — even for variant products (toggled in configuration).

## What happens when a customer clicks a slider product?

{% stepper %}
{% step %}

### On adding to the basket

The configured discount is deducted automatically — as a dedicated discount line with the label you chose ("Name of discount in basket").
{% endstep %}

{% step %}

### In basket and checkout

Shopware shows the **reduced price per item** plus the **separate discount line**.
{% endstep %}

{% step %}

### Order receipt and confirmation email

They also carry the correct discount — no extra configuration needed.
{% endstep %}
{% endstepper %}

## Discounts are calculated correctly everywhere

The plugin uses Shopware's standard pricing engine. That means the following still work:

* **VAT** — gross and net prices stay consistent.
* **Tiered prices** — each tier gets its own discounted value.
* **Reference prices** (price per unit) — the displayed per-unit price is reduced as well.
* **List prices** — the original price stays visible as strikethrough next to the reduced price.

## Multilingual

Every visible text is translatable:

* **Rule name** and **basket discount label** are translated per language inside the rule.
* **Badge text** can be translated per language too.
* The **slider title** is controlled by Shopware snippets (`prems-cross-selling-checkout.slider-title`).

Anything left untranslated falls back to the system language automatically.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.premsoft.de/en/plugins/cross-selling-for-cart-and-checkout/storefront-integration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.