shopify.com

First impression

Ten-second test. It passes on both widths, but the subhead and the brand do the work, not the headline. 'Be the next [AI all-star / household name / solo-preneur]' could sell a course or a bank. 'The world's best commerce platform' and a dominant white 'Start for free' answer what it is and what to do next. The very first frame catches the rotating word halfway through its swap: stray tick marks on desktop, and half-clipped 'for' on phone at 0s.

“A dark, cinematic commerce-platform page: a lifestyle-video hero with a rotating 'Be the next ___' headline and a white pill button, then dark sections that each show a real product UI (checkout, markets, an AI assistant, a terminal) before a closing stats block.”

The page described without its name. If this sentence could describe a hundred other sites, the design hasn't made a choice yet.

What's working

• Colour discipline: near-black teal-tinted surfaces, three grey levels, and white as the single action colour. The 'Start for free' pill is obvious in every view.
• Each section shows the actual product (the chat storefront, the order sheet with duties, the Sidekick prompt, the CLI) rather than icons in circles.
• One type family, Shopify-Inter, with a clear scale: 96px display, 56px section heads, 20px card titles, 16px body, all at a comfortable measure.
• The phone layout is designed rather than just stacked: full-width primary and secondary buttons sit above the fold, the nav collapses to one text CTA plus a menu, and nothing scrolls sideways.
• Reduced motion is honoured (74 animations drop to 7 or 8), CLS is 0, LCP is fast, one font file, one h1 and a clean heading order.

Findings, ranked

1. The rotating hero word is caught mid-swap on first paint

   Medium
   resting state

   Seen. Desktop first viewport at 0s: the second line reads ' ‘ ‘ all-star', with glyph fragments of the outgoing word left above it. Phone motion frame at 0s: the second line is a clipped 'for' floating alone. Only by 1.5s to 3s does a whole phrase ('big thing', 'household name') settle.

   Why it matters. Link previews, screenshots, slow connections and anyone who glances at the page see the broken frame, so the biggest type on the page looks like a rendering bug.

   Fix. Server-render the first phrase fully set ('Be the next household name') and hold it for at least 3s before the first swap. Use an opacity crossfade, or a slide clipped inside a fixed-height line box, so no outgoing glyphs show outside the line.

   Effort: hours

2. The headline is a pep talk and the product only arrives in the subhead

   Medium
   specificity

   Seen. Desktop and phone hero: the h1 cycles 'AI all-star / household name / solo-preneur / category creator'. 'Commerce' first appears in the 20px subhead 'The world's best commerce platform.'

   Why it matters. Recognition carries it for Shopify, but in the largest words on the page a visitor learns a mood and not an offer. The 'next ___' slot could just as well say what you'd be selling.

   Fix. Keep the rotation but anchor it to commerce, e.g. 'Sell like the next household name', or move the concrete promise into the h1 and let the rotation live in the subhead. Consider adding 'Free trial, no card' under the primary button.

   Effort: hours

3. Hero text legibility depends on which video clip is playing

   Medium
   contrast

   Seen. Desktop at 3s: a pale grey alley and white walls sit behind the 20px white subhead. Phone at 3s: a white kitchen and cabinets sit behind 'Be the next household name' and the subhead. At 0s and 6s the clips are dark and the text reads cleanly.

   Why it matters. Contrast on the one paragraph that says what Shopify is goes from comfortable to marginal every few seconds, which is worst for small screens in daylight.

   Fix. Add a fixed left-to-right scrim behind the text column (for example linear-gradient(90deg, rgba(2,9,10,.65) 0%, rgba(2,9,10,0) 60%) on desktop, and a bottom-weighted one on phone) so the type never depends on clip brightness.

   Effort: minutes

