GlossLab Detail — Car Detailing Website Template

A premium, responsive HTML website template for an owner-operated car detailing business. GlossLab Detail includes a conversion-focused homepage, eight dedicated service pages, responsive Bootstrap 5 layouts, local-business SEO foundations, structured data, a sitemap, robots.txt, booking-form UI, and an interactive before/after slider.

This README is the setup and customization guide for buyers.

5-Minute Setup

If you want to get the template customized quickly, start here:

1. Open index.html in a code editor.
2. Replace the demo business name, owner name, phone, email, city/service area, prices, and social links.
3. Make the same business-information changes on all service pages.
4. Review the included local WebP demo images and replace any of them with your own business/vehicle photography while keeping the existing filenames when possible.
5. Connect the booking form to a real form handler, CRM, booking platform, or backend.
6. Replace the demo domain https://www.glosslabdetail.com in canonical tags, Open Graph metadata, JSON-LD, sitemap.xml, and robots.txt.
7. Update the CSS/JS cache-busting version whenever shared assets change.
8. Upload the complete folder contents to your hosting account.
9. Test the website on desktop, tablet, and mobile.
10. Submit sitemap.xml in Google Search Console after launch.

Package Contents

glosslab-detail-final/
├── index.html
├── interior-detail.html
├── exterior-detail.html
├── full-detail.html
├── interior-deep-clean.html
├── ceramic-coating.html
├── paint-correction.html
├── headlight-restoration.html
├── mobile-detailing.html
├── sitemap.xml
├── robots.txt
├── README.html
└── assets/
    ├── css/
    │   └── style.css
    ├── js/
    │   └── main.js
    └── images/
        ├── hero/
        ├── about/
        ├── services/
        ├── results/
        ├── gallery/
        └── social/

.DS_Store files may also be present because the package was prepared on macOS. They are Finder metadata only and are not required by the website.

Page purpose

• index.html — main landing page and primary conversion page
• interior-detail.html — Interior Detail service page
• exterior-detail.html — Exterior Detail service page
• full-detail.html — Full Detail service page
• interior-deep-clean.html — Interior Deep Clean service page
• ceramic-coating.html — Ceramic Coating service page
• paint-correction.html — Paint Correction service page
• headlight-restoration.html — Headlight Restoration service page
• mobile-detailing.html — Mobile Detailing service page
• assets/css/style.css — all custom styling and responsive rules
• assets/js/main.js — before/after slider, booking-form demo logic, mobile-nav helper, WOW initialization, footer year
• sitemap.xml — list of public URLs for search engines
• robots.txt — crawler directives and sitemap location
• assets/images/ — parent folder for locally hosted production images
• assets/images/hero/ — main homepage hero photography
• assets/images/about/ — GlossLab Standard / owner-detailer photography
• assets/images/services/ — service-page hero images and service-related promotional imagery
• assets/images/results/ — matched Before/After comparison images
• assets/images/gallery/ — Recent Work / Clean from Every Angle gallery photography
• assets/images/social/ — Open Graph and social-sharing preview images; normally not visible inside the landing page itself

Technology Used

GlossLab Detail uses standard web technologies and does not require a build system.

• HTML5
• CSS3
• Bootstrap 5
• Vanilla JavaScript
• Bootstrap Icons
• Google Fonts
• Animate.css
• WOW.js
• Responsive / mobile-first layouts
• JSON-LD structured data

No WordPress, React, Vue, Angular, Node.js, npm, or database is required for the template itself.

Recommended Editor

You can edit the files in any text/code editor. Visual Studio Code is a good free option.

Basic HTML knowledge is helpful, but most common changes can be made by searching for the demo content described below.

1. Update the Business Information

Before publishing, search across all .html files and replace the current demo information with the real business information.

Current demo values include:

• GlossLab Detail
• Jordan Reed
• Your City
• (555) 555-0123
• +15555550123
• hello@glosslabdetail.com
• https://www.glosslabdetail.com
• demo service-area names
• demo prices
• demo reviews

Use your editor's Find in Files / Replace in Files feature so the same information stays consistent across the whole website.

Phone links

Visible phone numbers and link targets are separate values.

Example visible number:

(555) 555-0123

Example clickable telephone link:

<a href="tel:+15555550123">(555) 555-0123</a>

