Before you start

Quartier is a WordPress theme for local businesses that both book work and sell products — a salon, a clinic, a workshop. This manual is written for the person running that business, not for a developer. It assumes you can log into WordPress and nothing else.

What you downloaded

Your download is a single quartier_main.zip. Unzip it and you have:

The plugin sits in the plugins/ folder rather than beside the theme — that is where anything you install as a plugin lives.

The plugin is not optional. Every block Quartier adds, the demo importer, the Theme Options screen, the booking connections and the structured data all live in the plugin. With the theme alone you get a site that renders, but with none of the features you bought it for. Chapter 2 installs both.

What your site needs

You do not have to check any of that by hand. Appearance → Theme Options → System requirements measures your host against the whole list, marks every row, and gives you something to send your host if one of them is short.

WooCommerce is free and installs from Plugins → Add New. Quartier works without it — you simply get the pages and none of the shop.

Right-to-left languages

Quartier is right-to-left ready. Set WordPress to Arabic, Hebrew, Persian or Urdu in Settings → General → Site Language and the whole layout mirrors itself — menus, cards, spacing, the lot. There is nothing to switch on and no separate stylesheet to load.

How the theme is put together

Four ideas explain nearly everything in this manual. Reading them now saves looking for a setting where it is not.

One product type, two behaviours. A haircut and a bottle of shampoo are both WooCommerce products. A tag called Product Mode decides which is which. A service is booked, not added to a cart, and gets its own page layout. A retail product is sold normally. Chapter 10 covers this properly.

Settings live in Theme Options; content lives where content lives. Colours, your phone number, opening hours and shop behaviour are in Appearance → Theme Options. Words and pictures on a page are edited on the page. Nothing is hidden in a third place.

The design follows your colours. Every part of the theme references colour roles — "surface", "call to action" — rather than fixed colours. Change the palette once and buttons, badges, borders and the shop follow. Chapter 16.

Every section of every demo page is an editable block. Nothing in the design is locked HTML. Click a band and its headings, images, links and list items are controls in the sidebar, while its padding, background and width are the editor's own Styles panel. If you would rather build in Elementor, the same sections exist as Elementor widgets — chapter 8.

The three demos

Quartier ships three complete starter sites. They are not colour schemes: each one is its own pages, products, photography, header and footer.

You import one of them. A site holds one demo's content at a time — see #first-run-import-a-demo.

How to read this manual

Chapters run in the order you will meet them: install, import a demo, set your details, then edit. If you are already up and running and want one specific thing, use the filter box at the top of the sidebar.

Two chapters are worth reading even if you skim the rest:

• #the-product-page-field-by-field — the single page in this theme that draws from the most places.
• #troubleshooting — read it once now so it is familiar when you need it.

Installing

Two installs: the theme, then the plugin. Ten minutes, no settings to decide yet.

Install the theme

1. In WordPress, go to Appearance → Themes → Add New → Upload Theme.
2. Choose quartier.zip from your download and click Install Now.
3. Click Activate.

If WordPress refuses the upload with a size error, your host limits file uploads. Either raise the limit or upload the unzipped quartier folder to wp-content/themes/ over FTP — both give the same result.

Upload the right zip. quartier_main.zip is the whole download, not a theme. WordPress will reject it. Unzip it first and use quartier.zip.

Install the plugin

The moment the theme activates it will tell you the plugin is missing, with a button that installs it for you:

Click Install Quartier Companion and you are done. If you prefer to do it by hand, or the button is not there:

1. Plugins → Add New → Upload Plugin.
2. Choose plugins/anps_theme_plugin.zip from your download.
3. Install Now, then Activate.

The child theme — only if you edit theme files

quartier-child.zip is in your download and most people should ignore it. Everything on the Theme Options screen, the Site Editor and the Custom CSS box already survives an update.

Install it if you plan to edit theme files — a template, a PHP function, a stylesheet. Changes made directly to the Quartier folder are wiped the next time you update; changes in the child theme are not.

1. Appearance → Themes → Add New → Upload Theme, choose quartier-child.zip.
2. Install Now, then Activate.

Quartier itself must stay installed — the child borrows everything from it. Your settings, pages, menus and demo content are untouched by the switch.

Install WooCommerce

Skip this if you are not selling anything or taking bookings.

Plugins → Add New, search for WooCommerce, install and activate. Run its setup wizard — currency, country and tax matter, and Quartier does not replace any of it.

Check it worked

You should now have, in the left-hand admin menu:

• Appearance → Theme Options — the theme's own settings screen
• Appearance → Menus — your navigation menus
• Appearance → ANPS Club Licence — licence key and automatic updates, see #licence-and-updates
• Team — the people who appear on service pages and in the team section
• Locations — your branches, if you run more than one
• Booking Requests — enquiries from the built-in booking form
• Messages — submissions from the contact form

If Theme Options is missing, the plugin is not active. Check Plugins and activate it.

What happens next

On first activation the theme sends you straight to the demo importer, which is the next chapter. If you skipped past it, it is at Appearance → Theme Options → Demo import and nothing has been lost.

First run: import a demo

A demo import fills a fresh site with the pages, products, images, menu and colours from the design you saw on the preview. It is the fastest way to a site that looks finished, and the easiest way to learn the theme: you get working examples of every page to take apart.

You do not have to import one. Skip to the next chapter and build from empty pages if you prefer.

Import

1. Go to Appearance → Theme Options → Demo import.
2. Pick a demo — Aura, Vita or TorqueWorks. Preview opens the live demo site in a new tab if you want to look before you commit.
3. Click Import demo.

The import takes a few minutes, mostly downloading images. Leave the tab open until it finishes; a progress bar reports what it is doing.

Import into a fresh site. The importer replaces pages, posts, products, categories and menus with the demo's. It leaves your users, uploaded media and other plugins alone, but if you have already written pages you care about, back up first — or skip the demo and build from patterns instead.

If you have already set up Theme Options, export them first from Theme Options → Advanced → Backup. The import overwrites them.

One demo per site

