Review Drawer for Hyvä

Moves product reviews into a slide-out drawer that opens from the rating stars. Reviews stay one click away and the product page gets its length back.

In stock

SKU
catalog-review-drawer
$14.99

Version 1.0.2 released 2026-09-14

  • Hyvä 1.3.0 – 1.5.2
  • Mage-OS 3.0.0 – 3.5.0
  • Magento 2.4.6 – 2.4.9
  • PHP 8.2+
composer require mgwalk/catalog-review-drawer

Review Drawer for Hyvä moves your product reviews (the review list and the Write a Review form) into a slide-out drawer that opens from the rating stars. Reviews stay one click away, and the product page gets its length back.

The problem it solves

On a stock Hyvä product page, reviews and the review form are stacked at the bottom of the page. On a product with plenty of reviews that block can be longer than everything above it. The stars at the top link to anchors far below, and a product with no reviews shows five empty stars, which reads as a zero rating. Review Drawer keeps the social proof and drops the scroll.

Key features

  • The stars are the trigger: clicking the rating summary slides in a full-height drawer, with no extra button to find.
  • Two tabs: Reviews and Write a Review. Shoppers read and post without leaving the page or losing their place.
  • A better empty state: a product with no reviews shows a single outline star and "Be the first to review this product", which opens the drawer on the form.
  • Moved, not copied: the drawer renders Magento's own review list and form blocks, so pagination, validation and reCAPTCHA keep working.
  • Deep links still work: URLs ending in #customer-review-list or #review-form open the drawer on the matching tab.
  • Left or right: choose the edge it slides from. Corner rounding follows the side and is correct in right-to-left layouts.
  • Inert until enabled: with the setting off, the product page is exactly what it would be without the extension.

Why Hyvä-native matters

The drawer is a native <dialog> driven by one small Alpine.js component. There is no jQuery, no Knockout, no RequireJS and no extra JavaScript bundle. Because it is a modal dialog, the browser handles focus, the backdrop and the Escape key for you. Its structural CSS (size, side anchoring, scrolling) is scoped to the drawer and ships with it, so the drawer is correctly sized before any theme rebuild. Cosmetic details use standard Hyvä Tailwind utilities. It adds no new script or connect sources to your Content Security Policy.

Admin configuration

  • Stores > Configuration > Mgwalk > Review Drawer > General: Enable Review Drawer (off by default) and Drawer Side (right or left). Both are store-view scoped.
  • Appearance: Title Size, Accent Colour, Corner Radius and Backdrop Opacity. Leave any of them empty and the drawer uses your theme's own values. Invalid values are dropped, never half-applied.

Compatibility

PlatformTested range (version 1.0.2)
Magento Open Source2.4.6 – 2.4.9
Mage-OS3.0.0 – 3.5.0
Hyvä Theme1.3.0 – 1.5.2
PHP8.2 or newer

It requires Magento's core Magento_Review module, which the drawer relocates rather than replaces. Per-release ranges are on the Compatibility & Versions tab.

Installation

Install through our private Composer repository. Your repository entry, auth.json credentials and composer require line are on your My Extensions page after purchase.

  1. composer config repositories.mgwalk composer https://magento.zip/composer/
  2. composer config http-basic.magento.zip you@example.com <your-composer-token>
  3. composer require mgwalk/catalog-review-drawer
  4. bin/magento setup:upgrade, then setup:di:compile and setup:static-content:deploy in production mode
  5. Set Enable Review Drawer to Yes.

The Documentation tab has the full steps.

Licensing & updates

This is a perpetual licence for one production domain. Updates arrive through Composer for the updates window attached to your licence, which is shown on My Extensions. Development and staging hosts never use a seat, and one master key validates every Mgwalk extension you own. Licensing never gates the drawer: an expired key or an unreachable licence server only shows a reminder in admin.

FAQ

Does it change category pages or product lists?

No. Only the full rating summary on the product page opens the drawer. The compact stars on category pages, product lists and widgets are left as Hyvä renders them.

Will it conflict with my child theme?

