Skip to main content

Performance and accessibility

Boudoir is built to load quickly and work for every visitor. The points below also map to the Shopify Theme Store requirements for speed and accessibility.

Fast media​

  • Images are responsive and lazy-loaded. The theme requests an image size that suits each screen and loads images as they scroll into view. The one exception is the first product image, which loads eagerly because it is the largest element on the page.
  • Background videos play only while they are on screen. The theme watches each video with an intersection observer, starts it when it enters the viewport, and pauses it when it scrolls away or when the browser tab is hidden. This saves battery and data and keeps scrolling smooth.
  • Background videos are muted and play inline, so they autoplay reliably on mobile, and each one has a play and pause control.

Motion preferences​

The theme follows the operating system "reduce motion" setting. When a visitor asks for less motion, section animations, the hover image preview on product cards, and background video autoplay are all switched off.

Accessibility​

  • The product gallery announces the current image to screen readers, and the thumbnails are real buttons you can reach with the keyboard.
  • Color and image swatches, the navigation menus, and the slide-out cart are all keyboard accessible.
  • Decorative images use empty alt text, and meaningful images carry the alt text you set in the admin.

Built for mobile and iOS​

  • Layout uses dynamic viewport units and safe-area insets, so sections, drawers, and sticky bars line up correctly around the iPhone notch, the home indicator, and Safari's address bar.
  • The theme includes specific fixes for recent versions of iOS Safari, including its collapsing bottom toolbar, so the sticky hero and the header stay steady while the page scrolls.