A site holds one demo's content at a time. Importing a second demo removes the first one's pages, products, menu and template parts rather than piling them up, so switching from Aura to TorqueWorks leaves a clean TorqueWorks site rather than a hybrid. That is deliberate: WordPress resolves a template by name and stores your colours once, so two demos cannot coexist without one of them looking broken.

You can still mix the looks afterwards — the style pickers described in #theme-options-tab-by-tab let you keep one demo's pages with another demo's blog styling, top bar or shop layout.

If Elementor is installed

If Elementor is active when you import, the demo card carries an Elementor version pill and the import builds its pages as Elementor content instead of blocks. Same pages, same design — built in a way you can open in Elementor. See #building-pages-with-elementor.

Deactivate Elementor first if you want the block version.

If the tab warns about your hosting

A demo moves a lot of content and images in one go. If your server's limits are too low for that, an orange notice appears above the demos listing exactly which settings are short and what they should be. The badge at the top right of the screen says Host checks passed when there is nothing to report.

It is not a bug in the theme and you cannot fix it from WordPress — send the list to your host and ask them to raise those values. Importing anyway usually works for a while and then stops part-way, which leaves a half-built site.

What it changes

After the import

Work through these in order — they are the things that are yours, not the demo's:

1. Appearance → Theme Options → Business info — your name, phone, email, address and opening hours. This one screen feeds the header, the footer, the contact page, the map, the mobile call button and your Google listing data.
2. Settings → General — site title and tagline. The header wordmark is your site title, unless you upload a logo on the #theme-options-tab-by-tab.
3. Appearance → Menus — the demo's menu is there; rename or re-point items.
4. Team (and Locations, if the demo ships branches) — replace the demo people and addresses with yours.
5. Products — delete the demo products when your own are in, or edit them in place if the shape fits.

Everything else can wait. The site is live-able as soon as Business info is yours.

Starting empty instead

If you skipped the demo:

1. Pages → Add New, publish a page called Home.
2. Settings → Reading → Your homepage displays → A static page, choose it.
3. Edit the page and add patterns — see #building-pages.

Theme Options, tab by tab

Appearance → Theme Options is the theme's own settings screen. Down the left is a list of panels, grouped into Design, Content, Business and System, with the demo importer as the card above them.

Changes are collected in the bar at the bottom of the screen and written when you press Save changes — Discard throws them away. Only the fields you actually edited are written, so two people can work on different panels without overwriting each other.

The strip at the top right always shows the theme version, the demo you imported, and whether the host checks passed.

Theme styles

Colours, fonts and the type scale for the whole site. These are saved to the Site Editor's own styles, so Appearance → Editor → Styles shows the same values.

Colours

Preset applies a whole demo look at once — its colours, its fonts, its section styling and its header, footer and shop layout. Applying one replaces every colour and discards individual tweaks, so the screen asks you to confirm first. Leave it on Automatic to follow the demo you imported.

Below the preset, six colours you can change one at a time:

Changing one colour changes it everywhere it is used, including in WooCommerce. That is the point of the system — see #colours-fonts-and-spacing for the longer version.

Fonts

Two dropdowns, Heading font and Body font, listing the six typefaces Quartier ships plus anything you have added. Add a Google Font… searches the whole Google library and copies the files to your own server; Upload a font… takes you to WordPress's font library for a licensed typeface of your own. Both are covered in #colours-fonts-and-spacing.

Type scale

Four sizes in pixels: Hero / H1, Section heading (H2), Sub-heading (H3) and Body text. Leave a box empty to keep the theme's own responsive size, which shrinks sensibly on phones. Fill it in and that size is used everywhere, on every screen.

Header

Layout — three wireframe cards. Aura (logo left, actions right), Centered (logo and nav stacked and centred), Minimal (logo and nav only). Click a card and the whole site follows.

Top bar style — which demo's version of the thin strip above the header you get: Automatic follows the demo you imported, or pick Promo line (Aura), Phone & hours (Vita) or Notice (Torque) to mix another one in without changing anything else. Its words are edited in the Site Editor — see #header-top-bar-and-footer.

Logos — three image pickers:

The main logo is the master switch: the sticky and mobile logos only take effect once a main logo is set, and each falls back to the main one when empty.

Header elements — three switches:

• Disable sticky header — the header stops following you down the page.
• Disable top bar — removes the strip above the header everywhere.
• Disable search icon — removes the search from the header only. Search elsewhere on the site keeps working.

The menu itself is not here — it is in Appearance → Menus, see #menus.

Footer

• Footer columns — 2, 3 or 4. The footer's authored content is redistributed into that many, and stacks to one on small screens.
• Copyright text — the line at the very bottom. Type {year} for the current year and {site} for your site title, and it never goes stale.
• Sticky mobile bar — the Call / Book / Directions bar pinned to the bottom of a phone screen. Automatic shows it only on the demos built around it, Always show turns it on anywhere, Never show removes it. See #shop-extras.

Site layout

Content width (px) — how wide the text column runs, 600–1920, 1200 by default. Sections with a full-width background still stretch edge to edge; only their inner content is capped. It applies in the editor too, so what you build is what you see.

Blog

Which page lists your posts is a WordPress setting — Settings → Reading → Posts page. This panel styles what happens there.

• Posts per row — 2, 3 or 4 cards side by side. It drops to two and then one on smaller screens by itself, and a single Post grid block can still override it from its own sidebar.
• Sidebar — No sidebar by default. Set it to left or right and a column appears beside the post list and beside each article, holding search, categories, recent posts and tags. On a phone it moves below the content.
• News page style and Single post style — which demo's look the post list and one open post wear. They are independent, so you can run Vita's pages with TorqueWorks' article styling. Both follow the demo you imported until you change them.

What is in the sidebar is edited in Appearance → Editor → Patterns → Blog sidebar. See #building-pages.

WooCommerce

• Products per row — how many products sit side by side in the shop grid.
• Rows per page — how many rows load before pagination. Products per page is simply rows × per row.
• Showcase mode — nothing can be purchased — turns the store into a catalogue: prices still show, but Add to cart and checkout are removed.
• Show services in the main shop — off by default, so /shop/ lists physical products only and services live on their own page. Turn it on for one blended catalogue.

Payments, shipping and tax stay in WooCommerce → Settings; Quartier does not duplicate any of it.