Example SMS link:

<a href="sms:+15555550123">Text</a>

Update both the visible number and every tel: / sms: value.

Email

Replace:

hello@glosslabdetail.com

Also update every mailto: link.

Service area

Replace Your City and all demo neighborhood/service-area names with real locations the business actually serves.

Do not add service areas the business does not serve.

2. Logo and Brand Name

The current logo is a text-based HTML mark rather than a required image file.

The header/footer branding uses a small blue G mark plus the GLOSSLAB DETAIL text.

You can:

• keep the existing text logo
• change the business name in the HTML
• replace it with your own logo image

If replacing it with an image, use an optimized SVG, WebP, or PNG and include meaningful alt text.

Recommended logo dimensions depend on the logo shape, but a horizontal logo around 400 × 120 px or an SVG with a similar proportion works well.

3. Colors

The main visual system is controlled from CSS variables near the top of:

assets/css/style.css

Current variables include:

:root {
  --primary-color: #17191c;
  --secondary-color: #272b30;
  --accent-color: #3578e5;
  --accent-dark: #245fbf;
  --light-color: #f5f6f7;
  --muted-color: #747a82;
  --border-color: #e5e8eb;
  --heading-font: 'Manrope', sans-serif;
  --body-font: 'Inter', sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
}

The most common brand change is:

--accent-color: #3578e5;
--accent-dark: #245fbf;

After changing shared CSS, remember to increase the CSS version number in every HTML page. See Cache Busting below.

4. Fonts

The template currently uses:

• Manrope for headings
• Inter for body content

The fonts are loaded from Google Fonts in the <head> of each HTML page.

If changing fonts:

1. Update the Google Fonts <link>.
2. Update --heading-font and/or --body-font in style.css.
3. Test headings, navigation, buttons, and mobile layouts after the change.

5. Services and Pricing

The homepage contains service cards and three package cards.

Current primary services include:

• Interior Detail
• Exterior Detail
• Full Detail
• Interior Deep Clean
• Ceramic Coating
• Paint Correction
• Headlight Restoration
• Mobile Detailing

When changing a service, review all of these areas:

1. homepage service card
2. dedicated service page
3. starting price
4. homepage package references
5. related-service links
6. booking-form service dropdown
7. Service JSON-LD
8. page <title> and meta description
9. sitemap URL if the filename changes

Do not publish demo prices if they do not match the real business.

6. Image Replacement Guide

This package uses local WebP image files under assets/images/. The website is already wired to these local files, so you can replace an included demo image without changing HTML paths when you keep the same filename.

Place local images inside:

assets/images/

Image Folder Map — How Each Folder Connects to the Landing Page

The assets/images/ subfolders are organized by where the image appears in the GlossLab Detail website. The HTML is already wired to the included local WebP files. To replace an image without changing code, overwrite the existing file with your final WebP using the same filename.

Local image filenames used by this package

assets/images/
├── hero/
│   └── hero-main.webp
├── about/
│   └── owner-detailer.webp
├── services/
│   ├── interior-detail.webp
│   ├── exterior-detail.webp
│   ├── full-detail.webp
│   ├── interior-deep-clean.webp
│   ├── ceramic-coating.webp
│   ├── paint-correction.webp
│   ├── headlight-restoration.webp
│   ├── mobile-detailing.webp
│   └── premium-care.webp
├── results/
│   ├── before-detail.webp
│   └── after-detail.webp
├── gallery/
│   ├── exterior-finish.webp
│   ├── wheel-detail.webp
│   ├── interior-reset.webp
│   ├── safe-wash.webp
│   └── final-finish.webp
└── social/
    ├── homepage-social.webp
    ├── interior-detail-social.webp
    ├── interior-deep-clean-social.webp
    ├── exterior-detail-social.webp
    ├── full-detail-social.webp
    ├── ceramic-coating-social.webp
    ├── paint-correction-social.webp
    ├── headlight-restoration-social.webp
    └── mobile-detailing-social.webp

How the folders map to index.html

• Hero section: use assets/images/hero/hero-main.webp.
• GlossLab Standard section: use assets/images/about/owner-detailer.webp.
• See the Difference slider: use the two matched files from assets/images/results/.
• Premium Care section: use a suitable file from assets/images/services/, such as premium-care.webp or paint-correction.webp.
• Recent Work gallery: use the portfolio files from assets/images/gallery/.
• Social sharing: use assets/images/social/homepage-social.webp in Open Graph/Twitter metadata; use the full production URL after deployment.

