Available right now
Free
permanently, no running costs
You buy the licence directly from us and get an invoice from us. Install by upload in the admin without SSH, updates through our licensing platform, support straight from the developer.
Read More Manual.
How to collapse long product descriptions elegantly - with a soft fade, freely chosen height and an accessible button.
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.
Through the store or directly from us.
Two routes, the same feature set - pick whichever suits your setup.
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.