Business info

The most important panel in the theme. Everything here is used in several places at once, so you type your phone number exactly once.

Opening hours is a row per day with an open and a close time. Add hours gives a day a second row — mornings and evenings with a break between. Closed all day empties it, and the pill on the right of each row reads Open or Closed so you can check the week at a glance. Times that run past midnight are understood: 22:00–02:00 closes at two the following morning.

If you run more than one branch, each branch keeps its own hours — see #locations.

Booking

• Booking engine — Auto-detect follows whichever booking plugin you have installed, and the label tells you what it currently resolves to. Choose a specific one if you run more than one. Choosing an engine you have not installed yet is harmless; it takes over the moment the plugin appears.
• Booking page — where Book goes when the chosen engine has no embed of its own. Worth setting even with an engine active: it is the fallback that keeps the button from going nowhere, and the panel warns you when neither is set.
• Custom booking shortcode — for a booking plugin Quartier has no built-in connection to. Paste its shortcode here; filling it in is what makes the Custom shortcode engine selectable at all.
• Turnstile site key / secret key — optional free spam protection from Cloudflare for the built-in booking and contact forms. Both keys or neither.

The table at the bottom lists every engine Quartier knows, whether it is installed, and what it can do — embed inline, open in a modal, or only deep-link. Re-check installed plugins refreshes it after you install one.

Full detail in #booking.

Advanced

Custom CSS, added to every page. Use the theme's colour variables rather than fixed colours so your CSS follows a palette change:

.my-thing {
	color: var(--wp--preset--color--cta);
	border: 1px solid var(--wp--preset--color--border);
}

Backup, below it, saves every setting on this screen to a small .json file and reads one back.

Worth doing before you import a demo or hand the site to someone else — an import overwrites settings, and this is the only way back. It is also how you copy a finished setup from a staging site to the live one: export there, import here.

Two things are deliberately left out of the file:

• Colours and fonts, which live in Appearance → Editor → Styles rather than in these settings.
• The Turnstile secret key, which is a password and has no business sitting in a file you might email. Re-enter it after importing.

Importing replaces every setting at once and asks first. Anything in the file that Quartier does not recognise — a setting from an older version, a stray line from hand-editing — is skipped and counted, never applied.

System requirements

A read-only report in four groups: what your server allows, which PHP extensions are present, how WordPress is configured, and which versions of Quartier, the plugin, WooCommerce and your demo are running.

A green OK means fine, an amber Check means worth knowing, a red one means something here will break. Anything red also appears on the Demo import tab, because a demo import is usually where a short server limit shows up first.

Copy all as text puts the whole table on your clipboard as plain text. If you ever open a support ticket, paste it in — it answers the first five questions before they are asked.

Nothing on this panel can be changed from WordPress. The server values are your host's to raise; send them the report.

Demo import

Covered in #first-run-import-a-demo.

Menus

Quartier uses the classic WordPress menu screen — the one you already know — rather than editing navigation inside the Site Editor.

Build the menu

Appearance → Menus.

1. Create a new menu, give it a name, Create Menu.
2. Tick pages on the left and Add to Menu, or use Custom Links for anything else.
3. Drag to reorder. Drag an item slightly right to make it a sub item — that becomes a dropdown.
4. Under Menu Settings, tick Primary (header).
5. Save Menu.

The header updates immediately. There are two locations:

A demo's menu points at the demo's pages, not at fixed web addresses, so every item still works after the import lands on your own domain. Re-point one by deleting it and adding your own page in its place.

The current page

The item for the page you are on is shown in your call-to-action colour automatically. Nothing to configure.

Long dropdowns become a mega menu

A menu item with six or more sub items stops being a tall single column and becomes a wide panel across the header, in as many columns as fit. A workshop with forty services gets a usable menu without doing anything.

To decide for yourself, use the per-item CSS Classes field — tick it on first under Screen Options at the top of the Menus screen, then open the item and type:

On phones neither applies: the drawer already shows sub items as an indented list.

On phones

Below 782px wide the menu collapses into a hamburger button, and tapping it opens a drawer under the header. Sub items are shown indented rather than as hover dropdowns, because a hover menu on a touch screen is a trap.

If the header shows no menu

Almost always one of two things:

• No menu is assigned to Primary (header). Tick it under Menu Settings.
• You imported a demo, which brings the menu but not the assignment. Tick the box once and it stays.

Logged in as an administrator you will see a small "Assign a menu to this location" link in place of the menu — visitors see nothing at all.

Header, top bar and footer

These are template parts — pieces of layout shared by every page, edited once. They live in the Site Editor rather than on a page, because they are not part of any single page.

Their shape — which layout, how many columns, whether the strip shows at all — is a setting on the #theme-options-tab-by-tab and Footer panels of Theme Options. Their contents are edited here.

Where to edit them

Appearance → Editor → Patterns, then under Template parts:

Click one to open it, edit like any page, then Save. The change appears everywhere at once.

Each demo ships its own header, top bar and footer, so the list also holds demo-named variants. The one your site uses follows the demo you imported and the style pickers in Theme Options; editing the one that is live is the one that matters.

The top bar

Ships with whatever its demo uses — a promo line, a phone and hours, a call-out notice. Replace it with anything: your phone number, a delivery promise, a seasonal offer. Delete the paragraph and leave the part empty and the strip disappears.

To remove it site-wide instead, use Disable top bar on the #theme-options-tab-by-tab — that skips it entirely rather than hiding it. To wear a different demo's top bar, use Top bar style on the same panel.

The header

What each piece is, so you know what you are deleting if you delete it:

• Logo — your site title from Settings → General, unless you upload an image under Theme Options → Header → Logos. Three slots there cover the header, the scrolled sticky header and small screens.
• Menu — from Appearance → Menus, see #menus.
• Search, wishlist, cart — blocks; delete any you do not want.
• Phone — reads your Business info phone. Hidden below 1024px, because the mobile bar already has a Call button.
• Book — the booking button. Where it goes is decided on the #booking.

The header layout — where those pieces sit — is a setting, not an edit: three options on the #theme-options-tab-by-tab.

The footer

