Roastery brings coffee bags and brewing culture into a warm brown storefront. Its collections suit a small roaster presenting different origins and a focused range of coffee products.
Who is this template for?
Add origin, roast profile, grind options and bag weight for real products. Use your own tasting notes and connect freshness or subscription information where relevant.
Inside the download
- 34 pages per language: Arabic RTL and English LTR.
- Bootstrap 5.3.6 with local assets and editable source.
- 10 actual screenshots of home, detail, selection flow and mobile views.
- Independent package with HTML, source, documentation and license.
- A live demo in both languages before downloading.
Begin with the homepage, browse the catalog and open an individual listing. The following routes come from this template’s actual files; use the demo to inspect their layout alongside the screenshots.
- From origin to ritual. — index.html
- The complete collection — catalog/index.html
- Ethiopia Sidama — products/ethiopia-sidama.html
- Your bag — cart.html
- Checkout — demonstration — checkout.html
- Brew Guide — specials/brew-guide.html
Walk through the user journey
Open a product from the catalog, select a required option or size when shown, and add it to the basket. Follow the cart link inside the demo to preserve the sample selection across navigation. Try changing quantity or removing an item before continuing to checkout. The screenshots show an item added during testing, not a commercial order.
Customize and run it
- Extract the complete archive and open 01-HTML/index.html to choose Arabic or English.
- Edit the brand, copy, images and sample prices in 02-Source, keeping both languages consistent.
- For HTTP preview, run python -m http.server 8080 --directory 01-HTML from the package folder.
- Regenerate with python 02-Source/build.py. Builds were checked with Python 3.12.4.
- Use PAGE-INVENTORY.csv for the route list and README-EN.md for guidance, then upload 01-HTML contents while preserving directories.
Arabic and mobile presentation
Arabic is provided in separate RTL files and English in LTR files. After customization, review long text and imagery and try navigation on a phone. The mobile image here is an actual Arabic viewport capture rather than a device mockup.
Frontend scope and launch preparation
This is a static Bootstrap HTML/CSS/JavaScript frontend. Sample prices, products and business content are illustrative. Payments, real accounts, inventory, appointments, subscriptions, email delivery and protected product downloads require your own backend integration. The demo does not create real orders or bookings.
Before launching your project, replace examples with your own business information and policies, connect forms, pricing and validation to your backend, and test the real customer journey. The package documents the review and its scope; frontend review does not test integrations you add later.
License and download
Free for personal and commercial end projects, with modification permitted. Reselling, redistributing or publishing the original template files as your own product is prohibited. Third-party components and media retain their respective notices. See the included Haneen Web Free Template License.
Download the template and view its ten screenshots · Try the live demo