Hoppa till innehåll

Handelssystem

IMBODY

Kund · IMBODY · 9 min läsning

En filmisk webbutik och ett ordersystem för en smart träningsspegel: produktberättelse, demobokningar, showrooms och kassa i en plattform.

IMBODY

Problem

IMBODY skulle lansera en smart träningsspegel i premiumsegmentet i Sverige. Produkten behövde en webbplats som kunde sälja en dyr produkt online, boka demos på plats hos partnerbutiker och samtidigt skötas i vardagen av ett litet team utan utvecklare.

Vad vi byggde

Vi byggde en Laravel- och Filament-plattform med en scrollstyrd 3D-produktberättelse, varukorg och kassa med orderspårning, demoförfrågningar kopplade till showrooms samt redigerbara träningslägen, recensioner, vanliga frågor och videoguider. Hela webbplatsen finns på svenska och engelska.

Resultat

Ett system bär IMBODY från första besöket till levererad order. Innehåll, demobokningar och ordrar hanteras i en och samma admin, och nya kampanjer lanseras utan kodändringar.

Hela berättelsen

Background

IMBODY brings a smart fitness mirror to the Swedish market. On the wall it looks like a slim, elegant mirror. Switched on, it becomes a complete home gym with digital resistance, an on-screen personal trainer and a large library of guided sessions, all in a footprint that barely takes any floor space.

A product like this is not an impulse purchase. It is a premium device that people want to see, touch and try before they commit, and it is bought both by private customers furnishing a home gym and by businesses equipping offices, hotels and studios. That combination shaped everything about the project. IMBODY did not need a brochure website. It needed a sales platform that could tell the product story convincingly, take orders online, book people into physical showrooms for demos, handle business customers who want leasing and quotes, and give a small team full control over all of it without calling a developer.

The problem in detail

When we started, IMBODY faced the classic challenges of a premium hardware launch.

The product had to be understood before it could be sold. A smart mirror is unfamiliar. Visitors need to grasp what it does, how the resistance works, what the training modes are and how it fits in a room. Static photos and a spec list were not enough to carry that story.

There were several ways to buy, and each needed its own path. Private customers wanted to pay online, often in instalments. Some needed a fallback when the preferred payment method was unavailable. Business customers wanted a monthly leasing price and a proper quote rather than a checkout button.

Many buyers wanted a demo first. For a high-ticket device, an in-person demo at a partner showroom is often the step that turns interest into a purchase. Those requests had to reach the right showroom with enough detail to follow up.

After the sale, the work continued. Orders had to move through confirmation, invoicing, payment, shipping and delivery, with the customer informed at each step. Owners would need help with setup, training modes and occasional service.

A small team had to run everything. Content, campaigns, product details, reviews, FAQs, video guides and emails all change over time. If every change required a developer, the site would quickly fall behind the business.

Goals

We agreed on a clear set of goals:

  • Tell the product story in a way that feels as premium as the product, on any device.
  • Support every real buying path: online checkout for private customers, a backup payment option, and leasing and quotes for businesses.
  • Connect demo requests directly to showrooms so that no interested buyer gets lost.
  • Track every order through its whole lifecycle, with the customer kept informed automatically.
  • Give the team one admin where they can change content, run campaigns and manage orders themselves.
  • Measure marketing properly, so that campaigns can be judged on real purchases and leads.

What we built

A cinematic product story

The homepage is built around a scroll-driven 3D product story. As visitors scroll, the mirror is shown from different angles and the key ideas are revealed step by step: what the device is, how digital resistance replaces a rack of weights, what an on-screen trainer adds and how little space it needs. We built this with Three.js for the 3D scene and GSAP for the scroll choreography, with careful attention to loading so that the experience stays smooth on phones and does not hold up the rest of the page.

Every step of that story is content, not code. The team edits the story steps, training modes, video guides, testimonials and FAQs in the admin, so the narrative can change with each campaign. The whole site runs in Swedish and English.

A storefront with real checkout

Products, bundles and accessories are managed in the admin, and customers move through a cart and checkout built for this kind of purchase. For private customers, checkout runs through Klarna, which offers the payment and instalment options Swedish buyers expect. If Klarna is unavailable, the shop can fall back to an invoice from IMBODY, and the admin shows which options checkout is offering right now, so the team is never surprised.