Columns of ordinary blocks. Edit the link lists directly; they are lists, not a menu. How many columns show is the Footer columns setting, and the line at the very bottom is Copyright text.

Undoing an edit

If you break a part, you do not have to rebuild it. In Appearance → Editor → Patterns, find the part, open the ⋮ menu and choose Clear customizations. It reverts to the version the theme ships, losing your edits to that part and nothing else.

Worth knowing. Once you save any edit to a part, your saved version is what the site uses — theme updates stop changing it. That is deliberate (an update should never overwrite your words), but it means a part you edited in March will not pick up an improvement shipped in June until you clear customizations.

Building pages

There are two ways to build a page in Quartier. This chapter is the WordPress editor; #building-pages-with-elementor is Elementor. Everything here applies whichever you use — the same sections, the same content, the same settings.

Editing what the demo built

Every section of every demo page is an ordinary block you can edit. There is no locked HTML anywhere in the design.

Click a band — a hero, a services grid, a reviews row — and the settings sidebar fills with its own controls:

• Lists are repeaters. Slides, stats, review cards, FAQ rows: add, remove and reorder them in the sidebar.
• Images are media pickers. They open your media library like any other image.
• Grids of real content read your real content. A products band, a services grid, a team row or a locations band queries WooCommerce or your own Team and Locations screens — you choose how many and from which category, not which individual items to paste in. Change a product, and the band changes.
• Padding, background colour and width are the editor's own Styles tab. Every section supports them, so a band can be tightened, recoloured or pushed full-width without CSS.

The canvas shows the real section as you edit, not an approximation.

Add a section

Quartier ships 32 patterns — pre-built sections you drop into a page and edit.

1. Pages → Add New (or edit an existing page).
2. Click the + in the top left, then the Patterns tab.
3. Choose a category down the left — they all start with Quartier:.
4. Click a pattern to insert it, then edit the text and images in place.

Categories, and what is in them:

A pattern is a starting point, not a fixed thing. Once inserted it is ordinary blocks: delete a column, change a heading, swap an image.

Blocks you can add anywhere

Beyond the demo section blocks, Quartier adds a set of general-purpose blocks. Find them in the inserter by name:

Page templates

Every page can use a different frame. In the page editor, open the settings sidebar (the gear), Page → Template:

The demo's block-built pages use No title, which is why their headings look like part of the design rather than a page title bolted on top.

Set your home page

Settings → Reading → Your homepage displays → A static page, then choose it.

A blog

Settings → Reading, set Posts page to a page you created for it. Some demos ship one already — it is called News, Advice or Journal depending on which one — in which case this is done for you.

Everything else is under Appearance → Theme Options → Blog:

• Posts per row — 2, 3 or 4 cards side by side. It drops to two and then one on smaller screens by itself.
• Sidebar — off by default. Set it to left or right and a column appears beside the post list and beside each article, holding search, categories, recent posts and tags. On a phone it moves below the content.
• News page style and Single post style — which demo's look the blog wears. These are independent, so you can run Vita's pages with TorqueWorks' article styling if that is the mix you want. Both follow the demo you imported until you change them.

The post list, the category, tag, author and date archives, search results and a single article all use the same four templates, skinned by the two style settings — so you never have to rebuild a blog layout to change its look.

Changing what is in the sidebar

Appearance → Editor → Patterns → Blog sidebar. It is ordinary blocks — drag them around, delete the ones you do not want, add anything else. The Recent posts item is the same Post grid block the news page uses, set to one column.

Editing it while the sidebar is switched off is harmless; nothing shows until you turn it on.

Building pages with Elementor

Quartier supports Elementor as a second way to build page content. Every section block in the theme also exists as an Elementor widget, rendering exactly the same thing — so you can build in Elementor without losing the design.

Elementor is optional and free. If you never install it, nothing in this chapter happens and your site is unchanged.

What Elementor does and does not cover

That split is deliberate. The header and footer are one set of settings and one template part each; letting a page builder own them would mean maintaining the same header twice.

Getting started

1. Plugins → Add New, search for Elementor, install and activate.
2. Import a demo — see below — or open any page and click Edit with Elementor.
3. In Elementor's widget panel, open the Quartier Sections category.

Every widget in there is a section from the theme: the heroes, services grids, product bands, reviews, FAQ, stats, contact and CTA bands of all three demos, plus the Locations and Post grid blocks. Drag one in and its fields appear in the left panel exactly as they do in the block sidebar.

Importing a demo as Elementor pages

Install and activate Elementor before you import. The demo card on Theme Options → Demo import then shows an Elementor version pill, and the import builds the demo's pages as Elementor content instead of blocks.

Same pages, same design, same products — the difference is what opens when you press Edit. Deactivate Elementor and re-import if you want the block version back.

The importer also points Elementor's own global colours and fonts at the demo's palette, so anything you add from Elementor's stock widgets matches the theme out of the box.

Editing a Quartier widget

Each widget's controls mirror the block's:

• Content holds the section's fields — headings, text, links, list items.
• Repeaters add and reorder cards, slides, rows.
• Images are Elementor's own media picker.
• Colours are Elementor colour pickers, so they accept any colour and your Elementor global colours, seeded with the theme's palette.
• Band padding is a responsive control at the bottom of the content tab. Leave it empty and the theme's own spacing stands, including how it changes on a phone.

Everything Elementor gives every widget — its own margin, background, motion effects, responsive visibility — works on top of that.

The page template

Elementor pages need room to run edge to edge. In the page editor sidebar, set Template to:

• Elementor (full-width content) — header and footer, unconstrained content.
• Elementor landing (no header or footer) — a campaign page with neither.

The demo's Elementor pages are set up this way already. A Quartier band placed on the ordinary No title template will be capped to the content width and lose its full-bleed background.

Mixing the two

Block pages and Elementor pages can live on the same site. The blog, the shop and the product pages keep rendering from the theme's templates either way, and Theme Options keeps driving colours, fonts, business info and booking for both.

Turning Elementor off

Deactivate the plugin. Pages you built in Elementor go back to whatever their WordPress content is, which for a demo-imported page is empty — so keep a backup, or re-import the block version of the demo. Pages you built with blocks are unaffected.

Products: the shop

