Skip to main content

Companion app

If your product has a companion app, this section puts it in the story. A phone mockup renders a live telemetry interface — battery, connection, ANC state — and a row of EQ presets that respond to clicks.
Companion app section

Companion app section with interactive device mockup


Settings

Copy

Store buttons

Device readout

ANC readout

The Point block

Each Point block is a feature bullet with an icon and text — one per capability of your app.

What actually moves

Nothing here is a static image. The mockup is alive.
The preset row is genuinely interactive. A shopper can click Bass Boost and watch the meter reshape. It costs almost nothing in performance and it makes the section feel like a product rather than a picture of a product.

Mobile behaviour

Below 1024px the device mockup is still rendered, but the drift and count-up animations are disabled along with the rest of the motion system. The presets remain clickable — they are CSS state changes, not animation.
Make sure the app store links point to your real listings. This section is usually placed directly under the buy box, and a dead store link at that point in the funnel is expensive.

Best practice

The point of the mockup is to demonstrate the interface. Use a real screenshot or a faithful render as the device screen, and let the telemetry readouts do the persuading.
A companion app section on a product without an app is noise. Hide the section entirely rather than filling it with placeholder copy.
“Bass Boost”, “Vocal Clarity”, “Deep Focus” — names that describe a listening outcome, not an EQ frequency. This is a product, not a mixing desk.

Comparison table

The spec-by-spec argument.

Bento features

The flexible feature grid.