4. The scroll-lit 'Sell everywhere' statement sits mostly in grey at rest

   Medium
   hierarchy

   Seen. Phone, second section: a 6-line 36px paragraph where only the currently lit clause is white and the rest is mid-grey on near-black. Desktop shows the same pattern across two long lines.

   Why it matters. Scroll-scrubbed highlighting makes visitors read at the animation's pace, and anyone who stops scrolling sees a mostly dimmed statement. At 390 it uses a full screen to say one sentence.

   Fix. Lift the unlit state to the secondary text grey (#a1a1aa or brighter) so the line reads at rest. On phone, cut it to 'Sell everywhere people shop.' with the four channels as a 16px line beneath.

   Effort: hours

5. Possible empty gap where the Sidekick animation failed to load

   Medium
   robustness

   Seen. Desktop full page: a large empty dark-purple band of about 600px below the Sidekick cards and before 'Hyperdriven by AI'. The console logs 'Rive animation failed to load' and there are 10 failed requests.

   Why it matters. If that space belongs to the failed Rive asset, visitors whose asset fails get a hole in the page instead of a fallback. It may only be a reveal caught mid-way, but the console error says to check.

   Fix. Give the Rive canvas a static poster image fallback on loaderror, and collapse the container when no asset loads. Then confirm whether the gap is the Rive slot or scroll-reveal spacing.

   Effort: hours

6. Menu cards have no hover state

   Low
   affordance

   Seen. The measured nav-menu cards ('Get started fast', 'Switch to Shopify', 'World's best checkout', 'Sidekick') show no change on hover. Their fill is 1.2:1 to 1.3:1 against the panel, so the card edge barely shows.

   Why it matters. In a large dropdown, a hover tint is the cue that a whole card is clickable rather than just its title.

   Fix. Add a hover background one step lighter (for example #0c2326 on #051517) and/or a 1px #1e2c31 border on hover.

   Effort: minutes

Also noticed

• Hero video is a full-bleed loop behind the text. It pauses correctly under reduced motion, but the text needs a scrim regardless.
• Sidekick section brings in a saturated violet (#5433eb) field. It reads as a deliberate product zone, but it is the one place the restraint slips toward the purple-gradient look.
• Several lower sections (Sidekick cards, terminal mock) are probably scroll-reveals caught partway in the full-page capture. Verify with reduced motion on.
• 47 images have no width or height attributes. CLS is 0 so nobody feels it today, but it is fragile.
• Pure #000 on #fff appears on the white pill buttons. It is fine for buttons and intentional.
• The phone hero headline wraps to three lines on 'household name' and the subhead shifts down accordingly. Fix the line box height so the buttons don't jump between phrases.
• Headline at h2 and h3 levels share 56px on desktop, so heading levels don't map to visual levels (an a11y-only nit).
• 7.5 to 7.9MB transfer and over 200 requests. LCP is fast, so it isn't felt on broadband.

Template tells

• Rotating word in the hero headline
• Scroll-scrubbed grey-to-white highlighted statement
• Violet glow field behind the AI section

Suggested order of work

1. Add a fixed scrim behind the hero text column on both breakpoints. 30 minutes
   Hero text legibility depends on which video clip is playing
2. Render the first headline phrase statically, delay the first swap to 3s or later, and contain the transition inside a fixed line box. 2–3 hours
   The rotating hero word is caught mid-swap on first paint
3. Rewrite the h1 rotation so it carries 'sell' or 'commerce', and add the no-card reassurance under the primary button. 1 hour plus approvals
   The headline is a pep talk and the product only arrives in the subhead
4. Add a poster fallback for the Rive asset and confirm the Sidekick gap. 2 hours
   Possible empty gap where the Sidekick animation failed to load
5. Brighten the unlit state of the scroll-lit statement, shorten it on phone, and add hover fills to menu cards. 2 hours
   The scroll-lit 'Sell everywhere' statement sits mostly in grey at rest · Menu cards have no hover state

The numbers

Full page

Have a designer sign this, $20 Run your own site at secondlook.pageFree score in two minutes. The signed report is read and corrected by a designer, with anything the engine got wrong taken out.