Morrow Coffee Company
Coffee Shop Landing Page Template

5-Minute Setup

1. Extract morrow-coffee-company.zip and keep an untouched backup. Open the extracted folder in a code editor.
2. Replace the café name, sample address, telephone, email, menu prices, hours, story, and testimonials in index.html.
3. Review the seven supplied WebP photographs. Replace them with your own images if desired, following section 7.
4. Choose a real inquiry workflow. The supplied form validates entries but does not send them while FORM_ENDPOINT is empty. Follow section 12 before accepting live inquiries.
5. Update the favicon, title, description, directions link, and policy wording. Test the menu tabs, mobile navigation, FAQ, and policy modals.
6. Upload index.html and the whole assets/ folder together to your chosen hosting folder. No build step is needed.

Package Contents

Keep this README beside index.html. It also opens independently because its styles are embedded and it does not load external fonts, scripts, or images. The complete package contains 23 files after adding this guide.

Template Features

• Dark espresso, cream, and caramel design with an arched hero photograph.
• Three accessible menu categories: six coffee drinks, four tea/other drinks, and four pastries.
• Four-photo café gallery with captions and subtle hover effects.
• Four brand values, opening hours, three sample testimonials, and a seasonal drink feature.
• Story section, group inquiry form, contact card, and six FAQ answers.
• Responsive navigation, sticky header, skip link, keyboard focus states, and reduced-motion styling.
• Privacy and Terms modals, local fonts and dependencies, and automatic footer year.

Technology Used

Editing the Template

Use a plain-text code editor and open the entire extracted folder. Save as UTF-8. Search for the IDs, class names, filenames, or exact sample text in this guide; much of the source is stored on compact lines. Format a working copy if easier to edit, and retain a backup before major changes.

Open index.html in a browser for a basic preview. Use an HTTP/HTTPS preview when testing a connected form. Edit your source files, then reload the browser; changes made only in browser developer tools are temporary.

1. Update Business Information

Open / search: index.html: Morrow, morrow, 128 Willow Street, Chicago, 60614, (312) 555-0148, +13125550148, and hello@morrowcoffee.example.

1. Replace the café name in the header, hero, story, contact card, footer, metadata, and policy modals.
2. Update visible telephone and email text together with every tel: and mailto: link.
3. Replace the sample address and the separately encoded Google Maps query. A matching map search does not verify the real location.
4. Update hours, menu, prices, milk alternatives, allergy wording, Wi-Fi/seating claims, group-order notice, and testimonials to reflect the actual business.

<a href="tel:+13125550148">(312) 555-0148</a>
<a href="mailto:hello@morrowcoffee.example">hello@morrowcoffee.example</a>

Check: Search the entire folder again for old details. The example above uses the supplied sample contact details; it is not a working business contact.

2. Logo, Brand Name, and Favicon

Open / search: index.html: class="wordmark", COFFEE COMPANY, location-monogram, and rel="icon".

1. Update both the header and footer wordmarks and the header link’s accessible label.
2. Change the decorative m. in the location card if the new brand uses another initial.
3. Edit or replace assets/favicon.svg. Update the favicon link if its path changes.
4. To use an image logo, add your licensed local image, meaningful alt text, and explicit dimensions. Adjust .wordmark styling for the new image.

Check: Inspect the header, footer, browser tab, and narrow mobile widths. Keep the home link pointed to #home.

3. Colors

Open / search: assets/css/style.css: :root.

:root {
  --bg: #1b1916;
  --panel: #24211d;
  --text: #f3ebdf;
  --muted: #b9b1a5;
  --accent: #e4bd8c;
  --line: #454037;
}

Edit the variables to adjust the primary palette. Some sections, buttons, borders, validation messages, and the header also use direct color values; review those when making a full color change. Update meta name="theme-color" in index.html too.

The page uses data-bs-theme="dark". Changing only that attribute does not create a finished light theme; the custom colors and components would also need updating. Check text, hover, focus, and form-error contrast after any palette change.

4. Fonts

Open / search: assets/css/style.css: the eight @font-face rules, body, h1,h2, and .wordmark.

The CSS family name for Playfair Display is Playfair. To replace a font, add licensed local files and update each family, path, format, weight, and style declaration. Paths in the stylesheet begin ../fonts/. Preserve font-display:swap and applicable license notices.

