How (and why) to add keyboard shortcuts to your Webflow site

While building this portfolio some months back, I thought it would be a nice touch to add the keyboard shortcut. After implementing it, I had a  “why didn’t I always do this?” moment. A tiny sprinkle of JavaScript, and suddenly the whole site felt more polished and thoughtful.

It’s the same thing you see in productivity tools — press ⌘K or Ctrl+K and something useful happens. That little interaction tells visitors, this site is alive, it understands me. For marketing teams and business owners, it’s one of the cheapest ways to add that feeling without a big design or dev sprint.

Why it’s worth it

• Feels like an app — visitors get a faster, smoother way to navigate or discover things.
• Low lift — literally one script tag; no major design changes needed.
• Memorable — people remember the small touches.
• Encourages exploration — you can open a contact form, search the site or go the login screen. It lets the user 'learn' how to use your site.

‍

A quick example

Here’s the simplest version I used for opening a popup with ⌘K / Ctrl+K:‍

document.addEventListener('keydown', event => {
  const isModifier = event.metaKey || event.ctrlKey;
  const isKKey = event.key.toLowerCase() === 'k';

  if (isModifier && isKKey) {
    event.preventDefault();

    let tl = gsap.timeline();

    tl.to('.popup_wrap', {
      pointerEvents: 'auto',
      opacity: 1
    }).fromTo('.popup_wrap h2', { scale: 0 }, { scale: 1 });
  }
});

‍


You can adapt the same pattern for:

• Esc to close a modal
• ? to open a keyboard shortcuts list
• A custom shortcut to open filters

A few tips from trying it

• Don’t trigger shortcuts while someone’s typing in a form.
• Always give a visual cue that the shortcut exists (like a small “⌘K” hint next to your nav search).
• Escape key should always close whatever you open.
• If you can, animate — even a small fade or scale makes the interaction feel smoother.
• Test it on both Mac and Windows so you’re not accidentally ignoring half your users.
• cmd / ctrl are already used for a lot of things. I'd recommend using opt / alt if you want lots of shortcuts

It’s not going to change your conversion rate overnight, but it does change how people feel using your site. And in a space where most sites feel the same, those small feelings add up.

‍