# Collapse the product description in Shopware: setup manual

> Manual for Read More for Shopware: installation, setting height and button style, accessibility and FAQ about the collapsible product description.

Quelle / Source: https://stoneandwater.online/en/manual-read-more.html

# Read More Manual.

How to collapse long product descriptions elegantly - with a soft fade, freely chosen height and an accessible button.
[To the plugin: Read More - Description](https://stoneandwater.online/en/read-more.html)

#### Contents

/

## System requirements

Shopware 6.7; 6.6 works as well. The storefront theme has to inherit the Twig block `component_product_description_content_text` from `@Storefront/storefront/component/product/description.html.twig` - which the Shopware default theme and the usual forks do.

## Installation

bin/console plugin:refresh
bin/console plugin:install --activate StawReadMoreDirect
bin/console cache:clear
bin/console assets:install
bin/console theme:compile

The JavaScript ships as a pre-built bundle, so a storefront build is not required. The styles are merged into the theme during `theme:compile`.

## Opening the settings

In the admin under Extensions, My Extensions, StawReadMoreDirect, Configuration.

## All options at a glance

Plugin active Default: on
Master switch for the whole plugin.

Max. height Default: 320 px
Visible height of the description while collapsed.

Min. overshoot Default: 80 px
The button only appears once the text exceeds the maximum height by this amount.

Fade-out active Default: on
Soft gradient at the bottom edge of the collapsed area.

Fade height Default: 80 px
Height of the gradient.

Fade colour Default: #ffffff
End colour of the gradient; should match the page background.

Button colour Default: #4f46e5
Accent colour for the toggle.

Button style Default: link
Text link, outline or solid.

Mobile only Default: off
Collapse only below 768 pixels width.

Remember state Default: off
Remembers per session whether the text was expanded.

## Height and trigger threshold

Two values work together. The maximum height decides how much text stays visible. The minimum overshoot prevents the button from appearing for texts that are only marginally longer.

**Example:** With 320 pixels height and an 80 pixel threshold, collapsing starts at a text height of 400 pixels. A 350 pixel text stays fully visible instead of showing a button for 30 pixels.

## Fade-out

The gradient at the bottom signals that the text continues. The fade colour matters: it has to match the background at that point, otherwise you get a visible edge. On a coloured or dark theme, adjust it accordingly.

## Button styles

link
Plain text link in the accent colour, the most discreet option.

outline
Outlined button in the accent colour.

solid
Filled button in the accent colour.

## Mobile only

With this option, collapsing only applies below 768 pixels width. On desktop the description stays fully visible. Useful when the space problem is mainly on phones.

## Remember state

Optionally the expanded state is stored in `sessionStorage`. On the next product in the same session the text stays open. Closing the browser resets it.

## Why this is SEO-safe

The text is not removed from the document; it is hidden with the CSS property `max-height`. Search engines therefore see the full product description.

**The difference matters:** Solutions that load text via JavaScript or remove it from the DOM lose exactly that content for indexing. Here it stays in place.

## Accessibility

The toggle reports its state via `aria-expanded`, works with the keyboard and has a visible focus ring. The description stays accessible without a mouse and with a screen reader.

## Theming via CSS variables

Four variables are available for fine tuning in your theme:

--staw-rm-max-height
--staw-rm-fade-height
--staw-rm-fade-color
--staw-rm-button-color

## How it works

The plugin overrides the Twig block `component_product_description_content_text`. A PHP subscriber hooks into `ProductPageLoadedEvent` and passes the configuration through as the page extension `stawReadMore`. In the storefront a pre-built JavaScript bundle registers through the Shopware plugin manager on elements carrying `data-staw-read-more="true"`.

The height is measured again after images have loaded so it does not come out too small. A ResizeObserver covers the case where the description initially sits in a closed tab or accordion and therefore has no measurable height.

**About the right Twig file:** Shopware contains two files named `description.html.twig`. The one under `page/product-detail/` has been deprecated since 6.6.1.0 and is no longer rendered in 6.7. The active one sits under `component/product/`, recognisable by the block names starting with `component_`.

## Troubleshooting

### Nothing ever collapses

Check whether the text actually exceeds the maximum height plus the threshold. With 320 plus 80 pixels, nothing happens below a text height of 400 pixels - by design.

### The gradient shows a visible edge

The fade colour does not match the page background. On coloured or dark themes it has to be adjusted.

### Nothing changes after installation

Usually `theme:compile` or clearing the cache is missing. Also check that your theme inherits the Twig block named above.

### The height is wrong on products with many images

The plugin re-measures after images load. If it stays wrong, the description usually sits in an area that is hidden on load - the ResizeObserver handles that as soon as it becomes visible.

## Support

We are happy to answer questions about setup or adapting the plugin to a custom theme. Get in touch via the contact page or write to info@stoneandwater.online.

## All settings

Every setting of the plugin with its default value and explanation, in the same order as in the administration. The texts come straight from the plugin (version 1.0.17).

### General

**Plugin active** Default: on
Switches the collapsing of long product descriptions in the shop on or off.

**Maximum height (px) when collapsed** Default: 320
Height in pixels to which a long description is collapsed. The button to expand appears below it.

**Minimum overflow (px)** Default: 80
By how many pixels the text must at least exceed the maximum height to be collapsed. With 320 and 80, collapsing only starts at 400 pixels, so no small remainder is hidden behind a button.

### Appearance

**Enable fade-out effect** Default: on
Lets the collapsed text fade out softly at the bottom instead of cutting it off hard.

**Fade-out gradient height (px)** Default: 80
Height of the gradient at the bottom of the collapsed text in pixels.

**Background color for fade** Default: #ffffff
Colour the gradient fades into. Should match the background of the description.

**Button color** Default: #4f46e5
Colour of the button to expand and collapse.

**Button style** Default: Text link
Look of the button: as a text link, outlined or filled.

**Button alignment** Default: Left
Alignment of the button: left, centre or right.

### Scope

**Include properties table in collapse** Default: on
Also collapses the properties table below the description.

**Additional CSS selectors to collapse** Default: empty
Further areas of the product page to collapse as well, as CSS selectors separated by commas.

**Active on mobile (< 768px)** Default: on
Collapsing on smartphones narrower than 768 pixels.

**Active on tablet (768-991px)** Default: on
Collapsing on tablets between 768 and 991 pixels wide.

**Active on desktop (>= 992px)** Default: on
Collapsing on large screens from 992 pixels wide.

**Remember state per session** Default: off
Remembers whether a customer expanded the description for the duration of the browser session.

## Through the store or *directly from us*.

Two routes, the same feature set - pick whichever suits your setup.
Directly from Stone & Water

### Available right now

Free
permanently, no running costs

Download the free Plugin Suite and upload it in the admin, no SSH needed. It installs and updates the plugin with one click. You buy the licence directly from us, with an invoice from us and support straight from the developer.
[Download Plugin Suite](https://stoneandwater.online/en/plugin-suite.html)[+49 2555 9997342](tel:+4925559997342)

Shopware Store

### In preparation

The plugin will be listed in the official Shopware Community Store. Installation and automatic updates then run through the plugin manager, billing through your Shopware account. We will link it here as soon as it is live.

Better product detail pages?

## Back to *Read More*.

Find every option on the product page. We are happy to help with setup and styling.
[To the product page](https://stoneandwater.online/en/read-more.html)[Request setup](https://stoneandwater.online/en/contact.html)