Client tasks

What clients asked for, and how each task was solved.

ThemeIntermediateSample

Free shipping progress bar in the cart

What the client asked: Customers leave the cart before they reach free shipping. Show them how much more they need to spend to get it.
How I solved it: I added a progress bar to the cart drawer and the cart page. The free shipping amount is a theme setting, so the client can change it without code.

Liquid
JavaScript
Cart Ajax API
Theme settings

4 hoursRelated lesson Cart: slide cart, Cart Ajax API, notes, upsell and free shipping bar

ThemeIntermediateSample

Size chart popup on product pages

What the client asked: Shoppers keep emailing to ask about sizes. Add a size chart to product pages. Some products need a different chart.
How I solved it: I created a product metafield called custom.size_chart. Its type is page reference, so each chart is a normal store page the client can edit.

Liquid
Metafields
Theme blocks
HTML dialog

3 hoursRelated lesson Product page: variants, media, selling plans, size chart and tabs

SpeedAdvancedSample

Faster home page: fix a slow hero image

What the client asked: The home page feels slow on phones. Lighthouse shows a poor Largest Contentful Paint (LCP) score.
How I solved it: The hero image was the LCP element. It was a CSS background image with lazy loading, so the browser found it late.

Liquid
image_tag
Lighthouse
Chrome DevTools

2 hoursRelated lesson Speed and Lighthouse