Check: Look for missing font requests, changed line wrapping, button widths, and mobile heading fit. The supplied page does not contain font preload links.

5. Hero and Homepage Copy

Open / search: index.html: #home, #hero-heading, hero-description, photo-note, and hero-footnote.

Replace “Good mornings start with Morrow.” and the supporting copy. The heading includes deliberate line breaks and an emphasized brand name. Keep new copy short enough to fit the desktop split layout and small screens.

The primary hero button links to #menu; the secondary link goes to #visit. Update both the labels and destinations if their purpose changes. Edit the nearby ritual strip phrases in .ritual-strip separately.

The hero image appears both in an image element and a preload link in the document head. Change both paths when renaming the image. Its arched crop is controlled by .hero-visual > img; adjust object-position to keep the subject visible.

6. Menu Categories, Descriptions, and Prices

Open / search: index.html: #menu, .menu-item, .price, and .menu-note.

1. Edit each menu item’s title, description, and price inside its panel.
2. Update the milk alternative surcharge, hot/iced note, currency, and tax wording in .menu-note. Prices are plain text, not calculated.
3. To add an item, duplicate a complete .col-md-6 containing a .menu-item.
4. To add a category, create a unique button/panel pair. Keep data-bs-target, aria-controls, and the panel ID aligned; the panel’s aria-labelledby must identify its button.
5. Keep just one category initially selected: its button has active and aria-selected="true", and its panel has show active.

Check: Click every tab and test arrow-key navigation. Changing a menu item does not automatically update the seasonal feature or FAQ.

7. Image Replacement Guide

Open / search: assets/images/ and the corresponding <img> references in index.html.

All seven supplied photos are actual 1536 × 1024 WebP files. Their visible shape is controlled by CSS, so a wide source can appear in a tall or arched frame.

1. Export your replacement as a real WebP image; simply renaming a JPG or PNG extension does not convert it.
2. For a quick replacement, keep the original filename and folder. If you choose a new name, update every reference, including the hero preload.
3. Keep the supplied dimensions where practical. If the source dimensions change, update the image element’s width and height attributes to match.
4. Write alt text describing the replacement image, and update captions.
5. Review desktop and mobile crops. Adjust object-position for the relevant selector rather than stretching the image.
6. Keep loading="lazy" on below-the-fold images. Keep the hero prioritized and avoid adding lazy loading to it.

<img src="assets/images/signature-latte.webp"
     alt="Fresh latte with silky microfoam in a ceramic cup"
     width="1536" height="1024" loading="lazy">

Use relative local paths. If replacing an image under its existing filename, hard-refresh and clear any enabled host/CDN cache; a new filename is another way to make a changed asset unambiguous.

8. Desktop Navigation and Section Links

Open / search: index.html: #navigation and the footer navigation.

These are sections on one page, not separate routes. If you change a section ID, change every matching href too. The header label “The space” links to #gallery. Keep IDs unique.

The sticky-header offset is set through scroll-padding-top in the stylesheet: 105px normally and 90px at the smallest breakpoint. Adjust it if a new logo or menu changes header height.

9. Mobile Navigation

Open / search: index.html: .navbar-toggler, #navigation; assets/js/main.js: the menu link click handler.

Bootstrap controls the collapsed navigation below 992px. The toggle’s data-bs-target and aria-controls both identify navigation. The custom script closes the expanded mobile menu after a section link is selected.

Keep Bootstrap’s bundle loaded before main.js. Preserve the accessible toggle label and expansion state. This template has a sticky header but no separate mobile bottom action bar.

Check: Open the menu, choose every link, rotate the device, and confirm the destination heading is visible below the header.

10. Café Gallery and Captions

Open / search: index.html: #gallery, .gallery-grid, .gallery-wide, and .gallery-cold.

The gallery contains four static photographs with captions. It does not include a lightbox, image carousel, previous/next controls, or click-to-enlarge behavior. Hovering an image produces a subtle zoom unless reduced motion is preferred.

Edit the image path, alt text, and <figcaption> together. Preserve the wide-item classes when keeping the current composition. If adding or removing figures, adjust the CSS grid spans and check every breakpoint; the layout is tailored to four photographs.

11. Opening Hours and Availability

Open / search: index.html: .hours-band, .hours-list, and the definition list in .location-card.

