A theme controls how your customer-facing pages look: the product page, its sub-pages (guides, manuals, repair, warranty, claims) and your Help Center. You pick a theme from a library, customize it in the theme editor, and publish it when it is ready. This article is for whoever owns your branding.
Go to Branding › Theme. You need permission to edit branding to add, edit or publish themes. People without it can only look.
The Themes page
The page has three parts:
- Live theme at the top: the theme customers see now, with a Live badge, a preview on a phone and a computer, and the time it was last saved. Use Edit theme to open the editor. The menu (…) has Preview, Rename and Duplicate.
- Draft themes: themes you are working on. Customers do not see them. Each row has Publish, Edit theme and a menu with Preview, Rename, Duplicate and Delete.
- Discover themes: the theme library.
Choose a theme from the library
The library includes four themes:
| Theme | Look |
|---|---|
| Classic | The original Veribl look: light, clean cards and a grid of shortcuts on the product page |
| Studio | App-like and dark-first. A big product image, one clear warranty action and sheets for quick tasks. Styles: Dark and Light |
| Bloom | Playful and light, with a big italic hello, pastel app icons and illustrated guide cards. Styles: Pastel and Sand |
| Pebble | A big-brand support site: soft grey panels, heavy headings and pill-shaped links that stay on screen while customers scroll. Styles: Mono and Stone |
- In Discover themes, pick a style if the theme has more than one (for example Dark or Light for Studio).
- Click View demo to see the theme with a sample product, either the Product page or the Help Center.
- Click Add. The theme is added to Draft themes. Adding a theme does not change what customers see.
Preview before you publish
Open the menu on a draft or the live theme and choose Preview. Your own product pages open in a new tab with that theme applied, so you can check your logo, colors and content. Only you see the preview.
Edit a theme
Click Edit theme to open the theme editor. The top bar has:
- Exit editor on the left
- Sections and Theme settings buttons to switch the left panel
- The theme name with a Live or Draft badge, and a page picker
- Preview size (Desktop or Mobile), Undo, Redo, a More actions menu and Save
Pick the page to edit
Use the page picker to choose which page you are editing. Pages are grouped:
- Product: Product page, Product guides, Guide, Manual, Repair & parts, Recycling & passport
- Service: Warranty, Warranty certificate, Warranty claim, Claim status, Support conversation, Rating
- Help Center: Help Center home, Help topic, Product help, Help article, Contact, Account
The preview in the middle shows the page. Turn on Preview inspector and click the preview to select a section there.
Sections and blocks
In Sections, a page is a list of sections between the Header and the Footer. The header and footer are shared by every page. Each section can hold blocks.
- Add section or Add block to open a searchable list
- Select a section or block to see its settings on the right
- Rename, duplicate, copy, paste, move up or down, hide or show, or remove a section or block from its menu
- Some sections cannot be removed or added twice, and the editor tells you why
Hidden sections stay in the theme but customers do not see them.
Theme settings
Theme settings apply to every page. The groups depend on the theme, and typically include the logo and favicon, colors, fonts, page width, card corners and style, button shape and the chat button position. Themes with more than one style also have a Theme style group. Studio also has Custom CSS.
Every box you can see on a page has settings in the editor. If a look cannot be changed in the settings panel, it is not part of the theme.
Product templates
You can show a different layout for some products. On the product page, open the page picker and choose Create product template. Start from A copy of Default product or A blank template. Then assign products to the template. Products without a template use Default product. The preview product picker only changes what you preview, not what customers see.
Save, discard and undo
Changes in the editor are not live. Click Save to keep them in the theme. Discard unsaved changes in the More actions menu throws away edits since the last save. If you leave with unsaved work, it is restored the next time you open the theme.
Publish a theme
- On Branding › Theme, find the draft in Draft themes.
- Click Publish (or open the arrow next to it).
- Confirm. The dialog tells you which theme it replaces.
Customers see the new theme on product pages and the Help Center right away. The previous live theme is kept as a draft. Unsaved changes in the editor are not included, so save first.
Tip: To try a change safely, duplicate your live theme, edit the copy, preview it and publish it when you are happy.
When Veribl updates a theme, an Update available badge shows on your draft.