Performance and accessibility

Chassis is built to load quickly and to work with a keyboard and a screen reader. This page describes what the theme does for you, and what you should do with your images and content to keep the store fast and easy to use.

What the theme does

• It uses no external libraries or scripts. Every script and stylesheet is part of the theme.
• Scripts are loaded as modules.
• Images load lazily by default. A section can mark an image as a priority image, and the theme then loads it at once with high fetch priority, so the main content shows first.
• Icons come from the theme's own icon set, not from separate image files, so they stay sharp on every screen.
• Buttons, fields and links have visible focus outlines.
• Colors are set as color schemes. Each scheme pairs the text with its background, so you can check the contrast in Theme settings > Colors.
• Fit states are shown with a word and a color. A shopper who cannot see the color still reads "Fits", "Check" or "Does not fit".
• The layout works at phone width, with no sideways scrolling.

What you should do with images

1. Upload the largest clean version you have. Shopify resizes images for each screen. Start with at least 2048 pixels on the longest side.
2. Use the same background for a product group. A plain white or light background keeps the product visible on every card.
3. Crop each product image to the same frame. The Image ratio setting does the rest. Use "Square" for parts that are shown in a grid.
4. Keep file sizes small. Compress photos before you upload them. Avoid large PNG files for photos. Use PNG only for logos and images with transparent backgrounds.
5. Add alt text to every image. In the media editor, write a short description of the part, such as "Front brake pad set for Halden Carvo, box and two pads". Do not start with "image of".
6. Use a focal point for images with a person or a logo. Set it in the Files page of the admin, and the theme follows it.
7. Do not put text in product photos that repeats the title or the part number. Shoppers read the title on the page. Put product text in the description.

What you should do with content

• Write headings in order: one main heading per page, then subheadings.
• Write link text that says where the link goes. "View fitting guide" is better than "Click here".
• Keep the specification labels short and plain, so a screen reader reads them well.
• Use the Collapsible content block for long care instructions, so the page stays short.
• Write the promo tile heading and button label as complete phrases.

Testing

• Use the keyboard only, and move through the header, the vehicle selector, a product card and the cart. Each control must show a focus outline.
• Check the store with a screen reader on one page of each type: home page, collection, product and cart.
• Run a page speed test on the home page, the collection page and the product page after you publish. Check the largest image on each page.