When Someone Taps Your Instagram Link, the Decision Is Already Halfway Made
By the time a potential customer opens your website, they arrived from somewhere: a tagged photo, a Google Maps search, a friend's Story. They're not researching; they're confirming. The Artisan Coffee Shop template is built for that moment: a fast-loading page that shows the product, surfaces the menu, and answers where and when, before the curiosity fades.
Who This Is For
Single-location specialty coffee shops with a bilingual ID and EN audience, selling espresso, non-coffee drinks, food, and merchandise to coffee enthusiasts and walk-in customers who discover cafés through Instagram tags, Google Maps searches, and friend recommendations. The template is built for operators positioned on bean origin, barista craft, and physical atmosphere, competing against large chains like Starbucks and Kopi Kenangan as well as other independent third-wave shops in the same neighborhood. Market context: Indonesia's third-wave coffee category is still growing, with customers willing to walk further for a better cup but unwilling to spend more than a few seconds confirming whether a café is worth the trip, so the site that loads quickly and answers the menu, location, and hours questions on the first screen captures the visit before a competitor's tagged photo intervenes.
What This Template Covers
- Hero Product Visual: Signature drinks and food fill the first screen. The appetite comes before the menu, not after.
- Structured Digital Menu: Beverages, food, and merchandise broken into scannable categories with prices and short descriptions. No PDF downloads, no zooming in on a photo of a chalkboard.
- Location and Hours, where people actually look: Google Maps embed, opening hours, and contact details in a fixed position, not buried at the bottom of a long homepage.
- Promotions & Special Offers: A dedicated section for seasonal drinks, limited-time bundles, or weekly events, easy to update when the offer changes.
- Zero Runtime JavaScript: Built with Astro, deployed on Cloudflare's global edge. Pages load instantly with nothing executing in the browser, which is why Core Web Vitals hits 98/100 on both mobile and desktop.
Full Site Architecture: 6 Pages
Six pages covering the complete coffee-shop decision path: what's on the menu, who roasts the beans, where to visit or order online, and how to book a private event. The shop page adds an e-commerce revenue layer on top of the physical experience. Same architecture, two conversion paths.
coffee-shop/ (bilingual: ID root · EN at /en/)
├── / HOME
│ ├── [Hero] Signature drinks + café atmosphere
│ ├── [§] Menu highlights: featured drinks & food
│ ├── [§] Promotions & special events
│ ├── [§] Location preview
│ └── [CTA] Visit Us / Order via WhatsApp
│
├── /menu DIGITAL MENU
│ [§] Espresso · Non-Coffee · Food · Merchandise
│ with descriptions and prices
│
├── /events EVENTS & PROMOTIONS
│ [§] Upcoming events · Seasonal promos · Bundle offers
│
├── /journal JOURNAL / BLOG
│ [§] Coffee stories · Origin features · Barista notes
│
├── /visit VISIT US
│ [§] Google Maps · Opening hours · Parking · Contact
│
└── /about ABOUT THE CAFÉ
[§] Story · Values · Team
─────────────────────────────────────────────────────────────────
[Hero] lead section · [§] content section · [CTA] conversion point
bilingual · digital menu · events calendar · location page
Independent Verification
Both reports were captured on the live site, not a staging environment. Click either image to run a fresh scan yourself.
Google's public tool for measuring real-world web performance. It scores pages across Performance, Accessibility, Best Practices, and SEO. Each category is scored out of 100. A score of 90+ is considered good; this site scored 98 on mobile and 100 on desktop.
An independent scanner that checks which HTTP security headers a site has configured. Headers like CSP, HSTS, and X-Frame-Options protect visitors from common web attacks. Grade A means all major headers are present and correctly set.
How to Evaluate the Demo
- First impression: Open the demo on your phone, not desktop. Does the first screen make you want to walk in? If it looks like a stock template, it won't convert a social referral.
- Menu navigation: Count the taps from the homepage to a specific menu item. Three is the target. More than that and the visit is already at risk.
- Location section: Can you see the address and tap to open Google Maps without scrolling past two full sections? That's the real test.
- Load speed on a real connection: Switch to mobile data and open the link. A page that loads fast on WiFi and slow on 4G will lose café walk-ins who are checking from the street.
- Accessibility: Open PageSpeed Insights on the demo. Headings, contrast ratios, alt text, and keyboard navigation all pass automated accessibility checks.
- Security: Run the SecurityHeaders.com scan above. Grade A means every visitor is protected by the full set of HTTP security headers: CSP, HSTS, X-Frame-Options, and more.
"The café that loads in one second wins over the café that looked better but took three. Speed and atmosphere aren't competing priorities. They're both part of the first impression."