Performance & accessibility

This page sets out what Lapels does about speed and accessibility, what depends on your own content, and which browsers the theme supports.

How a page is built

• Every page is built from sections. You add, remove, reorder, and hide them in the theme editor. The header, the footer, and the overlay panels are arranged the same way.
• Apps drop straight in. Any app that offers blocks can be added to the sections that accept them, and a Custom Liquid block is there for anything else you need to paste in.
• Everything documented here ships inside the theme. The cart drawer, search drawer, quick view, size chart, shop the look, hotspots, comparison table, countdown, and store locator are all built in. The star rating on a product card is the one exception. It reads a rating a review app has to write.

Speed

Lapels adds nothing to your store that it does not need. There is no framework behind it, no analytics of its own, and nothing fetched from another company’s servers while a shopper waits.

Each page loads only what is on it. A page with no video section carries none of the video styling. Two features are switched off entirely until you ask for them. Search suggestions load only when Suggest results as the visitor types is on under Theme settings → Search. Smooth scrolling loads only when Enable smooth scrolling is on under Theme settings → Motion. Turn either off and it costs your store nothing at all.

Images are sized for the device that asks for them. The theme requests a file that suits the space the image will fill, so a phone never downloads a desktop-sized photograph, and where a section offers a separate mobile image, phones get the phone crop. Space is reserved for every image before it arrives, so the page does not jump as it loads. Images below the fold wait until a shopper scrolls toward them. The first image on the page is loaded straight away, because that is usually what a speed test measures.

Video waits for a press. A video you host on Shopify shows its poster frame first and downloads nothing until a shopper presses play. A YouTube or Vimeo link shows the poster and a play control, and the provider’s player is only built when someone actually presses it. That keeps several hundred kilobytes, and the provider’s cookies, off every page load.

Fonts come from Shopify’s own font library and are served from your storefront. Text is readable immediately rather than sitting blank while a font arrives. Choose a system font for a role and the theme loads no font file for it at all.

Note

A theme sets the ceiling. Your store decides where under it you land. Your uploaded image sizes, the apps you install, the scripts in your checkout and header, third-party embeds, and the amount of content on a page all move a speed score independently of the theme. Test your own store rather than relying on a number quoted for a demo.

Accessibility

Lapels targets WCAG 2.1 AA. What follows is what the theme does. The section below it is what your content has to do.

Structure and headings

• One page heading per page. Sections that could carry it, such as the heroes and the slideshows, have a Use as the page heading checkbox that is off by default. So exactly one section on a template claims it, and heading levels never skip.
• Proper page regions. The header, the main content, and the footer are each marked as what they are, so a screen reader can jump between them. Lists, tables, and form controls are real ones rather than styled boxes.
• Language and reading direction are set from the language the shopper is browsing in, so assistive technology reads the right language and the right reading order. See Translations & internationalization.

The skip link

The first thing a keyboard reaches on every page is a Skip to content link that jumps past the navigation. It is invisible until focused, then appears. Its wording is a theme string, so it translates with everything else.

Keyboard and focus

• Visible focus on everything. Every control draws a clear ring when a keyboard reaches it, in a color that belongs to the active color scheme, so it stays visible on a light ground and on a dark one.
• Everything is reachable. The navigation, drop-downs, and mega menu panels all work from the keyboard, and Escape closes them.
• Panels behave like panels. The cart drawer, search drawer, quick view, image viewer, newsletter popup, and age gate keep focus inside themselves while open, close on Escape, and hand focus back to whatever opened them. While one is open, a screen reader cannot wander into the page behind it.
• Accordions work from the keyboard, on the product page, in the FAQ section, and in the filter panel.
• Carousels take focus, because a strip a keyboard user can scroll is a control, and it is ringed as one.

Images and alt text

• Alt text comes from the alt you write in Shopify’s media editor, for every image the theme renders.
• Decorative images are skipped by screen readers rather than read out as a filename.
• Where no alt text exists at all, the theme leaves the image silent rather than announcing something meaningless.
• The header logo takes your store name as its alt text, and the footer logo takes your Wordmark from Theme settings → Brand, falling back to your store name. Either way the link reads as where it goes, not as “logo”.

Forms

Every field in the theme carries a real label. That covers search, newsletter, contact, login, address, quantity, and the country and language pickers. An error message belongs to the field it is about rather than floating near it, so a screen reader announces it when the shopper reaches that field.

Motion

Motion is handled in two layers, and the visitor’s layer always wins.