How the folders map to the service pages

Each dedicated service page uses its corresponding file from assets/images/services/ and its own social-sharing image from assets/images/social/:

Important image-folder notes

• The supplied template already points to local WebP files. Replace an included demo image with your final image using the same filename and a suitable matching proportion.
• If you keep the same filenames, you do not need to change the corresponding HTML src.
• For visible page images, use relative paths such as assets/images/gallery/wheel-detail.webp.
• For og:image, twitter:image, and any JSON-LD image value, use the full production URL after the website is deployed.
• Do not move images between folders unless you also update every path that points to them.
• No CSS or JavaScript change is required simply because you replace a local image, provided you keep the existing filename and appropriate dimensions/composition.

Recommended image sizes

These dimensions provide enough resolution for desktop and high-density displays while still allowing responsive cropping.

Best general-purpose size

If you want one simple standard for most photographic replacements, use:

1800 × 1200 px (3:2)

Important composition rule

The site uses responsive cropping with object-fit: cover in several places. A photo may crop differently on desktop and mobile.

For best results:

• keep the main subject near the center
• leave about 15–20% breathing room around the important subject
• avoid placing faces, text, logos, headlights, wheels, or important objects directly against the image edges
• use landscape photography for hero and owner sections

GlossLab Standard / owner image

The desktop layout intentionally lets the text column determine the overall section height and crops the image to fit the available space. On mobile, the image returns to a more natural responsive ratio.

For this section:

• use a landscape image
• recommended source: 1800 × 1200 px
• keep the owner/detailer and vehicle near the center
• do not use a tightly framed portrait image

The current template uses one local owner image: assets/images/about/owner-detailer.webp. Desktop CSS lets the neighboring text column determine the row height and crops the image with object-fit: cover; below 992 px, the image returns to a 4:3 responsive presentation. If exact composition is critical at both sizes, create carefully composed source photography with enough breathing room before changing the template markup.

Before/After slider images

The homepage uses these two local files:

Before: assets/images/results/before-detail.webp
After:  assets/images/results/after-detail.webp

For replacement images, export both files to exactly the same pixel dimensions and use the same camera position, crop, vehicle scale, and framing. The recommended target is:

1600 × 1000 px each

Matching dimensions and composition prevents the vehicle from appearing to jump, zoom, or change size as the user drags the comparison slider.

Image file format

For production, WebP is a good general-purpose choice.

Example filenames:

assets/images/hero/hero-main.webp
assets/images/about/owner-detailer.webp
assets/images/services/interior-detail.webp
assets/images/services/exterior-detail.webp
assets/images/services/ceramic-coating.webp
assets/images/services/paint-correction.webp
assets/images/services/headlight-restoration.webp
assets/images/services/mobile-detailing.webp

Use descriptive filenames instead of names such as IMG_0488.webp.

ALT text

Every meaningful image should have descriptive alternative text.

Good:

alt="Professional paint correction being performed on black vehicle"

Avoid:

alt="image"

Do not keyword-stuff ALT text.

7. Navigation

The homepage navigation primarily uses anchor links.

Examples:

<a href="#services">Services</a>
<a href="#packages">Packages</a>
<a href="#booking">Book Your Detail</a>

Service pages link back into homepage sections:

<a href="index.html#services">Services</a>
<a href="index.html#booking">Book Your Detail</a>

If you rename a homepage section ID, update every navigation link that points to it.

If you add a navigation item, update the navigation on all nine HTML pages so the site remains consistent.

8. Mobile Navigation

Bootstrap handles the responsive menu collapse.

assets/js/main.js also closes an open mobile menu after an on-page anchor link is selected.

If you modify the mobile navigation, test it at approximately:

• 768 px
• 430 px
• 390 px
• 375 px

9. Booking Form

The booking form is intentionally a front-end demonstration.

It performs browser validation and displays a success message, but it does not send email or store submissions.

Before using the site for a real business, connect the form to one of the following:

• Formspree
• Netlify Forms
• CRM
• booking platform
• email API
• custom PHP/backend handler
• another form-processing service