Update both copies of the schedule. Add any holiday or special opening note in the relevant visible sections. These hours are display text; they do not feed a live open/closed indicator, date picker, or booking system.

The catering copy and group-order FAQ currently request at least 48 hours’ notice. Keep those statements consistent with your actual ordering process.

12. Inquiry Form and Live Integration

Open / search: index.html: #inquiry-form and #form-status; assets/js/main.js: FORM_ENDPOINT.

What the current script does

It prevents normal form navigation, applies browser validation, marks invalid fields for accessibility, and focuses the first invalid field. Valid input is sent only when FORM_ENDPOINT has a value. During submission, the button is disabled. Input is cleared only after a confirmed success response; failed or unconfirmed requests retain it.

Connect a real endpoint

1. Implement a server endpoint or use a form service that accepts these field names. A same-origin HTTPS endpoint is simplest. An external endpoint also needs compatible cross-origin settings.
2. Set the endpoint in the existing constant at the top of main.js. The path below is an example only; that PHP file is not included.
3. The script sends a POST request with FormData and requests JSON using the Accept header. Do not manually set the multipart Content-Type boundary.
4. The endpoint must return a successful HTTP status and JSON {"success":true} only after accepting the inquiry. A redirected HTML thank-you page or a differently shaped response will not satisfy this script. Adapt the response handler if your provider uses another contract.
5. Validate and sanitize all input on the server; apply rate limits and appropriate abuse protection. Keep mail credentials and other secrets on the server, never in main.js.
6. Update the privacy wording and confirmation message to match actual delivery and data retention. Test a real inquiry, an invalid request, and a failed server response, and confirm receipt at the intended mailbox.

const FORM_ENDPOINT = 'send-inquiry.php';

// Expected successful response body:
{ "success": true }

The date field does not enforce the 48-hour notice, opening days, order capacity, or live availability. Implement those rules on the server if required. A form success means the inquiry was accepted; it is not a confirmed catering order, payment, or reservation.

If you remove the form, also remove or guard its dependent JavaScript, including the date and status selectors. Replacing only the form’s action attribute will not change the fetch-based behavior.

13. Reviews and Testimonials

Open / search: index.html: .reviews, <blockquote>, and <figcaption>.

The three quotes attributed to Jamie R., Alex M., and Morgan T. are sample content. Replace them with genuine customer feedback you have permission to publish, or remove the section. Update names and the small role captions together.

No Google review integration or third-party rating is included. Do not present these sample quotes as verified reviews or use them to generate rating structured data.

14. Seasonal Drink Feature

Open / search: index.html: .seasonal, #seasonal-heading, .seasonal-price, and seasonal-latte.webp.

The supplied feature promotes a Maple Brown Sugar Latte at $6.00 with the headline “Sweater weather. In a cup.” Edit the headline, description, drink name, price, image, and alt text. The same drink also appears in the Coffee menu; update both occurrences.

The button links to #visit and does not place an order. There is no coupon, expiration timer, discount calculation, or seasonal scheduling logic. Replace or remove the feature manually when availability changes.

15. Our Story and Brand Values

Open / search: index.html: #story, .story-signature, #difference-heading, and .difference-grid.

Rewrite the sample story to describe your actual café, team, and approach. Replace “See you tomorrow.” if desired. The barista photo is original generated imagery; replace it if you want to show the real team.

The four value statements cover beans, drink preparation, pastries, and atmosphere. Keep sourcing, freshness, dietary, and service claims accurate. Avoid adding unsupported awards or certifications.

16. Address, Directions, and Contact

Open / search: index.html: #visit, .location-card, <address>, and google.com/maps/search.

Replace 128 Willow Street, Chicago, IL 60614 with the real address. Change the visible address in the location card, footer, and Privacy Policy. Update the separate URL-encoded Google Maps query; it does not read the address automatically.

https://www.google.com/maps/search/?api=1&query=YOUR_URL_ENCODED_ADDRESS

The example above is a pattern, not a destination to publish. Use the real address, with spaces and punctuation URL encoded; in an HTML attribute, represent the ampersand as &. Keep target="_blank" and rel="noopener noreferrer" if opening a new tab.

No embedded map, API key, or geolocation access is included. Test the directions result yourself after editing, and check all telephone and email links.

17. FAQ Content

Open / search: index.html: #faq-list and #faq-0 through #faq-5.

