Overview
A landing page written as one HTML file cannot be pasted into a Shopify theme: the colours are hex codes, the English is baked in and the script runs on page load. I converted one into native Online Store 2.0 sections on a Dawn-based theme on a development store, so a shop owner can edit them in the theme editor. The repo also holds a measured performance diagnosis of a public storefront, taken with Lighthouse's mobile preset.
Key Features
A sale hero with a countdown
- Colours come from the theme's colour schemes, so changing a theme colour re-themes the section.
- One absolute end time. A sale advertised to US, UK and Australian visitors cannot end by each visitor's own clock. The end comes from a collection date-time metafield or from a typed time plus a chosen zone, and the section prints the zone it was rendered in.
- A custom element. The countdown cleans up its timers when the editor re-renders or removes it, and impossible dates such as 31 February are refused.
A bundle block
- The saving is worked out from the real prices: the sum of the parts minus the bundle price, shown only when it is positive.
- The button is disabled while any listed part is sold out. This is a display guard. A bundle product is not stock-linked to its parts the way Shopify's Bundles app does it, and the README says so.
What I Tested
The countdown runs in Chromium with a controlled clock: 22 of 22 checks pass, and 15 of 15 planted defects are caught, among them timer leaks, an ignored zone offset and accepted impossible dates. The Liquid tests run the real section files through LiquidJS with Shopify's objects stubbed: 20 of 20 pass, and 16 of 16 planted defects are caught. A stand-in for Shopify's renderer is not Shopify's renderer, so the sections were also pushed to a development store and read in a real browser and the theme editor, with the record and screenshots in the repo. Shopify's own theme check reports 0 offenses on the sale sections.
What I Learned
A review caught a real mistake in my own data: tagging the bundle's parts into a 10 percent sale made the page say "You save" while the parts were cheaper than the bundle. The seed now keeps them out of any discounted collection. I also learned to write down what a test double cannot prove, then check those two things on the real store.
Tech Stack
Storefront: Liquid, JavaScript, Shopify CLI, Online Store 2.0 sections Testing: Playwright (Chromium), LiquidJS, planted-defect suites Performance: Lighthouse Hosting of the static copy: Cloudflare Pages