Business customers see a leasing price example, with a monthly amount excluding VAT and a term, instead of a consumer checkout. From there they can request a quote, which lands in the admin alongside other leads.

Orders that move through a clear lifecycle

Every order moves through defined states: pending, confirmed, invoiced, paid, shipped and delivered, or cancelled. Each change is recorded as an event on the order, so the team always has a timeline of what happened and when, and customers receive emails as their order progresses. The admin dashboard shows new orders waiting for confirmation, sales for the month with a chart of the last two weeks, unpaid invoices and the current review score, so the state of the shop is visible the moment someone signs in.

Demo bookings tied to showrooms

Showrooms are managed in the admin, and visitors can request a demo at the one that suits them. Each request carries the showroom, the visitor's details and their preferred time, and appears in the admin as a lead to follow up. For a premium device, this path from curiosity to a hands-on demo is often the most valuable part of the site, so it is treated with the same care as checkout.

Support after the sale

Owners can find video guides and training-mode descriptions on the site, and when something needs attention they can open a service ticket that the team manages in the admin. Reviews are collected and moderated before they are published, so social proof on the site stays genuine.

Content and marketing in the team's hands

The admin is built with Filament and organised around how the team actually works. Beyond products and orders, there are dedicated pages for the homepage, the shop settings, payments and transactional emails. Email texts can be edited, reset to sensible defaults and sent as a test to yourself before they go out to customers.

Instagram is connected directly. Posts and reels sync automatically every hour, reels can be downloaded so they play inline on the site, and the team controls how many posts are kept. The connection page explains step by step how to create and refresh the access token, so the integration does not depend on a developer.

Measurement that follows the money

Marketing is only as good as its measurement, so tracking was built in from the start. The Google tag sends analytics and Google Ads conversions for both purchases and leads such as demo and quote requests. The Meta Pixel runs alongside the Conversions API, which sends server-side events that survive ad blockers and browser restrictions. Each integration has a test mode and shows its last event and last error in the admin, so the team can confirm that tracking works before a campaign starts.

Built-in SEO and AI assistance

The platform includes an SEO audit that checks pages for common problems and a sitemap that stays up to date as content changes. An OpenAI integration assists with content and SEO fixes inside the admin, with a daily request limit and a usage view so costs stay predictable.

Technical approach

IMBODY runs on Laravel with Filament for the admin and Tailwind CSS for the interface. Three.js and GSAP power the 3D story on the homepage. Payments are handled through a dedicated Klarna integration that builds the order payload, creates the payment and keeps the order state in sync. Email, Instagram, Google and Meta are each wrapped in their own service, so an outage or a change in one integration does not ripple through the rest of the platform.

Access to the admin is controlled with roles and permissions, down to individual dashboard widgets, so a team member who manages content does not need to see financial figures. Scheduled tasks handle recurring work such as the Instagram sync, and caching keeps the public pages fast even with rich media on them.

How we worked

The project was delivered as a focused build with short feedback loops. We started with the parts that carry the most commercial weight, the product story, checkout and demo booking, and then layered on the order lifecycle, business customer flows, marketing integrations and the admin tools that let the team work independently.

At every step we asked the same question: can the IMBODY team do this without us? That question is why story steps, training modes, emails, payment options and integrations are all configurable in the admin, and why each integration shows its own status and test tools.

Results

IMBODY now has one platform that carries a customer from the first visit to a delivered order:

  • Visitors understand the product through a 3D story that matches the premium feel of the device.
  • Private customers can buy online with Klarna, with an invoice fallback, while business customers get leasing prices and quotes.
  • Demo requests reach the right showroom with the details needed to follow up.
  • Every order has a clear status and history, and customers are kept informed automatically.
  • The team runs content, campaigns, emails, reviews and integrations from a single admin.
  • Marketing is measured on real purchases and leads, on both Google and Meta.

New campaigns ship without code changes, which matters more for a launch than any single feature. The business can change its story, its offers and its channels as quickly as it learns what works.

What comes next

With the foundation in place, further work can focus on growth rather than infrastructure: refining the product story as customer questions come in, expanding the showroom network, and using the order and lead data the platform already collects to sharpen campaigns. The site is maintained under ongoing care, so improvements ship continuously instead of waiting for a redesign.

Stack & fokus

  • Laravel
  • Filament
  • Three.js
  • GSAP
  • Tailwind CSS