Playing this loads the video from YouTube, which is Google. See the Privacy Policy.
Go to Administration → Themes and press Build a theme. Nothing you do there is live right away.
You are always editing a draft. Change colors, try a font, swap the background: your diners keep seeing your current look throughout. It becomes theirs when you press Save and apply, and not before.
That means you can take an hour over it, leave it half-finished, come back tomorrow, and nobody eating at your place sees any of it.
Draft, look, apply
Save draft keeps your work without changing your site. Preview shows your real menu, with your actual dishes, wearing the draft. Only you can see it, and a dark bar across the top says so until you apply.
If your draft has changes you haven't applied, the builder says so at the top and offers you both ways out: save and apply it, or Discard draft.
Getting rid of a draft you don't want
A draft waits for you, which is the point and occasionally the nuisance. Pull colors about for ten minutes, decide you don't like any of it, and a week later you open the builder meaning to start fresh and it's all still there.
So Themes tells you when a draft is in progress before you go in, and gives you the choice: Continue your draft, or Discard it and go back to what your site is wearing now. The same button is in the builder. Neither touches your live menu. A draft was never live.
To start from a different theme instead, press Edit on it. That loads it over your draft, which saves you discarding first. It's also why nothing warns you: replacing the draft is precisely what you asked for.
Everything that goes live gets a name
To apply a look, you give it a name in Name this look, just under the color pickers. Save and apply keeps it and makes it live in one press. Save as theme keeps it without applying it, for something you're building ahead of when you want it.
Why you can't apply something nameless. Your live colors are not somewhere you can get back to. Apply twice and the first version is gone: there's no undo, because there's nothing left to undo to. Naming it puts it in your Themes list, so last week's look stays one press away.
Type a name you already use and that theme is updated, so you don't collect Summer, Summer 2 and Summer 3.
You can also do it from the preview: while you're looking at your real menu, the bar at the top has a name box and a Save and apply button, which is usually when you decide.
The two little card previews
The page background is its own preview, since it is the page background, and the color pickers update it as you drag. Cards get a pair of small previews further down: one showing a card sitting on your background, and one showing that card expanded. They differ: an expanded card is always fully opaque and sits over a dimmed page, so a card color that looks right at 70% opacity can land somewhere else once it's opened. Both follow the pickers as you drag.
Themes are the fastest start
Administration → Themes has ready-made looks (Steakhouse, Italian, Beach Bar and more) plus any you've saved yourself.
Each one offers two things. Edit loads it into your draft, so you can look at it and change it before deciding; nothing happens to your site. Apply puts it live, and asks first.
You can try one on before you commit to it. Press Apply and the question that comes up offers Preview it first as well as Apply and Cancel. Preview shows your own menu in that theme, for you only. Your diners carry on seeing what they saw.
From there it's one press either way: Apply in the bar at the top keeps it, and Stop preview puts you back on the list none the worse. Previewing never touches your draft, so you can look at every starter theme in turn and the work you had in progress is still exactly where you left it.
Everything your diners have seen is in this list, because applying from the builder saves it here first. Going back to last month's look means finding it and pressing Apply.
Applying a theme replaces, it doesn't merge. It brings its own colors, fonts, banner style and images with it. Save your current look as a theme first if you might want it back.
How your menu is laid out
This one is deliberately not in the theme builder. It lives under Administration → Site Content → Menu Display Options, because applying a theme should change your colors, fonts and banner, never rearrange your dishes.
Menu style gives you three:
- Cards — each dish in its own card. The standard look, and what you have unless you change it.
- Plain — your dishes as text on the page, the way a printed menu reads, with no boxes drawn around them.
- Section cards — each section on its own card, with its name, its header and footer wording and all of its dishes together on one sheet of paper.
Whichever you pick, tapping a dish still opens its photo and full description. Nothing is hidden by any of them.
Compact menu is a separate switch beside it, and works with all three. It uses smaller photos and tighter spacing so a long menu takes less scrolling. If your menu is long enough to want it, the Site Content page says so under the switch.
Body text color vs card text color
These are two different settings and it's the most common thing to mix up:
- Body text color — section titles, navigation links, and general page text.
- Card text color — the text inside menu item cards.
If your dish names look right but your section headings don't, it's the body text color you want.
Background gradients
Check Use a gradient and a second color picker appears. Your background then fades from the first color to the second, at whatever angle you set on the slider.
"Solid" is really a gradient too — just between a color and itself. That's why nothing dramatic happens when you first check the box: until you change the second color, both ends match.
Check the bottom of your page, not just the top. The gradient stays fixed to the screen as visitors scroll, so text further down sits against the far end of it. If your body text color is close to that end, that text becomes unreadable even though the top of the page looks fine. Scroll all the way down before deciding you're happy.
Card gradients
Cards can have their own gradient, with their own angle. Set the card angle against the page angle (say 135° on the background and 315° on the cards) and they look like panels catching light from a different direction.
Card opacity
This makes your menu cards see-through, letting the background show behind them.
It applies to the cards on your menu, and only there. When a diner taps a dish to open it, that expanded view is always fully opaque, in the same card colors. So the lower you set this, the less the two look alike. At 30% the cards on the menu are barely there while the expanded dish is solid. That is deliberate: an expanded dish sits over a dimmed page, and a see-through one would leave its text over whatever happened to be underneath.
Both are side by side in the theme builder's preview, which is the quickest way to see the difference your setting makes.
This is the setting most likely to make your menu hard to read. A low opacity over a busy background photo puts your dish descriptions on top of whatever's in that picture. If your menu suddenly looks noisy, turn card opacity back up before changing anything else.
Background image opacity
Only relevant if you've uploaded a background image. It controls how strongly that image shows.
It fades the image toward your background color, not toward white. At 100% you see the photo and none of your gradient; at 0% the photo is invisible and you're looking at your gradient alone. If the slider seems to do nothing, check you've uploaded a background image. With no image there's nothing to fade.
Fonts
One dropdown of pairings. Each combines a heading font with a body font that's readable at small sizes. The pairing applies to your whole menu, including dish descriptions.
System default uses whatever font the visitor's own device prefers. It loads nothing extra, so it's the fastest option, and it's what you start with.
The banner: three ways to top your page
The banner is the band across the top of your menu, above the first section. Top of the page in the theme builder offers three choices.
Uploaded image is the one to pick if you already have a logo, a photo of your sign, or artwork someone made for you. You get a crop tool when you upload, so you choose the framing.
Your name over a color or gradient needs no artwork at all. It sets your restaurant's name large in your chosen heading font, over a color or a two-color gradient you pick. With no logo, this looks far more deliberate than empty space, and it's the quickest way to make your font choice show.
Nothing starts visitors straight at your menu. Your name or logo still shows in the navigation bar either way. Worth it if your menu is long and you'd rather people saw food immediately.
The soft shadow is on for a reason. A gradient runs between two colors, but your heading only has one. Set white text over a gradient that ends near-white and the last few letters of your name quietly disappear. The shadow fixes it. Turn it off only after checking your banner on a phone as well as a laptop.
Switching styles doesn't delete anything. Choosing "Nothing" or the text banner leaves an uploaded image in place. Switch back to "Uploaded image" and it returns. Use Remove from draft if you actually want the file gone, and apply it to make that stick.
Images, and where the wording lives
Both the banner image and the background image are part of your draft, exactly like the colors. Upload one and your diners carry on seeing the old one until you apply. That matters most here: swapping a background mid-service is jarring for anyone reading.
Both get a crop tool on upload. A detailed background competes with your menu text. Something soft and low-contrast works better than a sharp photo of food.
The banner's words are not here. Your heading and tagline live on Administration → Site Content, beside your site name, because they are your restaurant's identity not part of a look. Applying someone else's theme should never rename your restaurant. Leave the heading blank to use your site name; it's worth shortening a long one, since "Joe's Diner" reads better at that size than "Joe's Diner & Catering Company of Springfield".