The six answers cover milk alternatives, decaf, Wi-Fi/seating, takeaway, pastries, and group orders. Edit the question button and the corresponding .accordion-body.

When adding a question, duplicate a complete .accordion-item and assign a unique panel ID. Match the button’s data-bs-target and aria-controls to that ID. Keep data-bs-parent="#faq-list" if only one answer should stay expanded.

Keep dietary, allergy, availability, and 48-hour group-order statements consistent with the menu, form, and policies. Test every answer after changing IDs.

18. Social Links and Decorative Symbols

No social-media links or icon library are included. Add only real business profiles and give each link a readable label or accessible name. Do not add dead # links.

The interface uses text arrows, an asterisk, and Bootstrap’s own navigation/accordion icons. Decorative symbols are generally hidden from assistive technology where appropriate. The SVG favicon is separate from the wordmark.

19. SEO Setup Before Launch

Keep the visible café name, address, telephone, menu, and hours consistent with the real business. Use one clear primary heading and descriptive section headings. Update image alt text and keep internal links working.

Search for all sample details before publishing. This package is a single landing page, not a multi-page menu system or a set of location pages. Optional SEO additions should describe the real café and actual public URL.

20. Page Titles and Meta Descriptions

Open / search: The <head> of index.html.

<title>Morrow Coffee Company | Good mornings start here</title>
<meta name="description" content="Specialty coffee, fresh pastries, and a little room to slow down. Explore the menu and visit Morrow Coffee Company, your neighborhood coffee ritual.">

Replace the title and description with concise, accurate wording for the business. These values are independent of the on-page heading. The included theme color is #1b1916.

21. Canonical URLs, Social Metadata, and Structured Data

After choosing the production URL, you may add canonical and social metadata using that exact HTTPS address. Any sharing image must exist at the URL you specify. These are optional additions, not existing template features.

If you add café structured data, use verified business information that matches the visible page. Do not publish sample testimonials as real ratings.

22. Sitemap and Search-Engine Files

No sitemap.xml, robots.txt, or search-console verification file is supplied. If you add them, use the actual production URL and coordinate with any existing domain files. Keep demo and staging URLs out of the production sitemap.

This README contains noindex, follow metadata. That discourages search indexing but does not restrict access. Keep it outside your public website if you want the buyer guide to remain private.

23. Performance and Image Optimization

Bootstrap, fonts, photographs, scripts, and the favicon are local. The page does not require a third-party font service or image host to render. The directions link contacts Google Maps only when followed.

Preserve the hero preload and high fetch priority, lazy loading on lower photographs, accurate image dimensions, and font-display behavior. Compress replacement images and inspect their quality before uploading. Avoid deleting font weights while they remain referenced.

After changes, check the browser’s network panel for missing files and test on a mobile connection. No service worker or offline cache is included.

24. Cache Busting

The supplied CSS and JavaScript links have no version suffix. After an update, you can add or increase a query-string version in index.html so browsers request the revised file:

<link rel="stylesheet" href="assets/css/style.css?v=1.0.1">
<script src="assets/js/main.js?v=1.0.1"></script>

These are examples; the documentation does not change the landing page’s current links. Keep the Bootstrap bundle before the custom script. When renaming a hero image, update both its image element and preload link. Clear enabled hosting/CDN caches and hard-refresh when verifying uploads.

25. Responsive Testing

The supplied landing page was checked in Chromium at widths of 1440, 768, 390, and 320 pixels. Those checks do not replace testing after customization or on the actual devices your customers use.

• Check headings, buttons, prices, and long addresses for wrapping.
• Open and close the mobile menu and follow each anchor.
• Check all three menu tabs, gallery crops, form controls, FAQ answers, and policy dialogs.
• Confirm there is no page-level horizontal scrolling at phone widths.
• Test tablet portrait/landscape and wider desktop layouts.
• Check zoom, keyboard focus, and the form’s unavailable/error/success states where applicable.

26. Accessibility

Preserve the skip link, visible focus indicators, image alt text, form labels and error descriptions, tab roles, accordion IDs, modal titles, and reduced-motion styles. Keep link labels descriptive.

Test with Tab and Shift+Tab, use arrow keys on menu tabs, and use Escape to close policy modals. Check that focus returns to the trigger after closing a modal. For form errors, the first invalid field should receive focus and feedback must remain readable.

