Garagio documentation

A WordPress theme for auto repair shops and car service garages: repairs, tyres, detailing, EV care, body shops and classic cars. Six demos, service bookings with vehicle details, mechanics, services, opening hours and a car brand checker.
Thank you for choosing Garagio. This guide takes you from a fresh WordPress site to a copy of the demo with your own details. If something is not covered here, write to support@codememory.com — we answer within one working day.
- Version1.0.0
- WordPress6.5 or later
- PHP7.4 or later
- Live demoOpen the demo
Highlights
- Six garage demos imported in one click
- Service booking form with vehicle details, saved in your dashboard
- Mechanics with job title, certifications and working days
- Services with price, time in the workshop and what is included
- Specialties to group mechanics and services
- Opening hours with an "Open now" badge
- Car brand checker for the makes you service
- 17 Elementor widgets (free Elementor)
- Every section also works as a shortcode
- Book / call bar on phones
- Light and dark mode
- Colours and fonts from the Customizer
- Block patterns and every core block styled
- Self-hosted fonts, nothing loaded from Google
- Translation ready, right-to-left support
- Child theme included
What is in the download
themeforest-garagio-wordpress-theme/ ├── garagio.zip ← the theme: upload this in WordPress ├── garagio-child.zip ← child theme, for your own code changes (optional) ├── plugins/garagio-core.zip ← the theme's plugin (also installed from inside the theme) ├── demo-content/ ← demo files for a manual import ├── documentation/ ← this guide, as HTML and PDF └── licensing/ ← GPL licence, font licences and credits
garagio.zip, not the whole download. Uploading the download zip gives the error
"The package could not be installed. The theme is missing the style.css stylesheet."Requirements
- WordPress 6.5 or later (tested up to 7.1).
- PHP 7.4 or later (8.2 or later recommended).
- For the demo import: PHP
memory_limit256M,max_execution_time300, upload size 32M. Most hosts already allow this; if an import stops half-way, ask your host to raise these values.
Every plugin the theme uses is free from wordpress.org. Nothing needs a paid licence.
Installing the theme
- In your dashboard, go to Appearance → Themes → Add New Theme → Upload Theme.
- Choose
garagio.zipand click Install Now, then Activate. - Optional: install and activate
garagio-child.zipthe same way (see Child theme).
Upload by FTP instead: unzip garagio.zip and copy the garagio folder to
wp-content/themes/, then activate it under Appearance → Themes.
Plugins
After activation, a notice at the top of the dashboard lists the plugins the theme uses. Click Begin installing plugins (or go to Appearance → Install Plugins), select them all, choose Install, then activate them.
| Plugin | What it adds | |
|---|---|---|
| Garagio Core | Required | Services, mechanics, specialties, reviews, booking form, opening hours, car brand checker, widgets, shortcodes and the demo import. Included with the theme. |
| Elementor | Recommended | The free page builder used for the demo pages. The theme's own widgets appear in Elementor's Garagio group. |
| One Click Demo Import | Recommended | Imports a demo in one click. You can remove it after the import. |
The theme works without any plugin: posts, pages, menus, widgets and search are styled the same. The plugin is needed for the garage features (services, mechanics, booking form…).
Importing a demo
The import gives you the demo site: pages, services, mechanics, reviews, posts, menus, widgets and the Customizer settings. Use it on a new site: it adds content next to what you already have.
- Install the plugins above.
- Go to Appearance → Import Demo Data.
- Pick a demo and click Import. It takes one to three minutes; keep the page open.
- Done: visit your site. The home page, menus and blog page are already set.
| Demo | Home page | Accent |
|---|---|---|
| General repair | /home-repair/ | #e8590c |
| Tyres & wheels | /home-tyres/ | #e0a800 |
| Car detailing | /home-detailing/ | #0a7a9c |
| EV & hybrid | /home-ev/ | #1f9d55 |
| Body shop | /home-bodyshop/ | #d0312d |
| Classic cars | /home-classic/ | #c8963e |
All six home pages are imported with every demo; the demo you pick decides which one is the front page and which colours and header the Customizer uses. To switch later, go to Settings → Reading and choose another home page.
Manual import
If the one-click import is blocked by your host, use the files in demo-content/:
- Tools → Import → WordPress (install the importer when asked) → upload
content.xml. - Install Widget Importer & Exporter → Tools → Widget Importer & Exporter → upload
widgets.wie. - Install Customizer Export/Import → Appearance → Customize → Export/Import → upload
customizer-<demo>.dat. - Appearance → Menus → Manage Locations: set the main, top bar and footer menus. Settings → Reading: choose the home and blog pages.
After the import: your details
The demo uses a made-up phone number, address, opening hours and car brands list. Replace them with yours, in this order:
- Phone number and top bar: Appearance → Customize → Garagio options → Header and top bar. Set Phone number, Top bar text (a short line such as your opening times) and the Label next to the phone. Every "Call" button on the site uses this number.
- Logo and site icon: Appearance → Customize → Site Identity.
- Colours: Appearance → Customize → Colors. The six demo home pages each have their own accent colour (see Page options); clear it there to use the Customizer colour.
- Opening hours, car brands and booking emails: Settings → Garagio Core (see Opening hours, Car brand checker and Booking requests).
- Footer widgets: Appearance → Widgets → Footer column 1–4: edit the Contact details widget (address, phone, email).
- Your content: edit the services, mechanics and reviews in the dashboard menus of the same names, and replace the grey placeholder photos with your own.
Services, mechanics and reviews
The Garagio Core plugin adds three content types and a Specialties list to the dashboard. Each content type has a Details box under the editor.
| Menu | Used for | Details |
|---|---|---|
Services/services/ | One page per service (full service, tyre fitting, ceramic coating…). Shown by the Services widget and on the services archive. | Icon, price ("From $89"), price note, time in the workshop, what is included (one item per line). |
Mechanics/mechanics/ | Mechanics, specialists and service advisors. | Job title, years of experience, certifications, the cars or jobs they know best, days in the workshop. The featured image is the portrait (a tall photo works best). |
| Reviews | Customer reviews shown by the Reviews widget (no page of their own). | Rating, customer location, service they had, where the review was left (Google, Facebook…). The title is the customer's name; the text is the review. |
Specialties (under Services) group services and mechanics, for example Tyres & wheels or
EV & hybrid. Each specialty has its own page at /specialty/<name>/ listing its services and
mechanics, a service page shows the mechanics of its specialty, and the Services and Mechanics widgets can show one
specialty only.
The featured image of a service or post is used on its card and at the top of its page. Use landscape photos at least 1600 × 760 px.
Booking requests
The Booking form widget (or the [garagio_booking] shortcode) asks for the
visitor's name, phone and email, the service needed, their vehicle (make, model, year, registration and mileage), a
preferred date and drop-off time, whether they will drop the car off, wait or want it collected, and an optional
description of the problem. The make field suggests the brands from your car brands list. Name and a phone number or email are required.
Spam protection is built in (a hidden field and a limit on repeated sends) and no other plugin is needed.
- Every request is saved under Booking requests in the dashboard, with a counter of new ones. Open a request to see the details and set its status: New, Contacted, Booked, Cancelled.
- The services in the form come from your Services, so they stay up to date.
- Settings → Garagio Core → Booking requests: turn email alerts on or off, choose the address (empty = the site admin email), and edit the thank-you message and the privacy note under the form.
- Emails are sent by WordPress. If they do not arrive, install an SMTP plugin such as WP Mail SMTP; requests are saved in the dashboard either way.
The form is a request, not a booking calendar: your team confirms each booking, and its price, by phone or email. Check the privacy rules that apply to your business before you go live.
Prefer an online booking service or a form plugin? Put its shortcode in a Text Editor widget instead. Everything else keeps working.
Opening hours
Settings → Garagio Core → Opening hours: set an opening and a closing time for each day. Leave both empty on days you are closed, and add an optional note (for example "Closed on public holidays").
- The Opening hours widget (Elementor) or
[garagio_hours]shortcode shows the hours beside your address and phone number. The Garagio: Opening hours widget shows them in the sidebar or footer. - Today's row is highlighted, and a badge says Open now (with the closing time) or Closed now. The badge uses the time zone in Settings → General, and it is worked out in the visitor's browser, so it stays right even when your pages are cached.
- The week starts on the day set in Settings → General → Week Starts On; times use the time format set there.
Car brand checker
Settings → Garagio Core → Car brands: list the car brands you service, one per line.
The Car brand checker widget (or [garagio_brands]) lets visitors type their car
brand and tells them whether you service it, with the two messages you set on the same page (%s
is replaced by what they typed). It matches the start of a name in both directions, so "merc" and
"Mercedes-Benz C200" both find "Mercedes-Benz". Turn on List the brands in the widget to show every brand
beside the checker. The same list feeds the suggestions in the booking form's Make field.
Page options
Each page has a Page options box in the editor sidebar:
- Accent colour for this page: overrides the Customizer accent on this page only. The demo uses it to give each demo home page its own colour.
- Colour scheme: light or dark for this page only (the Classic cars demo is dark).
- Header layout: classic, centered or contact, for this page only.
Leave them empty to follow the Customizer.
Page templates
| Template | Use |
|---|---|
| Default | Page title band, content and no sidebar. |
| Full width, no title | For pages built with Elementor: the content fills the screen and you add your own hero. All demo pages use it. |
| Full width with title band | The title band, then full-width content. |
Customizer settings
Appearance → Customize. Colours are in the Colors section; everything else is in the Garagio options panel. Changes show in the preview before you publish them.
| Setting | Type | Default |
|---|---|---|
| Colors | ||
| Accent colour (buttons, links, icons) | color | #e8590c |
| Ink colour (text, header, footer) | color | #16191d |
| Paper colour (page background) | color | #f3f1ed |
| Style and fonts | ||
| Colour scheme | select | Light |
| Show a light/dark switch in the header | checkbox | On |
| Heading font | select | Oswald |
| Body font | select | Inter Tight |
| Body text size (px) | number | 17 |
| Corner rounding (px) | number | 4 |
| Header and top bar | ||
| Header layout | select | Classic: logo left, menu right |
| Keep the header visible while scrolling | checkbox | On |
| Show the search button | checkbox | On |
| Header button text | text | empty |
| Header button link | url | empty |
| Show the top bar | checkbox | On |
| Top bar text (for example your opening hours) | text | empty |
| Phone number | text | empty |
| Label next to the phone (for example "Recovery 24/7") | text | empty |
| Footer | ||
| Widget columns | select | 4 |
| Footer text (links allowed). Leave empty for the site name and year. | textarea | empty |
| Show a back-to-top button | checkbox | On |
| Blog | ||
| Post list layout | select | Grid of cards |
| Sidebar | select | Right |
| Show the author on posts | checkbox | On |
| Show the date on posts | checkbox | On |
| Show related posts under each post | checkbox | On |
| Mobile call bar | ||
| Show a call / book bar at the bottom of phone screens | checkbox | On |
| Second button text (the first button calls your phone number) | text | empty |
| Second button link | url | empty |
The site title, tagline, logo, site icon, background and homepage settings are WordPress's own, in Site Identity, Background image and Homepage Settings.
Widgets
Appearance → Widgets. Areas: Blog sidebar and Footer column 1 to Footer column 4 (set the number of footer columns in the Customizer). The plugin adds three widgets, named Garagio: … in the widget list:
- Contact details — phone, email, address, each with a link.
- Opening hours — your hours from Settings → Garagio Core, with an "Open now" badge.
- Services list — links to your services, optionally from one specialty.
Building pages with Elementor
All demo pages are built with the free Elementor plugin and the theme's widgets.
- Create a page, set its Template to Full width, no title, and click Edit with Elementor.
- Search for the widget or open the Garagio group in the left panel and drag a widget onto the page.
- Edit its text and options in the left panel. Every widget has a Background option (light, paper, dark or accent colour) so sections alternate like the demo.
The widgets fill themselves from your content: Services, Mechanics, Reviews
and Latest posts show the items you add in the dashboard. List fields (prices, steps,
questions…) take one item per line, with the parts separated by |, as the help text under each field shows.
Elementor's own Google Fonts loading is switched off by the demo import, so the site keeps using the theme's self-hosted fonts.
Without Elementor: shortcodes
Every widget is also a shortcode, so you can build the same sections in the block editor: add a Shortcode block and type, for example:
[garagio_services count="6" columns="3"] [garagio_stats items="18k+|Cars serviced||4.9|Average rating"] [garagio_booking title="Book your car in"]
Options are the same as in Elementor. In list options, separate items with || and parts with
|. Images take an attachment ID (Media → Library → the number in the address) or a full URL.
Hero — [garagio_hero]
| Option | What it does |
|---|---|
layout | Layout Choices: split, cover |
primary_label | Button text |
primary_url | Button link |
show_phone | Show the phone number (from the Customizer) |
secondary_label | Second button text (when the phone is hidden) |
secondary_url | Second button link |
badges | Trust points, one per line |
image | Photo |
rating | Rating (for example 4.9/5) |
rating_text | Rating note (for example "from 2,300 reviews") |
card_title | Floating card title |
card_text | Floating card text |
Also: eyebrow, title, text.
Services — [garagio_services]
| Option | What it does |
|---|---|
count | How many |
specialty | Only this specialty (slug, optional) |
style | Style Choices: cards, icons |
show_price | Show prices |
more_label | Button under the grid |
more_url | Button link |
Also: eyebrow, title, text, columns, tone.
Reviews — [garagio_reviews]
| Option | What it does |
|---|---|
summary | Summary line (for example "4.9 average from 1,240 reviews") |
count | How many |
Also: eyebrow, title, text, columns, tone.
Mechanics — [garagio_mechanics]
| Option | What it does |
|---|---|
count | How many |
specialty | Only this specialty (slug, optional) |
Also: eyebrow, title, text, columns, tone.
Numbers — [garagio_stats]
| Option | What it does |
|---|---|
items | Numbers as Value|Label, one per line |
Also: tone.
Why choose us — [garagio_features]
| Option | What it does |
|---|---|
items | Features as icon|Title|Text, one per line. Icons: wrench, car, tyre, brake, battery, engine, gauge, plug, bolt, oil, snow, key, truck, spray, roller, steering, shield, clock, tag, star, badge, check, users, phone, calendar, sparkle, leaf. |
image | Photo (optional) |
Also: eyebrow, title, text, columns, tone.
How it works — [garagio_steps]
| Option | What it does |
|---|---|
items | Steps as Title|Text, one per line |
Also: eyebrow, title, text, tone.
Prices — [garagio_pricing]
| Option | What it does |
|---|---|
items | One price per line: Name|Price|Note|Feature; Feature; Feature|yes (to highlight)|Button text|Button link |
note | Small print under the prices |
Also: eyebrow, title, text, tone.
Questions — [garagio_faq]
| Option | What it does |
|---|---|
items | Questions as Question|Answer, one per line |
Also: eyebrow, title, text, tone.
Call to action — [garagio_cta]
| Option | What it does |
|---|---|
button_label | Button text |
button_url | Button link |
show_phone | Show the phone number |
Also: title, text, tone.
Trust strip — [garagio_trust]
| Option | What it does |
|---|---|
items | Badges as icon|Text, one per line |
Also: tone.
Car brand checker — [garagio_brands]
| Option | What it does |
|---|---|
placeholder | Field placeholder |
button | Button text |
show_list | List the brands (from Settings → Garagio Core) |
Also: eyebrow, title, text, tone.
Latest posts — [garagio_posts]
| Option | What it does |
|---|---|
count | How many |
category | Only this category (slug, optional) |
Also: eyebrow, title, text, tone.
Breakdown banner — [garagio_emergency]
| Option | What it does |
|---|---|
phone | Phone (empty = the Customizer phone) |
Also: title, text, tone.
Text and photo — [garagio_about]
| Option | What it does |
|---|---|
image | Photo |
badge_value | Badge number (for example 18k+) |
badge_label | Badge text |
points | Points, one per line |
button_label | Button text |
button_url | Button link |
reverse | Photo on the right |
Also: eyebrow, title, text, tone.
Booking form — [garagio_booking]
| Option | What it does |
|---|---|
layout | Layout Choices: split, stacked |
points | Points beside the form, one per line |
button | Button text |
show_phone | Show the phone number |
Also: eyebrow, title, text, tone.
Opening hours — [garagio_hours]
| Option | What it does |
|---|---|
address | Address |
map_url | Directions link (for example a map link) |
show_phone | Show the phone number |
Also: eyebrow, title, text, tone.
Shortcodes: [garagio_hero], [garagio_services], [garagio_reviews], [garagio_mechanics], [garagio_stats], [garagio_features], [garagio_steps], [garagio_pricing], [garagio_faq], [garagio_cta], [garagio_trust], [garagio_brands], [garagio_posts], [garagio_emergency], [garagio_about], [garagio_booking], [garagio_hours].
Block editor and patterns
Posts and simple pages use the WordPress block editor. Every core block is styled to match the theme, and the editor shows the theme's fonts and colours. Click + → Patterns → Garagio for ready-made sections: hero with call button, three services, call to action, questions and answers, three reviews, price table and contact details. The theme also adds block styles: Card (Group), Check marks (List), Eyebrow (Paragraph) and Framed (Image).
Blog
Settings → Reading → Posts page sets the page that lists your posts (the demo uses "Blog"). Choose a grid or list layout and the sidebar position in Customize → Garagio options → Blog. Posts show the author, date, category, share links (turn them off in Settings → Garagio Core) and related posts.
Light and dark mode
Customize → Garagio options → Style and fonts → Colour scheme: Light, Dark or Follow the visitor's device. With Show a light/dark switch on, visitors can switch with the moon button in the header; their choice is remembered on that device. A single page can be forced to light or dark in its Page options.
Child theme
If you want to change the theme's code, install garagio-child.zip and activate Garagio Child.
Put your CSS in the child theme's style.css and your PHP in its functions.php; copy a
template file from garagio into the child theme to override it. Theme updates replace the parent theme
only, so your changes are kept.
Small style changes do not need a child theme: use Customize → Additional CSS.
Translation and right-to-left
Every text in the theme and the plugin can be translated. The templates are
garagio/languages/garagio.pot and garagio-core/languages/garagio-core.pot.
- Easiest: install Loco Translate → Loco Translate → Themes → Garagio → New language, and translate in your browser. Do the same under Plugins for Garagio Core.
- Or use Poedit: open the .pot file, translate, and save the files as
garagio-fr_FR.po/.moinwp-content/languages/themes/.
Right-to-left languages (Arabic, Hebrew, Persian…) are supported: when WordPress runs in such a language, the layout mirrors automatically.
Updating
When a new version is released, download it from your ThemeForest Downloads page. Then either:
- Appearance → Themes → Add New Theme → Upload Theme → choose the new
garagio.zip→ Replace current with uploaded; or - replace the
wp-content/themes/garagiofolder by FTP.
When the theme comes with a newer Garagio Core, the dashboard notice offers to update the plugin. Your content, menus, widgets and Customizer settings are kept. Changes you made to the parent theme's files are lost: keep them in the child theme.
Questions
"The package could not be installed. The theme is missing the style.css stylesheet."
You uploaded the whole download. Unzip it first and upload garagio.zip only.
The import stopped or shows an error.
Your host stopped the import early. Ask them to raise max_execution_time to 300 and memory_limit to 256M, then run the import again: items already imported are skipped.
The pages look plain after the import.
Activate Elementor and the theme's plugin, then reload. Without Elementor, the pages show the same sections through shortcodes.
Booking request emails do not arrive.
Requests are always saved under Booking requests. For email, check the address in Settings → Garagio Core and install an SMTP plugin such as WP Mail SMTP; many hosts block WordPress's default mail.
Where are the demo photos?
They are licensed for the live demo only, so the import uses placeholders. Add your own photos in Media → Library and set them as featured images.
How do I change the font?
Customize → Garagio options → Style and fonts → heading and body font. All fonts are included in the theme; no Google Fonts requests.
How do I remove the top bar or the phone bar on mobile?
Customize → Garagio options → Header and top bar → Show the top bar, and Mobile call bar.
Can I use the theme on more than one site?
A Regular licence covers one site (one end product). Buy one licence per site.
Support
Support is included with your purchase and covers questions about the theme's features and fixing bugs. It does not cover custom changes or problems caused by other plugins.
Email support@codememory.com with your purchase code and your site address. See the changelog for what changed in each version and third-party materials for credits.