• The visitor’s system preference is honored unconditionally. When someone has asked their device for reduced motion, animation shortens away, smooth scrolling switches off, background video holds on its poster, and scroll reveals never run. This happens whatever the theme is set to.
• The Motion setting is your own taste. Under Theme settings → Motion, Motion offers Full, Subtle, and None, alongside Reveal sections on scroll, Reveal stagger, Enable smooth scrolling, and Zoom images on hover. Full detail is on Motion.

Touch targets

Interactive targets are at least 24 × 24px, meeting WCAG 2.5.8. A color swatch on a product card is the smallest control the theme ships, and it sits exactly on that floor. Checkboxes expand their hit area to it, even where the drawn box is smaller. Controls that float over content, such as the scroll-to-top button, are considerably larger.

Color contrast

Every color scheme is yours to edit, so final contrast is a decision you make. What the theme does is give you a sane starting point, and stop the colors it derives for you from failing. The sale, success and error colors in each scheme are mixed against that scheme’s own text color. That keeps them readable on a dark ground, where a fixed color would disappear. The borders around form fields are held to a stronger level than the theme’s decorative hairlines, because a field edge has to be seen.

Focus rings are drawn so that Windows High Contrast Mode can repaint them rather than dropping them.

Caution

If you edit or add a color scheme, check contrast before publishing. Text should sit at 4.5:1 against its background, or 3:1 for large text. Buttons, borders, and icons should sit at 3:1. Check every scheme, not only the one on your home page. A pale accent that reads beautifully on ivory can fail outright on the same theme’s dark scheme.

What your content has to do

The theme handles image sizing, loading, and layout stability. These are the parts only you can get right:

• Write real alt text. Every product photo, collection image, and section image takes the alt you enter in the media editor. Leave it empty only where the image is genuinely decorative.
• Upload sensibly sized images. Upload something large enough to fill the biggest frame the image appears in, and stop there. A 6000px original does not make what shoppers see any sharper.
• Keep product photos consistent. One aspect ratio and one background across a collection is what makes a grid read as a grid. The card image ratio is set once under Product cards.
• Write headings in order. Section headings render at the level the theme assigns. Do not jump from a page title straight to a small sub-heading in rich text.
• Fill in link and button labels. “Read more” tells a screen-reader user nothing. Name the destination.

Browser support

• Supported: the latest versions of Chrome, Firefox, Edge, and Safari, on desktop and mobile. The theme is responsive from phone to desktop.
• Internet Explorer is not supported, consistent with Shopify’s own platform support.
• Nothing essential waits on a script. Some visitors block scripts, and on a slow connection an enhancement may not have arrived yet. The store stays readable and shoppable either way. The navigation is a plain list of links, the product gallery is a column of photographs, filters and sorting still apply, and products can still be added to the cart.

SEO and structured data

Every page carries a title, a description, the one address search engines should treat as the page’s real one, and the tags that social networks and messaging apps read to build a preview card. That includes the price and currency on a product page.

The image used in that preview resolves down a chain: the product’s featured photo, the article or collection image, the Sharing image you set under Theme settings → Brand, and finally your Shopify brand cover image. A page with no description of its own falls back through your store’s SEO description, your tagline, and your Shopify brand description rather than shipping empty.

Search engines are also given structured data where it is meaningful. That means product details on a product page, article details on a blog article, and questions and answers from the FAQ section when you use it. This is what lets a listing show a price, a rating, or an expandable question in search results. Nothing to configure.

Summary

Area	What Lapels does
Apps	App blocks and Custom Liquid are supported wherever you need them
Page weight	Nothing is loaded from another company’s servers. Each page carries only the sections on it. Search suggestions and smooth scrolling cost nothing when switched off
Images	Sized for the device, space reserved before they arrive, loaded as the shopper scrolls, separate mobile crops where a section offers one
Video	Poster first, and nothing downloaded until play is pressed. YouTube and Vimeo players are built only on click
Fonts	Shopify’s font library, served from your own store. System fonts load nothing
Accessibility	WCAG 2.1 AA target. One page heading, page regions, a skip link, visible focus everywhere, keyboard-operable panels and accordions, labeled fields with attached errors, and 24 × 24px targets
Motion	The visitor’s reduced-motion preference always wins. The Motion setting governs taste only
Languages	13 bundled translations plus English. Right-to-left is fully supported, and language and reading direction are set per visit
Browsers	Latest Chrome, Firefox, Edge and Safari. Nothing essential depends on scripts. IE is not supported

Related: Translations & internationalization · Motion · Colors · Lapels support replies within 12 hours.