Products in Quartier are ordinary WooCommerce products. This chapter is the things Quartier adds on top.

Add a product

Products → Add New, then fill in what you always fill in: title, description, price under Product data, and a Product image on the right.

Two Quartier things to know before you save:

• The Product image is what shows on shop cards. Square photos on a plain background look best; the theme crops to a square.
• Product gallery images become the thumbnail strip under the main photo on the product page.

Short description

The Product short description box, below the main editor, is the sentence under the price on the product page. One or two lines. The long description is for the Description tab further down the page — see #the-product-page-field-by-field.

Badge and "from" price

In the Product data box, open the Quartier details tab:

• Badge — free text shown as a chip over the product image on shop cards: Bestseller, New, Sale, Last few. Leave empty for none.
• Show price as "from" — prints from €39 instead of €39, for anything where the price is a starting point.

Both are per product. There is no limit on how many products carry a badge, but a shop where everything is a bestseller says nothing.

Categories

Products → Categories. Two things Quartier does with them:

The tiles on the home page are your real categories — image, name, and a live count of products. To give a category its picture, edit the category and set its Thumbnail. Categories with no products in them are skipped.

The order is the order in Products → Categories, which you can drag. The tile band shows the first four by default.

The shop sidebar filters are also built from categories, plus any product attributes you set up under Products → Attributes.

What the shop page shows

/shop/ lists your retail products only — services are kept on their own page, because a haircut in a grid next to a bottle of shampoo confuses both. If you would rather have one blended catalogue, turn on Show services in the main shop on the #theme-options-tab-by-tab.

The banner photo at the top of the shop is the featured image of the Shop page (Pages → Shop). No featured image, no banner — the band becomes text only.

How many products show

Theme Options → WooCommerce sets Products per row and Rows per page. Products per page is simply the two multiplied, so 4 × 3 loads twelve before pagination. The grid still collapses to fewer columns on smaller screens.

Selling nothing

If you want a catalogue with no checkout, turn on Showcase mode on the WooCommerce panel. Prices still show; Add to cart and the checkout disappear site-wide, and the products stay browsable.

Products: services

A service is a product you book rather than buy: a haircut, a treatment, a consultation. Quartier sells both from the same Products screen, and one setting decides which behaviour a product gets.

Make a product a service

Edit the product. On the right, under the Publish box, find Product Mode and type service, then Add.

Products with no Product Mode are treated as retail. You can also see and change the mode from the Products list — there is a Product Mode column, and Quick Edit sets it.

What changes when it is a service

None of that is per-product configuration — it follows from the mode.

Duration

Services carry a Duration attribute: the chip on cards ("45 min") and the step between booking start times.

The first time the plugin runs it creates a Duration attribute for you with 30 / 45 / 60 / 90 / 120 min ready to pick. On the product, open Product data → Attributes, choose Duration, tick the value, Save attributes. Add different lengths under Products → Attributes → Duration → Configure terms.

Service details

Everything the service page shows beyond price and description lives in Product data → Quartier service details:

1. What’s included — one item per line. Renders as a ticked list.
2. How it works — one step per line, written as Step title | what happens in it. The part before the bar becomes the step heading.
3. Add-ons — one per line, Add-on name | price. These appear as toggles on the booking panel and change the estimated total.
4. Booking times — leave empty and start times are generated from your opening hours and this service's duration. Fill it in to override: one time per line or comma-separated, 24-hour clock.
5. Offered by — tick the people on your Team screen who perform this service. Leave every box unticked to offer it with the whole team.
6. Good to know — one per line, Question | Answer. Becomes the FAQ, and is published as FAQ structured data.

The bar (|) separator looks odd the first time and is quick the tenth. There is no repeater to drag.

Your team

Team → Add New for each person: name, a photo as the featured image, and a role. They appear on the booking panel of every service they are ticked for, in the Team Grid block and in the team pattern.

A service with nobody assigned still books — the panel simply does not ask who.

The services page

The demo ships a Services page listing every service. If you are building from scratch, add the Quartier: Services patterns to a page, or link to the services archive at /product-mode/service/, which is generated for you and needs no page at all.

The product page, field by field

The product page pulls from more places than any other page in the theme. This chapter is a map: every region on the page, and the box that fills it.

Nothing here is "hardcoded" — if a region is empty on your product, it is because the box behind it is empty.

The screenshots below are Aura's product page. Each demo has its own — the TorqueWorks one leads with fitment and specifications, for example — but the boxes that fill them are the same ones described here.

The buy box

The top half, next to the gallery.

1. Photos — Product image, plus Product gallery for the strip beneath.
2. Title — the product title. The line above it is its category and Brand attribute.
3. Stars and count — real reviews, see Reviews.
4. Price — Product data → General, or per variation.
5. The sentence under the price — Product short description, the box below the main editor.
6. Quantity and Add to cart — WooCommerce. Size buttons come from a variation attribute.

The photos: Product image is the large one, Product gallery the strip below it.

The Quartier details panel

Product data → Quartier details fills the lower half of the page.

1. Ingredients — becomes the "Ingredients" tab. Leave empty and no tab appears.
2. How to use — becomes the "How to use" tab, same rule.
3. Highlights — one per line; the ticked "Why you'll love it" list beside the tabs.
4. Badge — the chip over the image on shop cards. Not shown on this page.
5. Show price as "from" — prefixes the price with from.
6. In-salon service — see The in-salon band.

The Description tab — the first one — is the product's main description, the big editor at the top of the page. So the tab row is: your description, then each Quartier details box that has something in it.

Reviews

The score, the count and the star bars are all computed by WooCommerce from real reviews. Manage them under Products → Reviews, or on the product's own Reviews tab.

Nothing displays until a product has at least one approved review — no reviews, no stars, no review section. That is deliberate: a five-star average with no reviews behind it is a lie your customers can check.

The demo's products have reviews written into them; delete them when you put your own products in.

The in-salon band

The band low on the page — a photo, a heading, and a card offering a service.

It reads a different product: the one chosen in Quartier details → In-salon service. From that service it takes the photo, the name, the duration chip, the price and the link. So a shampoo can point at "Repair & Gloss Treatment" and the band fills itself.