Current fields include:

• Name
• Phone
• Email
• Requested service
• Vehicle year
• Vehicle make
• Vehicle model
• Vehicle condition
• Preferred appointment date
• Additional notes

When connecting a backend, preserve server-side validation and spam protection. Client-side validation alone is not a security control.

10. Before/After Slider

The homepage comparison slider is controlled by:

assets/js/main.js

The HTML uses these attributes:

data-compare
data-range
data-after
data-line

In the current markup, after-detail.webp is the full-width base image and before-detail.webp is the movable overlay. The overlay element still uses the existing data-after hook for JavaScript compatibility; do not swap the filenames based on that attribute name. The left label is Before and the right label is After.

When replacing the images:

• keep before-detail.webp as the dirty/unclean state
• keep after-detail.webp as the clean/finished state
• export both to identical dimensions, ideally 1600 × 1000 px
• use the same vehicle, camera angle, crop, and vehicle scale
• keep the subject aligned as closely as possible

11. Reviews

The visible testimonials are demo content.

Replace them with genuine customer feedback before publishing.

Do not add fabricated:

• review counts
• star ratings
• AggregateRating structured data
• customer names

If you sell services or products through a third-party checkout platform such as Gumroad, keep verified purchase reviews on that platform and use genuine excerpts on your own site only when appropriate.

12. Social Media Links

Update the footer links for:

• Instagram
• Facebook
• Google / Google Business Profile

Replace any placeholder href="#" values before publishing.

If a platform is not used by the business, remove that icon instead of leaving a dead link.

13. SEO Setup Before Launch

The template already contains the core technical SEO foundation, but the demo information must be replaced with real information before launch.

Each public page should have:

• unique <title>
• unique meta description
• exactly one H1
• canonical URL
• Open Graph metadata
• Twitter/X card metadata
• semantic headings
• descriptive ALT text
• crawlable internal links
• structured data

Service pages additionally include:

• visible breadcrumb navigation
• BreadcrumbList JSON-LD
• Service JSON-LD

The homepage includes:

• AutomotiveBusiness structured data
• WebSite structured data

Important demo domain

The template currently uses:

https://www.glosslabdetail.com

Replace it with the real production domain in:

• canonical tags
• og:url
• og:image when needed
• Twitter image metadata
• JSON-LD URLs
• sitemap.xml
• robots.txt

Do not leave the demo domain in a production site.

14. Page Titles and Meta Descriptions

Each page should target the actual service and location naturally.

Example homepage title:

Car Detailing in Your City | GlossLab Detail

Example service title:

Paint Correction in Your City | GlossLab Detail

Keep titles descriptive rather than stuffing them with repeated keywords.

Meta descriptions should summarize the page for a potential customer. Aim for clear, useful copy rather than an exact character count.

15. Canonical URLs

Each page includes a canonical URL similar to:

<link rel="canonical" href="https://www.glosslabdetail.com/paint-correction.html">

After the final domain is known, update every canonical URL to the page's real public URL.

If your hosting configuration removes .html from public URLs, canonical URLs and sitemap URLs should match the actual preferred public URLs.

16. Open Graph / Social Sharing

Each page includes social metadata such as:

<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:url" content="...">
<meta property="og:image" content="...">
<meta name="twitter:card" content="summary_large_image">

For a dedicated social-sharing image, a good standard is:

1200 × 630 px

Use an absolute production URL in og:image and Twitter image metadata.

17. Structured Data / JSON-LD

The template contains JSON-LD blocks inside the <head>.

Homepage structured data includes the business and website.

Service pages include service and breadcrumb information.

Before launch, update structured data so it matches the visible website and the real business.

Typical values to verify:

• business name
• URL
• phone
• email
• service area
• opening hours
• service names
• page URLs
• image URLs

If the business has a real customer-facing street address, you can add the verified address. Do not invent an address.

Do not add fabricated review or rating structured data.

After editing, validate the markup with Google's Rich Results Test and the Schema.org Validator.

18. Local SEO

For a local detailing business, keep the following information consistent across the website and Google Business Profile:

• business name
• phone number
• address, if publicly used
• website URL
• service area
• business hours

Use local search phrases naturally in content, for example:

• car detailing in the actual city
• interior car detailing
• exterior car detailing
• mobile car detailing
• ceramic coating
• paint correction

Do not create dozens of near-identical city pages with only the city name changed.

If you create future location pages, make them genuinely useful and specific to the location.

19. sitemap.xml

The included sitemap.xml currently contains all nine public pages.

Before launch:

1. replace the demo domain with the production domain
2. verify each URL loads successfully
3. update lastmod when appropriate
4. remove any page that is intentionally not public
5. add new public pages if you create them

Current page coverage:

/
/interior-detail.html
/exterior-detail.html
/full-detail.html
/ceramic-coating.html
/paint-correction.html
/interior-deep-clean.html
/headlight-restoration.html
/mobile-detailing.html

20. robots.txt

The included file currently follows this basic structure:

User-agent: *
Allow: /

Sitemap: https://www.glosslabdetail.com/sitemap.xml

Replace the sitemap URL with the production domain.

Do not accidentally block the site's HTML, CSS, JavaScript, or images unless you intentionally want them excluded from crawling.

21. Google Search Setup After Launch

After the production website is live:

1. Create or open Google Search Console.
2. Verify the website/domain property.
3. Submit the production sitemap.xml.
4. Use URL Inspection for the homepage and major service pages.
5. Request indexing when appropriate.
6. Create or claim the real Google Business Profile.
7. Keep business contact and service-area information consistent.
8. Monitor indexing and Core Web Vitals over time.

22. Performance and Core Web Vitals

The template includes several performance-conscious patterns:

• above-the-fold images use eager/high-priority loading
• below-the-fold images use lazy loading
• images include width/height attributes where practical
• JavaScript is small and focused
• responsive image containers use object-fit: cover

For production, optimize local images to WebP/AVIF and avoid uploading unnecessarily large files.

After deployment, test using:

• Google PageSpeed Insights
• Chrome Lighthouse

Pay particular attention to:

• Largest Contentful Paint (LCP)
• Interaction to Next Paint (INP)
• Cumulative Layout Shift (CLS)

23. Cache Busting

The HTML currently loads shared files with version query strings.

At the time this README was generated:

assets/css/style.css?v=9
assets/js/main.js?v=1

When you change style.css, increase the CSS version across every HTML page.

Example:

assets/css/style.css?v=9

When you change main.js, increase its version across every page.

Example:

assets/js/main.js?v=2

This helps prevent browsers, CDNs, and shared hosting caches from displaying an older version of the file.

Do not update only index.html; all pages should reference the same current shared-file version.

24. Responsive Testing

The site is responsive, but always test after changing fonts, text length, images, service names, prices, or navigation.

Recommended widths:

1440 px
1200 px
1024 px
991 px
768 px
430 px
390 px
375 px

Check for:

• horizontal scrolling
• overlapping elements
• clipped navigation
• long buttons
• text overflow
• images that visually overpower adjacent text
• gallery cropping
• FAQ behavior
• mobile booking bar placement
• form stacking

Two-column image sections

When reviewing sections that contain text beside an image, evaluate the actual rendered height, not just the source image's aspect ratio.

Specifically check:

• GlossLab Standard / owner section
• service-page heroes
• Premium Care section
• other future text + image sections

The current CSS uses responsive cropping so images can visually balance their neighboring text.

25. Adding a New Service Page

The easiest approach is to duplicate an existing service page.

Example:

paint-correction.html

Then:

1. rename the copied file
2. update the <title>
3. update meta description
4. update canonical URL
5. update Open Graph/Twitter metadata
6. update H1 and page copy
7. update hero image and ALT text
8. update price
9. update What's Included
10. update ideal-use section
11. update process steps
12. update FAQ
13. update related-service links
14. update Service JSON-LD
15. update Breadcrumb JSON-LD
16. add the service to the homepage if appropriate
17. add it to the booking-form dropdown
18. add the page to sitemap.xml
19. verify navigation and internal links
20. test desktop/mobile layout

26. Removing a Service Page

If you remove a service:

• remove the homepage service card/reference
• remove links from related-service sections
• remove it from the booking-form dropdown
• remove the URL from sitemap.xml
• update navigation if needed
• remove or redirect the old page on a live site

If the old URL was already indexed, consider adding a server-side 301 redirect instead of simply deleting it.

