Wonpa docs

Appearance

Performance and accessibility ​

Wonpa is built to load fast and to work for every buyer, including those using a keyboard or a screen reader. Most of this is automatic. A few settings let you tune it.

What the theme handles ​

Images below the fold load lazily, with a placeholder holding their space so the page doesn't jump as they arrive. Two surfaces fetch their contents after the page loads and show a shimmering skeleton while they wait: Product recommendations and predictive search results. The main hero image loads eagerly and at high priority, since it's usually the first thing a buyer sees.

Motion respects the visitor. When a browser is set to reduce motion, transitions and animations turn off automatically — you don't have to do anything.

Keyboard support is built in, and how much each surface adds on top of normal tabbing varies:

  • Quick order search has the fullest support. Arrow keys move through the suggestion list, Enter picks the highlighted result, and Escape closes it.
  • Size matrix quantity cells respond to the up and down arrows, stepping by the product's case increment.
  • Menus close on Escape. Opening and moving between them uses Tab and Enter, like any native disclosure.
  • Facets are standard checkboxes and links, so they work with Tab and Space. There are no arrow-key shortcuts.

Every page ships with a single H1 heading and a heading order a screen reader can follow.

What you control ​

A few choices affect speed and motion.

  • Image ratio on product cards crops images to a uniform frame; on the product gallery it sets the frame's shape and fits the photo inside it. Upload reasonably sized files; the theme handles the rest. See Image ratios and cropping.
  • Apps add weight. Each app you install ships its own scripts. Remove apps you no longer use.
  • Theme settings → Layout → Enable animations turns motion on or off across the whole storefront. Turning it off disables all transitions and animations, matching the reduced-motion behavior above.

Note

Motion is always off for visitors who prefer reduced motion, whether or not Enable animations is on. The setting is for turning motion off globally by choice.