The new rating summary is bound from inside the extension, so you need no theme override. If your theme already overrides the product page's review blocks, test on staging. The drawer needs Magento's standard review_list and review_form blocks to relocate.

Is SEO affected?

The review list and form are still rendered server-side in the page HTML, inside the dialog. They are moved, not loaded on click.

How do I turn it off?

Set Enable Review Drawer to No. Reviews return to their normal position straight away, with nothing to clean up.

  • Stars open the drawer

    New in 1.0.1

    The rating summary on the product page is the trigger. One click slides in a full-height drawer, with no extra button to find.

  • Be the first to review

    New in 1.0.1

    Products with no reviews show one outline star and a prompt that opens the form, instead of five empty stars that read as a zero rating.

  • Reviews and Write a Review tabs

    Shoppers read and post without leaving the page or losing their scroll position.

  • Moved, not copied

    The drawer renders Magento's own review list and form blocks, so pagination, validation and reCAPTCHA keep working.

  • Deep links still work

    URLs ending in #customer-review-list or #review-form open the drawer on the matching tab.

  • Left or right, RTL-correct

    New in 1.0.2

    Choose the edge it slides from. Only the outer edge is rounded, and that follows the side, including in right-to-left layouts.

  • Theme-matched appearance

    Title size, accent colour, corner radius and backdrop opacity from admin. Leave them empty to inherit your theme.

  • Inert until enabled

    Off by default. With the setting off, the product page is byte-for-byte what it would be without the extension.

No features match that search.

Installation

You need your Composer token and master licence key. Both are on My Extensions in your account. Each one is shown once when you generate it, so copy it then.

1. Add the repository and credentials

composer config repositories.mgwalk composer https://magento.zip/composer/
composer config http-basic.magento.zip you@example.com <your-composer-token>

The password is the credential. The username can be your account email. The same values can go in auth.json under "http-basic" → "magento.zip".

2. Require the package

composer require mgwalk/catalog-review-drawer

This also pulls in mgwalk/license-client, which every Mgwalk extension shares.

3. Enable and deploy

bin/magento module:enable MgwalkCatalog_ReviewDrawer
bin/magento setup:upgrade
# production mode only:
bin/magento setup:di:compile
bin/magento setup:static-content:deploy
bin/magento cache:flush

4. Enter your licence key

Stores > Configuration > Mgwalk > Mgwalk Extensions > License > License Key. One master key covers every Mgwalk extension on the store.

5. Switch it on

Stores > Configuration > Mgwalk > Review Drawer: set Enable Review Drawer to Yes, pick a Drawer Side, save, and flush the full-page cache.

Optional: Tailwind rebuild

The drawer is fully usable without a rebuild, because its structural CSS ships inline. To pick up the extension's Appearance styling in your theme build, run npx hyva-sources && npm run build in your theme's web/tailwind and redeploy static content.

Configuration

Stores > Configuration > Mgwalk > Review Drawer. Every field can be set per store view.

FieldDefaultNotes
Enable Review DrawerNoWhen No, the extension adds nothing to the page: no drawer markup and no layout change.
Drawer SideRightThe screen edge the drawer slides in from.
Title Size(theme text-3xl)A CSS length, e.g. 2rem.
Accent Colour(theme primary)Hex or a CSS colour function, e.g. #1f5eff or oklch(0.6 0.2 250).
Corner Radius(theme large radius)A CSS length. Only the outer edge is rounded; the edge against the window stays square.
Backdrop Opacity0.5A number from 0 to 1.

Appearance values are emitted as CSS custom properties (--mgwalk-rd-title-size, --mgwalk-rd-accent, --mgwalk-rd-radius, --mgwalk-rd-backdrop) on the .mgwalk-review-drawer dialog. Values that fail validation are not emitted.

Opening the drawer from your own code

Anything on the product page can open it by dispatching a window event:

window.dispatchEvent(new CustomEvent('open-review-drawer', { detail: { tab: 'form' } }));

Use tab: 'reviews' or tab: 'form'.

