PromoDrawer™

Speed and your storefront

What PromoDrawer loads, when it loads it, and what it never does.

Apps are the usual reason a fast theme becomes a slow store. Here is what this one costs, and how that’s kept from growing.

What loads

A small script and a stylesheet, both loaded after your page so neither holds it up. No jQuery, no carousel library, no icon font.

Everything else loads only when a drawer needs it:

  • Each card type is its own small file, fetched only by a drawer that has that card. A drawer of announcements and images loads no countdown or product code.
  • A font you chose from the 50 comes from Shopify’s servers, only on your store, and only the styles your words use. With your theme’s fonts, which is the default, nothing extra loads.
  • Social icons load only with a Follow card.
  • Video loads only when it’s needed: a looping video starts once the drawer is open, and with Big play button nothing from YouTube or Vimeo loads until a shopper taps.

If no drawer fits the page, nothing loads at all. Not hidden: absent.

Limits that can’t creep

The sizes are checked on every build, and a build that goes over doesn’t ship: 20KB gzipped for the main script, 10KB for the stylesheet, 6KB for each card type’s file. A limit nobody enforces quietly doubles over a year, which is how apps earn their reputation.

What it never does

  • Never calls our servers to show a drawer. Your drawers are saved to your own store and read by your theme as the page is built, so our uptime can’t affect your storefront.
  • Never shifts your layout. The button and drawer sit over the page rather than pushing content around.
  • Never covers the page on its own. The drawer opens when a shopper taps the button, and not before.
  • Never sets a cookie. A shopper who hides the button is remembered in their own browser, with no identifier, for 30 days.

It can’t break your theme’s styling

The drawer draws itself in its own sealed-off part of the page (a shadow root). Your theme’s CSS can’t reach in, and the drawer’s CSS can’t leak out. That’s the usual failure of widgets built with ordinary class names on themes they’ve never seen.

What does cross over is your fonts, deliberately, so the drawer reads as part of your store.

Accessibility

On every plan, and never a paid feature:

  • Works by keyboard, with a focus ring that’s always visible.
  • Focus moves into the drawer when it opens, stays inside while it’s open (except the Floating layout, which doesn’t cover the page), and returns to the button when it closes. Escape closes it.
  • Real buttons and links, so screen readers announce them as what they are.
  • Respects a shopper’s reduced-motion setting.
  • Alt text on images is required.