• Choose nothing and the whole band disappears from that product.
• The heading and the sentence are the block's own — click the band in the Site Editor and edit them in the sidebar.
• The service must be published. Draft or deleted, the band vanishes.

This is the single most-asked question about this theme. If your band is empty, the product has no in-salon service chosen.

Pairs well with

The row at the bottom is automatic: your most popular retail products, excluding this one. Nothing to fill in. It is a Product Collection block in the single-product template, so you can change what it queries in the Site Editor — newest, same category, hand-picked.

Where each thing is edited, in one list

Booking

Quartier does not include a booking engine. It connects to the one you choose, and ships a simple request form for people who do not want one.

Choosing an engine

Appearance → Theme Options → Booking → Booking engine.

Auto-detect — the default — uses whichever supported booking plugin is active:

Pick a specific engine when more than one is active. Picking one you have not installed yet is safe — it takes over the moment the plugin appears.

The table under the settings lists every engine, whether Quartier can see it, and what it is able to do on your pages — embed its form inline, open it in a modal, or only link out to it. Re-check installed plugins refreshes it after you install one.

The Book button never dies. If the chosen engine is missing or has no embed, Quartier falls back — first to your Booking page, then to the built-in request form. A visitor never clicks Book and lands nowhere.

The built-in request form

With no booking plugin, Book opens a short form: name, contact, preferred day and time, message. Submissions land in Booking Requests in the admin menu, and an email goes to your admin address.

It is a request, not a confirmed appointment — nothing is reserved and no payment is taken. For real availability and payment, install one of the engines above.

Spam protection

The form has a hidden honeypot field, which stops most bots on its own. For more, add free Cloudflare Turnstile keys on the Booking tab:

1. Sign in at Cloudflare, add a Turnstile site for your domain.
2. Paste the site key and the secret key into Theme Options → Booking.
3. Both, or neither — one key alone does nothing.

The booking panel on a service page

Service pages carry a panel with the price, the staff, a day and time picker, add-ons and an estimated total.

Where it gets each thing:

With a booking plugin active, that panel hands over to the plugin's own form instead.

Gift cards

A gift card is a normal WooCommerce product with a chooser on its page: pick an amount, add a message, buy it.

Set one up

1. Products → Add New, name it Gift Card.
2. Set a price — the default amount.
3. Publish, and give it a Product image.
4. Put the Gift Card block on the page where you sell it (the demo has a Gift Cards page already), and pick the product in the block's sidebar.

The block offers preset amounts and a message field; what the buyer chooses is carried into the cart and shown on the order.

What it does not do

Quartier renders and sells the card. It does not generate redeemable coupon codes — that is a gift-card plugin's job, and any of the usual ones can take over the fulfilment side while Quartier keeps the page.

For a small business the manual route works: the order tells you what was bought and for whom, and you issue the card.

Contact

The form

The demo's contact page uses the Contact Form block: name, email, subject chips, message. Add it to any page from the block inserter.

Submissions are stored in Messages in the admin menu and emailed to your admin address. Storing them means a mail problem never loses an enquiry.

The same Turnstile keys as #booking protect this form.

Address, phone, email

Do not type them into the page. They come from Theme Options → Business info through the Business Info block, so one edit updates the contact page, the footer, the header and your structured data together.

The map

The map block shows an address card, a Get directions link, and — after the visitor agrees — an embedded map.

It does not load Google's map until the visitor clicks accept. Before that there is no request to Google and no cookie, which is what keeps the page GDPR- clean by default. The address card and the directions link work regardless, so the page is useful even if nobody ever accepts.

The address it points at is your Business info address. No address, no map.

If you run more than one branch, put the Locations block on this page instead — it gives each branch its own card, hours and directions. See #locations.

Locations

If you run more than one branch, each one is a Location: its own address, phone, photo, opening hours and page. One branch needs none of this — Business info already covers a single address.

The Vita demo ships two clinics and is the working example.

Add a branch

Locations → Add new:

• Title — the branch name, the way you would say it: Nordstadt, Riverside.
• Featured image — the photo on its card and at the top of its page.
• Editor — anything you want on the branch's own page.

Then the Location details box underneath:

A branch's hours are its own. The hours in Theme Options stay the business's overall hours, and search engines are told both.

Showing them

Add the Locations block to any page — usually the home page and the contact page. It renders your branches as cards: photo, address, whether they are open right now, a Book button and a directions link. The heading and intro above the cards are the block's own, in the sidebar.

Each branch also gets its own page at /locations/<name>/, linked from its card.

What search engines see

Every published location is published as its own business listing, with that branch's address and hours, alongside the organisation-level one from Business info. That is what makes a branch findable in its own neighbourhood rather than all of them collapsing into the head office.

Nothing to configure — filling in the address and hours is the whole job. See #seo-and-structured-data.

Colours, fonts and spacing

How the colour system works

Quartier never names a colour in its design. Every part of the theme asks for a role instead — "the call-to-action colour", "the surface colour" — and the palette decides what those are.

The practical effect: change Buttons / CTA once and every filled button, price accent, badge, active menu item, focus ring and WooCommerce button follows. You do not hunt for the other twelve places.

Change the palette

Appearance → Theme Options → Theme styles.

Preset applies a complete look: the palette, the fonts, the section styling and the header, footer and shop layout of one demo. Applying one replaces every colour and discards individual changes, which is why it asks first. Use a preset to get close, then adjust.

Leaving it on Automatic follows the demo you imported. Choosing another demo's preset is how you wear, say, TorqueWorks' colours on a site built from Vita's pages.

The six editable colours are listed in #theme-options-tab-by-tab. Two worth understanding:

• Page background and Text are a pair. If you darken the background, lighten the text in the same sitting — the theme will not do it for you, and everything else is built on that contrast.
• Secondary is used at low opacity for quiet marks. A very light secondary effectively disappears.

Keep contrast readable. Aim for text that stays legible on its background. Pale grey on cream looks refined on your monitor and is unreadable on a phone outdoors — and accessibility law in several countries has an opinion about it.

Fonts

Quartier ships six typefaces, self-hosted — Fraunces and Inter by default, plus the faces the other demos use. Self-hosted means no request ever leaves your visitor's browser for Google, so no third-party tracking and no consent banner on their account.

