Skip to main content

Home Page Layout

Home Page Layout

 

1. Notification Bar 

-rotate 3 messages as a carousel style notification bar (normally some type of promotion), use eye catching color

-i.e. Free shipping, gift with purchase, sign up for email list and receive ______% off (directed to a landing page for email sign up), sign up for sms to learn about new drops (direct to a landing page for sms sign up)

Example:

Screenshot 2025-03-09 at 12.30.04 PM.png

 

2. Header

center: tea tavern logo, left side: navigation (shop teas + more) + (About Us) +  (Brewing Guide) + (Events), right side: search icon, account icon, cart icon

Example 1:

Screenshot 2025-03-09 at 12.30.10 PM.png

Example 2:

Screenshot 2025-03-09 at 1.07.06 PM.png

3. Hero Section

  • banner of current featured item or promotion, tagline and CTA button (shop now)

Example: current example on tea tavern site works

  • Screenshot 2025-03-09 at 12.30.30 PM.png

4. Best-Sellers and Featured Blends

-grid of 4 top selling teas with name + short description, price and a quick add to cart CTA

Example 1:

Screenshot 2025-03-09 at 12.31.20 PM.png

Example 2: 

Screenshot 2025-03-09 at 12.30.58 PM.png

5. 2nd Feature or Promotion

example: current example on tea tavern site works (also like how it is a carousel)

 

Screenshot 2025-03-09 at 1.41.44 PM.png

6. Value Prop Section

Example 1:

  • (left side copy, right side image or vice versa)
  • Sustainably sourced loose-leaf teas from China

    Rooted in Gong Fu brewing traditions

    No Artificial Additives

    Mindfully packaged in biodegradable materials

Screenshot 2025-03-09 at 12.29.47 PM.png

Screenshot 2025-03-09 at 12.41.38 PM.png

Example 2: Custom Icons for Value Props

Screenshot 2025-03-09 at 12.41.57 PM.png

Screenshot 2025-03-09 at 12.43.33 PM.png

7. Customer Testimonals

-scrolling reviews/carousel 

Example 1:

Screenshot 2025-03-09 at 12.40.56 PM.png

Example 2:

Screenshot 2025-03-09 at 12.51.42 PM.png

8. Social Grid (optional to add to site once IG is more established)

  • “Share Your Tea Ritual”
  • 💬 Follow us @TeaTavernOfficial & tag us for a chance to be featured!
  • 🔗 [Live Instagram Feed] with shoppable posts

Example 1:

Screenshot 2025-03-09 at 12.33.26 PM.png

9. About Us

-brief about us with a cta button to "Our Story" or "Learn More" that will go to the about us landing page

Example 1:

Screenshot 2025-03-09 at 12.52.08 PM.png

 Shop → All Teas | Accessories
Customer Care → FAQs | Shipping & Returns | Contact Us
About → About us l Core values l partners

  1. Email Sign Up “Join Our Tavern Loyalty Program” Get 10% off your first order + access to exclusive blends & brewing tips

Example 1: 

Screenshot 2025-03-09 at 12.57.47 PM.png

Example 2:

Screenshot 2025-03-09 at 12.56.21 PM.png

Example 3:

Screenshot 2025-03-09 at 1.30.08 PM.png