Performance, accessibility, SEO

This page says what the theme does by itself and what depends on your content and your apps.

Performance#

What the theme does#

• Images are served by Shopify in the size each screen needs, in a modern format where the browser supports it. Images below the first screen load as the visitor reaches them. The focal point you set on an image is kept in view when it is cropped.
• Videos load only when needed. A silent loop loads when it comes on screen and pauses when it leaves or when the browser tab is hidden. A YouTube or Vimeo video loads when the visitor presses play. Until then the page shows a poster image.
• 3D models load when the visitor asks for them.
• Fonts are served by Shopify with your store. The theme preloads the body font and shows text in a fallback font until the chosen font arrives, so text is never invisible.
• Scripts are written for this theme, without a general-purpose library. They load without blocking the page, and each one loads only on pages that use it.
• Page transitions: with Page transitions on under Theme settings > Motion, the theme prefetches the page a visitor is about to open.
• No layout jumps: the announcement bar and media reserve their space before they load.

What stays in your hands#

• Apps. Each app can add scripts to every page. Remove apps you no longer use and check that their app embeds are turned off.
• The first screen. Use one image or one short loop in the first section. Upload images at the size recommended under each image setting and keep video loops short.
• Popups and sections. A long home page with many video sections is heavier than a short one.
• Fonts. Three different font families cost more than one family in several weights.

To measure a page, use the speed report under Online Store › Themes in your Shopify admin, or run Lighthouse in Chrome on your home, collection and product pages.

Accessibility#

The theme is built to meet WCAG 2.1 level AA with its default settings.

What the theme does#

• Keyboard. Every control can be reached and used with the keyboard. A skip link at the top of each page jumps to the content. Focus is always visible as a 2 px outline.
• Panels and drawers. The cart, the menu drawer, search, filters, quick view and detail panels are dialogs. Escape closes them and focus returns to the control that opened them.
• Motion. Visitors whose device asks for reduced motion get plain fades or no movement. Nothing loops at rest. Anything that moves by itself, such as a slideshow, a marquee, a rotating announcement or a video loop, has a pause control.
• Forms. Every field has a label, and errors are written in text beside the field.
• Updates. Changes that happen without a page reload, such as a cart update or new filter results, are announced to screen readers.
• Targets. Controls are at least 24 px, and 44 px on touch screens.
• Structure. Sections have a Heading level setting so each page can have one main heading and an ordered outline.
• Facts behind a button. The gallery panel can repeat its content as text for screen readers with Repeat as text for screen readers.

What stays in your hands#

• Colors. If you change a color scheme, keep a contrast of at least 4.5:1 between text and its background. Check Secondary text in particular, and keep Sale color dark enough for white text.
• Alt text. Write alt text for product media and for the images you upload in sections. Decorative images can be left empty.
• Text on images. Use Overlay strength or the glass plate when text sits on a picture.
• Headings. Set Heading 1 on the section that opens a page, and only there.
• Videos with speech. Add captions. The Clip block of Creator videos has a Captions file setting.
• Apps. App blocks bring their own markup. Ask the app's developer about their accessibility.

SEO#

What the theme does#

• Titles and descriptions. The page title and meta description come from the search engine listing you edit on each product, collection, page and blog post in your Shopify admin.
• Canonical addresses are set on every page.
• Social sharing. Open Graph and X card tags are written for every page. The image is the product, collection or article image, or the social sharing image set under Online Store › Preferences.
• Structured data is added in JSON-LD:

• Languages and markets. Shopify adds the alternate language and country addresses for translated stores.
• Readable without scripts. Content, links, pagination and the product form are in the page's HTML, so search engines read them.

What stays in your hands#

• Write a title and a description for each product and collection in its search engine listing.
• Use one Heading 1 per page.
• Add FAQ structured data from one questions section or block per page, not several.
• State only true values under Delivery and returns: they are also sent to search engines in the product's structured data.
• Search engines decide whether to show rich results. Structured data makes a page eligible. It does not guarantee stars or FAQ results.