Saint James Iced Tea.
- CLIENT
- Saint James Iced Tea
- INDUSTRY
- Food & Beverage / CPG
- WHAT WE DID
- Shopify theme design & development, product page design, store locator page, email/SMS capture
- PLATFORM
- Shopify (custom theme)
- YEAR
- 2025–2026
( THE BRIEF )
The challenge
Beverage brands live or die on shelf appeal and a quick "why us". Online, the website has to do the job of the shelf: grab attention in a second and explain the difference before the visitor scrolls away.
Saint James needed a Canadian storefront that felt as bright and refreshing as the product, communicated its health credentials (organic, low sugar, real ingredients) at a glance, built credibility through press, and served two audiences at once: people ready to buy online and people who want to find the tea in a store nearby.
The client
Saint James makes organic brewed iced tea with 0–4 grams of sugar and 0–25 calories, in fruit-forward black and green tea flavours such as Blood Orange & Hibiscus, Classic Mango, Passion Fruit & Peach, Pineapple & Mango and Red Raspberry. This Shopify beverage website case study covers the theme design and development of its Canadian store.
The Canadian site sells direct to consumers and points shoppers to retail partners including Loblaws, Real Canadian Superstore, Shoppers Drug Mart, Independent and No Frills.
What we built
We designed and developed a custom Shopify theme that puts the product's benefits and photography first. Shopify gives the brand a reliable direct-to-consumer checkout, while a dedicated store-locator page serves shoppers who would rather buy at a supermarket or pharmacy.
Each homepage section answers one question: what it is, why it is better, who says so and where to get it.
- 01 Benefit ticker a scrolling green announcement bar repeating the core claims (Organic, 0–4g sugar, 0–25 calories, Ingredients you know, Naturally caffeinated, Polyphenols, Antioxidants). The key claims are visible on every page without taking up space in the layout.
- 02 Split navigation Shop, FAQ and Find a Store on the left and About on the right, around a centred logo, giving equal weight to buying online and finding the tea in store.
- 03 Hero exploding-fruit product photography and a leaf-icon "Buy Now" pill button that capture the flavour of the product.
- 04 Flavour carousel a Black Tea / All / Green Tea toggle so shoppers can filter the range instantly instead of scrolling through every flavour.
- 05 What's Important section icon badges for USDA Organic, 0–4g sugar, 0–25 calories and real ingredients, linking to a full Ingredients page for shoppers who want the detail.
- 06 Press carousel "Your Tea On Our Tea" five-star cards quoting WWD, Refinery29 and others. Third-party praise builds credibility faster than brand claims.
- 07 Retailer marquee "Find Us Near You!" links to a dedicated store-locator page, turning online interest into in-store purchases.
- 08 Supporting pages a brand story block, FAQ, recipes/blog, and a full legal set including SMS terms and an accessibility statement.
- 09 Footer capture "Subscribe & Get The Tea!" email signup so visitors who are not ready to buy can still stay in touch.
( THE SITE, PAGE BY PAGE )
Scroll through it.
Hover to auto-scroll · scroll inside the frame
( WHAT WENT INTO IT )
Under the hood.
- Custom Shopify theme (sjt-canada/main)
- Animated benefit ticker and retailer logo marquee
- Tea-type filter toggle on the product carousel
- Press testimonial slider with publication logos
- Find-a-store page for retail discovery
- Product reviews via Judge.me
- Klaviyo email and SMS signup flows
- Scroll-reveal section animations
- Fully responsive with a centred-logo mobile header
PP Migra Extrabold expressive serif display headings ("What's Important", "Your Tea On Our Tea")
PP Object Sans Heavy uppercase nav, buttons and ticker
PP Object Sans Medium body copy
- #F6F0DABackground (cream)
- #2A312DText (deep green-charcoal)
- #64BF79Primary / buttons (leaf green)
- #F6F0DAButton text
- warm peach/orange photography, soft khaki cardsAccent surfaces
Fresh, playful and natural. Cream backgrounds and leaf-green pills frame high-saturation fruit-and-bottle photography; rounded buttons with leaf iconography and an editorial serif give a premium-but-friendly feel.
- E-commerce platform
- Shopify
- Theme
- Custom theme sjt-canada/main
- Frontend libraries
- jQuery 3.7.1
- Reviews
- Judge.me
- Email / SMS marketing
- Klaviyo
- Analytics / marketing
- Google Analytics, Meta Pixel
- Security
- Google reCAPTCHA
- CDN
- Cloudflare (Shopify edge)
- Payments
- Shopify Checkout, PayPal
- The health claims are now readable in seconds, from the ticker to the "What's Important" badges.
- One site serves both online shoppers and people who want to buy in a store.
- Klaviyo email/SMS capture and reviews help the brand keep in touch with customers after the first purchase.
- Press quotes and Judge.me reviews give new visitors outside proof of quality.