Check browser zoom at 200% and verify contrast after color edits. These features support accessibility; this documentation does not claim a formal accessibility certification.

27. Adding or Removing Content

Menu: Duplicate a full item column, or add a complete accessible tab/panel pair as described in section 6. Keep IDs unique.

Gallery: Update grid spans if changing its four-image composition. There is no gallery JavaScript to configure.

Sections: Remove or revise navigation, footer, and CTA links that point to a removed section. Keep heading order sensible.

JavaScript dependencies: main.js expects #inquiry-form, #form-status, #date, #year, and #navigation to exist. Removing one without adapting its selectors can stop later behavior. Guard optional elements or remove their handlers as part of the same edit.

Policies: Keep modal trigger targets and accessible title IDs synchronized. Do not remove the Bootstrap bundle while using its tabs, collapse, or modal components.

28. Hostinger / Shared Hosting Deployment

1. Back up the current site and identify the correct document root for your domain or subdomain. It is often public_html; use the actual folder configured for your account.
2. Extract the ZIP. For a domain homepage, upload the contents of morrow-coffee-company/ so index.html and assets/ sit directly in the document root. Avoid an accidental extra folder level.
3. For a demo, use a folder such as demos/landing-pages/morrow-coffee-company/ and keep index.html and assets/ together there. The template uses relative local paths.
4. Keep LICENSES.txt with distributed copies. Upload README.html beside index.html only if you want browser-accessible documentation.
5. Check whether an existing index.php or another default document takes precedence. Resolve that deliberately without deleting unrelated files.
6. Open the exact public HTTPS URL and check all assets, links, menu tabs, mobile navigation, FAQ, and policies. No npm install, build command, or database is needed.
7. Deploy and configure any chosen inquiry backend separately, then confirm actual delivery. Uploading only the static template does not enable submissions.

At the example demo location, the guide would be available at /demos/landing-pages/morrow-coffee-company/README.html. This is a suggested deployment path, not a claim that the page has been published.

29. Privacy and Website Terms

Open / search: index.html: #privacy-modal, #privacy-title, #terms-modal, and #terms-title.

The included wording is sample policy content with a September 26, 2026 effective date. Review it for your actual business before use. Replace the sample contacts and address, and update the effective date when revising the terms.

The Privacy Policy covers inquiries, service providers, retention, external links, and contact choices. The Terms cover website use, menu availability, allergens, group-order confirmation, content, and service limitations. Update these descriptions if you add a backend, analytics, cookies, payments, or other services.

Preserve the modal title IDs, close buttons, and trigger targets. Bootstrap handles modal focus and Escape behavior. This setup guide does not provide individualized legal advice or establish policies for your business.

30. Third-Party Libraries and Image Credits

LICENSES.txt includes Bootstrap’s MIT license and the SIL Open Font License notices for DM Sans and Playfair Display. Retain the applicable notices with the assets you distribute.

The seven coffee photographs were generated for this template and are included locally as WebP files. There are no Unsplash images, external stock-photo links, or remote font references in the landing page. Keep source and license information for any replacement photographs, logos, fonts, or icons you add.

31. Pre-Launch Checklist

• Replace the sample name, address, phone, email, and directions query.
• Verify all menu descriptions, prices, tax wording, and milk alternative charges.
• Keep opening hours consistent in both locations.
• Replace the sample testimonials or remove them.
• Update the story, service claims, seasonal drink, and group-order notice.
• Check all seven image paths, hero preload, actual dimensions, captions, and alt text.
• Connect and test a real inquiry endpoint, or provide an accurate alternate contact workflow.
• Confirm that inquiries are not described as confirmed orders.
• Review metadata, favicon, policy wording, effective dates, and any added production URLs.
• Test menu tabs, mobile navigation, FAQ, modals, focus, zoom, and responsive layouts.
• Check the deployed HTTPS page for missing files and stale cached assets.
• Retain backups and third-party license notices.

32. Template License and Usage

LICENSES.txt documents third-party components. It does not establish a commercial license for the complete Morrow Coffee Company template. Follow the purchase license supplied by PixelToWeb or your seller for client use, project limits, redistribution, and support terms. This guide does not grant additional resale rights.

33. Troubleshooting and Support

For support, provide the template name, page URL, browser/device, a screenshot, the files changed, and steps to reproduce the issue. Do not place hosting or email credentials in HTML or JavaScript.