Licensing & updates

  • Licence: perpetual, one production domain. Updates are delivered through Composer for the updates window attached to your licence, shown on My Extensions.
  • Development and staging are free: localhost, *.test, *.ddev.site, staging.* and private IP addresses never consume a seat.
  • One key for everything: the master licence key from My Extensions validates every Mgwalk extension you own.
  • After the updates window: your installed version keeps working. My Extensions shows the newest version you are entitled to as a ready-made composer require line.
  • Fail-soft: licence status is refreshed by a daily cron job, never on a shopper's page load. Problems show a low-severity admin notice. The drawer keeps working.

Troubleshooting & removal

The drawer does not appear

  • Check that Enable Review Drawer is Yes for the store view you are looking at, then flush the full-page cache.
  • Product reviews must be enabled in Magento (Stores > Configuration > Catalog > Catalog > Product Reviews).
  • If your theme removes or renames the review_list / review_form blocks, there is nothing for the drawer to relocate.

Clicking the stars scrolls instead of opening the drawer

Another module or theme is overriding the product-page rating summary. The drawer binds its own template for the full-view summary through Magento\Catalog\Block\Product\ReviewRendererInterface. Check bin/magento dev:di:info for a competing preference.

Styling looks plain

Rebuild your theme's Tailwind (see Installation) to include the extension's cosmetic classes. Size, position and scrolling work without it.

Removing the extension

Set Enable Review Drawer to No for an instant, reversible switch-off. For full removal, run bin/magento module:disable MgwalkCatalog_ReviewDrawer or composer remove mgwalk/catalog-review-drawer, then setup:upgrade.

Platform Min Max
Magento 2.4.6 2.4.9
Mage-OS 3.0.0 3.5.0
Hyvä 1.3.0 1.5.2
PHP 8.2 —

Composer: mgwalk/catalog-review-drawer:1.0.2

Platform Min Max
Magento 2.4.6 2.4.9
Mage-OS 3.0.0 3.5.0
Hyvä 1.3.0 1.5.2
PHP 8.2 —

Composer: mgwalk/catalog-review-drawer:1.0.1

Platform Min Max
Magento 2.4.6 2.4.8
Mage-OS 3.0.0 3.2.0
Hyvä 1.3.0 1.5.0
PHP 8.2 —

Composer: mgwalk/catalog-review-drawer:1.0.0

Installation requires an active Composer license for this extension.

1.0.2 2026-09-14

Fixed
  • The drawer panel now rounds only its outer edge. It previously inherited a 1rem corner radius on all four corners from the theme, so the edge pinned flush against the side of the window curved away from nothing.
Changed
  • The rounding follows the configured drawer side and is correct in right-to-left layouts. No configuration change is needed.

1.0.1 2026-09-13

Added
  • The PDP rating summary (the stars) now opens the drawer.
Fixed
  • Previously the stars linked to #customer-review-list / #review-form, anchors pointing at blocks this extension moves into the dialog, so clicking them did nothing; the separate "Reviews & Ratings" trigger button never rendered at all.
Changed
  • A product with no reviews shows "Be the first to review this product" and opens the Write a Review tab, instead of five empty stars that read as a zero-star rating.
  • Category and product-list stars are unchanged.
Removed
  • The stars are now the opener and that redundant button is removed.

1.0.0 2026-08-01

Added
  • Initial release

No changelog entries match that search.

Reviews

Customer Reviews

Quality
Value
Price
TEST - Works on a stock Hyva child theme
Review by
TEST REVIEW - not a real customer. Dropped it onto a stock Hyva child theme with no template overrides and it picked up the existing review blocks without any changes. The left/right setting is a nice touch.
Quality
Value
Price
TEST - Exactly what the PDP needed
Review by
TEST REVIEW - not a real customer. The drawer keeps the reviews out of the way until someone wants them, and the stars opening it is the obvious thing to click. Install was a single composer require.

2 Item(s)

Write Your Own Review
You're reviewing: Review Drawer for Hyvä
Your Rating:
Quality
Value
Price
loader
Loading...

You submitted your review for moderation.