Performance & accessibility

Torquex is built to be fast and accessible out of the box, without bolting on third-party apps. This page explains how the theme achieves that — the architecture, the performance practices baked into its templates and assets, the accessibility patterns it uses, image best practices for merchants, and the browsers it supports. It is written so you (and a Shopify Theme Store reviewer) can verify each claim against the theme code.

Torquex is built on Online Store 2.0 with vanilla CSS and JavaScript. No third-party app is required for any built-in feature — including the automotive fitment selector, vehicle garage, spec tables, install badges, cart drawer, search, and quick view. Everything ships inside the theme.

Architecture: Online Store 2.0, app-free

Torquex uses the modern Online Store 2.0 model end to end:

JSON templates and sections everywhere. Every page is a JSON template made of sections you can add, remove, reorder, and hide in the theme editor. Sections expose a {% schema %} with presets, and blocks render their {{ block.shopify_attributes }} wrapper, so the theme is fully editable without code.
App blocks supported. Because the theme is Online Store 2.0, any Shopify app that provides app blocks can be placed into compatible sections — but nothing the theme advertises requires an app.
No external dependencies. The theme assets contain no CDN-hosted libraries, no npm packages, no JavaScript frameworks, and no CSS preprocessors. All scripts and styles are vanilla and served from your store. The only third-party network references in the theme are optional, merchant-chosen items: YouTube/Vimeo background or installation videos (loaded via standard embeds), social share links, and Shopify’s own cdn.shopify.com.

This matters for reviewers and merchants alike: there are no recurring app subscriptions to keep features working, and no third-party script that could break or slow your store.

Performance

Torquex follows a render-fast-first approach. The relevant logic lives in layout/theme.liquid, the assets/torquex-*.css/.js files, and individual sections.

Critical CSS inline, the rest non-blocking

The <head> inlines the critical CSS Torquex needs before first paint — the CSS variables generated from your Theme settings (page width, type scale, line height, colors, fonts) plus the color schemes and the skip-link rules — directly inside a <style> block. The larger stylesheets (torquex-base.css, torquex-layout.css, torquex-components.css) load through Shopify’s stylesheet_tag, with the base and component sheets marked for preload so they arrive early without blocking initial render.

JavaScript is deferred, framework-free, and conditional

All JavaScript in Torquex is vanilla and loaded with defer, so it never blocks the parser or first paint:

Core scripts (mega-menu, search, cart, quantity) are deferred site-wide.
Quick view JavaScript loads only when Enable quick view is turned on under Theme settings → Products.
Fitment and Recently viewed scripts load only on the product and collection templates. The Recently viewed section ships on the product template by default (where its script does the work); on the collection template the script is only pre-loaded, ready if you add the section there.

There is no client-side framework to download, parse, and hydrate — each component is a small, self-contained vanilla script.

Responsive, lazy-loaded images

Images use Shopify’s image_url + image_tag filters to generate responsive srcset/widths and sizes, so each device downloads an appropriately sized file rather than a single oversized image. For example, product cards request widths of 200,300,400,600,800,1200 with sizes tuned to the grid breakpoints, and they include intrinsic width/height so the browser can reserve space and avoid layout shift.

Loading strategy is chosen per context:

Below-the-fold imagery (product cards, secondary product images, in-page section images) uses loading="lazy" so it only downloads as the shopper scrolls toward it.
Above-the-fold hero imagery (the Hero banner and Hero slideshow first slide) uses loading="eager" with fetchpriority="high" so the largest contentful image starts downloading immediately. This is deliberate — eager-loading the hero improves perceived load time and Largest Contentful Paint, while everything else stays lazy.

Fonts: swap, subsetting, and a system option

Fonts come from the Shopify Fonts library and are emitted with font_face: font_display: 'swap', so text is visible immediately in a fallback face and never blocks rendering while the web font loads. Shopify serves font files already subset and woff2-compressed. When a chosen font is a system font, Torquex skips hosted-font loading entirely (no extra request and no fonts.shopifycdn.com preconnect). The body always declares a system fallback stack, so text renders even before any web font arrives.

You control the fonts under Theme settings → Typography: Heading font (default Bebas Neue), Body font (default Barlow), and a monospace font for technical text that is on by default (toggle Use monospace font for technical text; Azeret Mono is the default). Choosing system fonts there is the fastest configuration if absolute minimum requests are your priority.

Other front-end performance practices

Preconnect hints to cdn.shopify.com (always) and fonts.shopifycdn.com (only when a hosted font is in use) shorten the connection setup for the resources the page actually needs.
Progressive enhancement: the document starts with a no-js class that an inline script swaps to js, so core content is styled and usable even if scripts are slow or blocked.
Native HTML interactions (<details>/<summary>, <dialog>) mean accordions and modals work with minimal JavaScript.

Accessibility (WCAG 2.1 AA)

Torquex is built to WCAG 2.1 AA. Accessibility is structural in the theme, not an afterthought.

Semantic structure and landmarks

The layout uses real landmarks: a single <main id="main-content"> wraps page content, with the header, pop-ups, and footer rendered as their own section groups. Headings, lists, tables, and form controls use native semantic elements so assistive technology can navigate the page correctly. Document language and text direction are set on <html> (lang from the active locale, dir="rtl" for Arabic, Hebrew, Persian, and Urdu), so screen readers and the browser apply the right language and reading direction. RTL layout is fully supported.

The first focusable element in the <body> is a Skip to content link that jumps straight to #main-content (which is focusable via tabindex="-1"). It is visually hidden until focused, then slides into view; under prefers-reduced-motion: reduce the slide transition is removed. This lets keyboard and screen-reader users bypass the header navigation on every page.

Keyboard and focus management