Appearance → Theme Options → Theme styles → Fonts picks the heading and body typeface for the whole site. Two dropdowns, one Save.

Adding a Google Font

Theme Options → Theme styles → Fonts → Add a Google Font…

Search the whole Google Fonts library — around 1,900 families — filter by category, and click Add. The font is then in both dropdowns; pick it and Save fonts.

The file is copied to your own server. Quartier downloads the font into wp-content/uploads/fonts/ and serves it from there. Your visitors never contact Google, which means no third-party request slowing the page down and nothing to declare in a cookie banner. This is the part most themes get wrong: a plain Google Fonts dropdown loads the font from Google on every page view, which several EU courts have ruled is a privacy violation.

Four weights are installed per family — regular, italic, semi-bold and bold — which is what the design uses. Modern families are variable fonts and cover every weight in one file.

Uploading your own font file

For a licensed or custom typeface, use WordPress's own font library: Appearance → Editor → Styles → Typography → Fonts, then +. The Upload a font… button on the Fonts section takes you there. Add a .woff2, .woff, .ttf or .otf per weight, and it appears in the Theme Options dropdowns alongside everything else.

Prefer .woff2 when you have the choice. It is roughly half the size of the same font as .ttf, and every browser released in the last several years reads it.

Type sizes

Theme Options → Theme styles → Type scale has four boxes: Hero / H1, Section heading (H2), Sub-heading (H3), Body text.

Leave them empty — the theme's sizes scale with screen width, big on a desktop and sensible on a phone. Fill one in and that exact pixel size is used everywhere, on every screen. A 58px hero is striking on a laptop and hostile on a phone, so set them only if you have a reason.

Everything else in the design is sized off those four, so you are not hunting for a fifth box.

Content width

Theme Options → Site layout. How wide the text column runs; 1200px by default. Sections with a full-width background still stretch edge to edge — only the content inside them is capped. It applies in the editor too.

Custom CSS

Theme Options → Advanced. Added to every page. Reference the theme's variables so your CSS follows a palette change instead of fighting it:

/* Follows the palette */
.my-note { border-left: 3px solid var(--wp--preset--color--accent); }