27. Hostinger / Shared Hosting Deployment

GlossLab Detail is a static HTML/CSS/JS website and can be uploaded to standard shared hosting.

For a typical Hostinger deployment:

1. Open File Manager or connect using SFTP/FTP.
2. Locate the site's public web directory, commonly public_html.
3. Upload the contents of the glosslab-detail-final folder to the desired web root or subdirectory.
4. Make sure index.html is located at the URL's intended root.
5. Preserve the assets/css/, assets/js/, and assets/images/ directory structure.
6. Visit the homepage.
7. Open every service page.
8. Test CSS/JavaScript loading.
9. Test mobile navigation.
10. Test phone/text links.
11. Verify robots.txt and sitemap.xml are publicly accessible.

Because the template uses relative paths, it can also work inside a subdirectory as long as the folder structure is preserved.

28. Privacy Policy and Legal Content

The footer may include demo/privacy placeholder text.

Before launch, replace placeholders with the real business's applicable privacy policy, terms, refund/cancellation information, and other disclosures appropriate to the business and jurisdiction.

This template does not provide legal advice.

29. External Libraries

The template currently loads some third-party libraries through CDNs, including:

• Bootstrap
• Bootstrap Icons
• Google Fonts
• Animate.css
• WOW.js

These services/libraries retain their own licenses and terms.

If your deployment requirements prohibit external CDN dependencies, download/self-host the appropriate permitted files and update the references.

30. Local Demo Photography

The demo package uses locally stored WebP photography under assets/images/; the live page does not depend on remote Unsplash image delivery URLs.

Before redistributing, packaging, or publishing third-party images, confirm the applicable image license and usage terms.

For a real detailing business, original photography is strongly recommended because it provides better authenticity, stronger local trust, and more representative before/after results.

31. Pre-Launch Checklist

Use this checklist before publishing a real customer website:

[ ] Business name updated everywhere
[ ] Owner name updated
[ ] Phone number updated
[ ] All tel: links updated
[ ] All sms: links updated
[ ] Email updated
[ ] Service area updated
[ ] Business hours updated
[ ] Social links updated
[ ] Services verified
[ ] Prices verified
[ ] Demo reviews replaced with genuine reviews
[ ] Demo images reviewed/replaced
[ ] Before and After files use matching dimensions and framing
[ ] Image ALT text reviewed
[ ] Booking form connected to a real handler
[ ] Privacy/legal placeholders replaced
[ ] Production domain updated in canonical tags
[ ] Production domain updated in Open Graph metadata
[ ] Production domain updated in Twitter metadata
[ ] Production domain updated in JSON-LD
[ ] sitemap.xml updated
[ ] robots.txt updated
[ ] Every page has exactly one H1
[ ] Internal links tested
[ ] Service-page links tested
[ ] Mobile navigation tested
[ ] Call/Text/Book mobile bar tested
[ ] Before/after slider tested
[ ] FAQ accordion tested
[ ] Forms tested
[ ] CSS/JS cache versions synchronized across pages
[ ] Desktop tested at 1440px
[ ] Tablet tested at 1024px / 768px
[ ] Mobile tested at 430px / 390px / 375px
[ ] No horizontal scrolling
[ ] No image/text height imbalance
[ ] PageSpeed/Lighthouse reviewed
[ ] Structured data validated
[ ] Sitemap submitted to Google Search Console

32. License and Usage

Use the current PixelToWeb license terms that were supplied with your purchase or published by PixelToWeb.

Do not rely on demo text inside this template as a substitute for the authoritative license.

In general, do not redistribute or resell the original template source as your own downloadable template unless the applicable PixelToWeb license explicitly allows it.

Third-party libraries, fonts, icons, and stock photography remain subject to their respective licenses.

33. Support

For product support, use the support/contact method provided with your PixelToWeb purchase.

When requesting help, include:

• product name: GlossLab Detail
• page/file affected
• browser/device
• screenshot if visual
• exact steps to reproduce the issue

Unless your purchase explicitly includes customization services, support should be treated as help with the supplied template rather than custom website development.

Final Recommendation

Before launching a real business website, replace demo business information and demo photography with genuine details and original business photography wherever possible. The template provides the technical structure; the real business content is what makes the final site trustworthy, useful, and locally relevant.