Visible focus is guaranteed by a global :focus-visible outline (a 2px accent-colored outline with offset), so keyboard users can always see where they are.
Interactive components manage focus appropriately. Modals use the native <dialog> element (cart drawer, quick view, product lightbox, pop-ups, and more), which provides built-in focus trapping and Escape-to-close behavior.
Accordions — including the product tabs (Description, Specs, Fitment, Installation, Reviews) and collection filters — use native <details>/<summary>, so they are keyboard-operable with no custom JavaScript required.

ARIA where it adds meaning

Torquex applies ARIA only where native semantics need supplementing: aria-label on icon-only controls, aria-expanded/aria-controls on disclosure toggles (menus, the mega menu, drawers), aria-hidden on decorative icons, aria-current for the active state, and aria-live regions for dynamic updates such as cart changes. Visually hidden helper text (a standard clipped .visually-hidden utility) provides labels and announcements that are read aloud but not shown.

Reduced motion and the Animations setting

Motion is handled in two complementary layers, so a reviewer can confirm it is respected in both CSS and JS:

The prefers-reduced-motion: reduce media query is always honored. A global rule near-instantly collapses animation and transition durations, and disables smooth scrolling. Individual components (the slideshow, testimonials carousel, and mega menu) also check matchMedia('(prefers-reduced-motion: reduce)') in JavaScript and disable their motion accordingly. This happens regardless of any theme setting.
The Animations setting controls decorative motion only. Under Theme settings → Animations, the Enable animations toggle turns decorative effects on or off (for example the brand-strip marquee and hero reveal). As its own help text states, UI feedback such as loading spinners and the visitor’s reduced-motion preference are always respected — turning animations off never removes essential feedback, and turning them on never overrides a visitor who asked for reduced motion.

High-contrast / forced-colors mode

Torquex includes a forced-colors: active block so Windows High Contrast Mode and similar modes get sensible focus outlines (using the system Highlight color) and visible borders (using CanvasText), keeping controls distinguishable when the OS overrides the theme palette.

Color contrast

The default dark palette is chosen for contrast (text #f0f0f0 on background #0f0f0f, with the #ff7a1a accent for emphasis). Because you can recolor every scheme under Theme settings → Colors, contrast in your final store depends on the colors you choose.

Image best practices for merchants

The theme handles responsive sizing, lazy-loading, and layout-shift prevention for you. To get the most from it:

Formats. Upload high-quality JPG or PNG (or WebP). Shopify generates and serves optimized, correctly sized variants from your original via the image_url widths the theme requests — you do not need to pre-make multiple sizes.
Source size. Upload images large enough for the biggest variant the theme requests (heroes are served up to large widths; product images up to 1200px on cards and larger in the gallery), but avoid uploading enormous originals you never display.
Consistent product images. Use a consistent aspect ratio and background for product photos so collection grids look even. The product-card image ratio (square / portrait / landscape) is set under Theme settings → Products.
Alt text. Always write meaningful alternative text. Product and other Shopify-library images use the alt text you enter in the admin media editor; the product card falls back to the product title when an image has none. For the logo, set Logo alt text under Theme settings → Logo. Several sections (for example the Hero banner) also expose an image alt-text field in the section’s settings — fill it in for any decorative-or-not background image that conveys meaning. Leave alt text empty only for purely decorative images.

For more on configuring product imagery, see Product pages and Collection & search pages.

Browser support

Torquex targets current, evergreen browsers and uses progressive enhancement so it degrades gracefully:

Supported: the latest versions of Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari, on desktop and mobile. The theme is mobile-first and responsive across phone, tablet, and desktop breakpoints.
Progressive enhancement: built on standard HTML, vanilla CSS, and vanilla JS. With JavaScript unavailable, core content stays readable and shoppable (the no-js/js switch ensures content is not hidden behind scripts), and native elements like <details> and <dialog> provide interaction without custom code.
Internet Explorer is not supported, consistent with Shopify’s own platform support.

SEO and structured data

Performance and discoverability go together. Torquex’s <head> outputs the metadata search engines and social platforms expect:

A descriptive <title> and <meta name="description">, a <link rel="canonical">, and the standard Shopify {{ content_for_header }}.
Open Graph tags (including product price, currency, and availability on product pages) and Twitter Card tags (card, title, description, image) for rich link previews.
JSON-LD structured data: site-wide WebSite (with Sitelinks search) and Organization schema in the <head>, plus per-product Product schema rendered in the body by the product section (not in <head>). When you set custom.part_number, it populates the product’s sku in that structured data. See the Metafields reference for details.

Summary

Area	What Torquex does
Architecture	Online Store 2.0; JSON templates; sections/blocks editable in the theme editor; app blocks supported but no app required
Dependencies	Vanilla CSS/JS only; no frameworks, no CDN libraries, no render-blocking third-party assets
CSS	Critical CSS inlined in `<head>`; main stylesheets non-blocking with preload
JavaScript	All deferred; loaded conditionally (quick view, fitment, recently viewed)
Images	Responsive `srcset`/`sizes`; lazy below the fold; eager + high priority for the hero; width/height to prevent layout shift
Fonts	`font-display: swap`; Shopify-subset `woff2`; system-font option skips hosted loading
Accessibility	WCAG 2.1 AA; semantic landmarks; skip-to-content; visible focus; `<details>`/`<dialog>`; ARIA; forced-colors support
Motion	`prefers-reduced-motion` always honored (CSS + JS); Enable animations controls decorative motion only
Languages	`lang`/`dir` set per locale; RTL fully supported
Browsers	Latest Chrome, Firefox, Edge, Safari (desktop + mobile); progressive enhancement; IE not supported

Related: Theme settings · Troubleshooting · Torquex support replies within 12 hours.