/* Does not — this stays orange when you go blue */
.my-note { border-left: 3px solid #b98a3e; }

Available variables include --wp--preset--color--base, --paper, --surface, --contrast, --muted, --border, --primary, --secondary, --accent, --cta and --on-cta, each prefixed --wp--preset--color--.

Shop extras

Features that come with the theme, what they do, and how to switch them off.

Wishlist

A heart on every product card and product page. Saved in the visitor's browser, so it works without an account; if they log in later, the list follows them.

The header icon opens a drawer with what they saved. To remove the feature, delete the wishlist blocks from the header in the Site Editor.

Quick view

Hovering a product card shows Quick view, which opens the product in a dialog — photo, price, short description, add to cart — without leaving the listing. It is a block inside the product card; delete it in the Site Editor to remove it.

Instant search

The header's search opens a field that suggests products as the visitor types, with photos and prices. It searches products only.

Turn it off entirely with Disable search icon on the Header tab.

The sticky mobile bar

On phones, a fixed bar at the bottom: Call, Book, Directions.

Theme Options → Footer → Sticky mobile bar decides whether you get it. Automatic — the default — shows it only on the demos designed around it, so importing one never bolts a bar onto a site whose header already carries Book. Always show turns it on whatever you imported; Never show removes it everywhere.

Each slot fills itself: Call from your Business info phone, Book from the booking setup, Directions from your address. A slot with no data behind it is not rendered — no address, no Directions button.

Edit what is in it in Appearance → Editor → Patterns → Sticky Mobile Bar.

Product badges

The chip over a product image on shop cards — Bestseller, New, Sale. Set per product in Product data → Quartier details → Badge. See #products-the-shop.

Fitting, and other add-on services

Some things are sold and then fitted: tyres, a battery, a part. Quartier can offer that as a checkbox on the product page — add fitting at our workshop — and it becomes a real second line in the cart at the same quantity, so the total the customer sees is the total they pay.

The add-on is an ordinary product. Create it (Fitting at our workshop, priced per item), then mark it as the fitting service so the checkbox knows what to add. The TorqueWorks demo ships one already set up; the other demos ship none and the feature simply does not appear.

The tyre finder

TorqueWorks adds a width / profile / rim filter above the shop, which narrows the grid to the tyres that fit. It reads a tyre-size product attribute, so it works with your own catalogue as soon as the attribute is filled in. It is a block — delete it from the shop template if you do not sell tyres.

Showcase mode

Theme Options → WooCommerce → Showcase mode. Turns the store into a catalogue: prices still show, but Add to cart and checkout are removed. For a business that displays what it does but sells in person.

Cart and checkout

Both are WooCommerce's own block cart and checkout, wearing your colours: your fields, your buttons, your radius. Nothing about how they work is changed, so every WooCommerce payment and shipping extension behaves as its own documentation says.

The coupon field sits behind Add coupons in the order summary. To remove coupons entirely, that is a WooCommerce setting: WooCommerce → Settings → General → Enable coupons.

SEO and structured data

Quartier publishes structured data — the machine-readable description search engines read to build rich results: your business, opening hours, services, products, prices and ratings.

What it publishes, and from where

Fill in Business info properly and this is done. There is no SEO screen to configure.

Ratings are never invented. Star ratings are published only where real reviews exist, and never on the business or service listing itself — Google's guidelines forbid self-serving ratings there, and a manual action is not worth a star.

With Yoast or Rank Math installed

Quartier detects them and adds its data to theirs rather than publishing a competing copy. You keep one description of your site, not two that disagree.

If you would rather your SEO plugin own all of it, turn on Let an SEO plugin own structured data on the Business info tab. Quartier then adds nothing.

Locations

If you have added branches under Locations, each published one is also listed with its own address and its own opening hours, alongside the organisation-level listing from Business info. See #locations.

AI assistants: /llms.txt

Quartier also serves a short plain-text profile of the business at yoursite.com/llms.txt — name, what you do, opening hours, your services, your main pages. It is the same convention as robots.txt, but for assistants like ChatGPT and Perplexity: when someone asks one of them whether you are open on Sunday, the answer comes from your own data rather than a guess.

Nothing to switch on. It builds itself from Business info, your opening hours and your products, and it is marked so it never appears in search results as a page of its own.

Titles, meta descriptions, sitemaps

Not Quartier's job, deliberately. WordPress handles titles and sitemaps; an SEO plugin does the rest better than a theme can, and a theme that owns your meta descriptions holds them hostage when you switch themes.

Before you launch

• Settings → Reading — make sure Discourage search engines is off.
• Settings → Permalinks — anything except Plain.
• Business info complete, especially the address.
• Every product with a real photo and a real description.

Licence and updates

Quartier is sold in two places, and the theme is the same build in both: ThemeForest, and ANPS Club at club.anpsthemes.com. Which one you bought from decides how updates reach you.

If you bought from ANPS Club

Appearance → ANPS Club Licence. Paste the licence key from your club dashboard and click Activate.

Once it is active:

• Theme and plugin updates arrive in WordPress like any other update, on Dashboard → Updates. Both are covered by the one key.
• Check for updates on the same screen asks now rather than waiting for WordPress's own schedule, which is what you want right after a release.
• Deactivating on that screen frees the key so you can use it on another site — do that before you delete a staging site, not after.

A club membership covers the whole ANPS catalogue, which is why the screen mentions the other themes. Nothing on it is required for the theme to work.

If you bought from ThemeForest

You have no club key, and you do not need one. Leave the licence screen alone.

Updates come the way every ThemeForest theme's do: download the new quartier_main.zip from your Downloads page and install it over the old one. Either use the Envato Market plugin, or upload quartier.zip again in Appearance → Themes and choose Replace current with uploaded, then do the same for the plugin.

Before you update, either way

• Your settings, pages and content are untouched by an update. The theme files are replaced; the database is not.
• Edits to template parts survive too — see the note at the end of #header-top-bar-and-footer.
• Edits to theme files do not. That is what the child theme in your download is for; see #installing.
• Take a settings backup first anyway: Theme Options → Advanced → Backup → Export settings. It takes five seconds.

Support

Support runs through wherever you bought the theme — the Support tab on the ThemeForest item page, or your club dashboard. Whichever it is, start by pasting the report from Theme Options → System requirements → Copy all as text; it answers the first five questions before they are asked.

Troubleshooting

Every entry here is something that has actually happened, with the fix.

The header shows no menu

A menu exists but is not assigned. Appearance → Menus → Menu Settings → tick Primary (header) → Save Menu.

This is normal right after a demo import: the import brings the menu but not the assignment. One tick, once.

A demo import left something missing

Re-run the import — it is safe to repeat. If images are missing, your host may have timed out mid-download; importing again fetches what is missing.

My colours reverted

You applied a preset on the Theme styles tab. A preset replaces the whole palette by design, including individual colours you had changed. Set your colours again after choosing a preset, not before.

Pages return "404 Not Found"

Settings → Permalinks → Save Changes. Nothing to change — saving rebuilds WordPress's URL rules. This is the fix for a surprising share of "the shop disappeared" reports.

The in-salon band on a product is empty

The product has no service chosen in Product data → Quartier details → In-salon service, or the service it points at is no longer published. See #the-product-page-field-by-field.

Products show no stars

Stars appear only when a product has at least one approved review (Products → Reviews). This is intentional.

The map shows nothing

Two possibilities: no address in Theme Options → Business info, or the visitor has not accepted the map yet — it does not contact Google until they do.

The Call or Directions button is missing on mobile

Each slot needs its data: Call needs a phone number, Directions needs an address. Both are in Business info.

Theme Options is gone from the menu

The companion plugin is deactivated. Plugins → Quartier Companion → Activate. Nothing is lost while it is off — your settings are stored and come back with it.

The site looks unstyled

Usually a partial upload. Re-upload the theme; if you installed by FTP, check that wp-content/themes/quartier/assets/dist/ arrived with the rest.

A block shows "This block has encountered an error"

Almost always a plugin conflict. Deactivate other plugins one at a time to find it. If it is a page you edited, the block's content may also have been pasted in a way the editor cannot parse — undo and redo the edit.

Importing a second demo removed the first one

That is by design — a site holds one demo at a time, and a half-replaced site looks broken in ways nobody can diagnose. If you only wanted another demo's look, do not import: change Preset on #theme-options-tab-by-tab, or the per-feature style pickers for the top bar and the blog.

My Elementor page is squeezed into a narrow column

The page is on the wrong template. Open it, and in the sidebar set Template to Elementor (full-width content) — or Elementor landing for a page with no header or footer. See #building-pages-with-elementor.

There is no "Quartier Sections" category in Elementor

Either Elementor is not active, or the companion plugin is not. Both have to be running; the widgets only register when Elementor is there to register them with.

I deactivated Elementor and the pages are blank

An Elementor page stores its layout in Elementor, so with the plugin off there is nothing left to render. Re-activate it, or re-import the demo with Elementor switched off to get the block-built version of the same pages.

The Locations band shows nothing

There are no published entries under Locations, or the block is set to a count of zero. A single-branch business does not need them at all — the address in Business info covers it. See #locations.

The fitting checkbox is missing on a product

Nothing on the site is marked as the fitting service. It is an ordinary product that has to exist and be published before the checkbox can add it. See #shop-extras.

Updates are not showing on Dashboard → Updates

If you bought through ANPS Club, the licence key is missing or deactivated: Appearance → ANPS Club Licence. If you bought on ThemeForest, updates never appear there — you download the new zip and install it over the old one. See #licence-and-updates.

An edit to the header or footer did not take

You edited a template part and did not save, or you edited the page instead of the part. Parts are saved in Appearance → Editor → Patterns and have their own Save button. To undo a bad edit, open the part's ⋮ menu and choose Clear customizations.

Something else

Support runs through wherever you bought the theme — see #licence-and-updates. Whatever the problem, start your message with the report from Theme Options → System requirements → Copy all as text, then say what you clicked before it went wrong. That first message answers the questions we would otherwise have to ask.