Category tabs
Style the tabs customers use to move between your product categories.
Your categories become the tab row at the top of the builder. Style it in Design → Tab Button Template.
1 the three template previews (Category image is selected here), 2 the Hide "All Products" Tab toggle, 3 per-category image uploads. The arrow shows the result in the live preview — the circular step row across the top.
Choose a template
Open your builder and go to the Design tab.
Click Tab Button Template to expand it.
Click one of the three previews. They're pictures without names — from left to right they are Square, Category image and Stepper.
| Template | Look | Best for |
|---|---|---|
| Square | Plain labelled buttons in a row. | Any builder. The safe default. |
| Category image | A row of circles joined by lines. Each circle shows the category's image, or its first letter. Steps before the one you're on show a tick. | Visual categories — scents, flavours, colors. |
| Stepper | Boxes with a small icon and the category name, joined by arrows. | Guided builders with selection rules. |
The switch on the Tab Button Template row turns the whole tab row on or off. Leave it on unless your builder has a single category.
Hide the "All Products" tab
The tab row starts with an All tab. It shows every product — category by category, in the order of your categories — under the heading All Products. Switch Hide "All Products" Tab on to start customers on your first category and make them move through your categories one at a time — useful with a stepper. It works with every template.
Add category images
With Category image or Stepper selected, a Category Images section appears listing every category — plus All Products while that tab is shown.
Click or drag a JPG or PNG onto the upload box under each category.
To swap an image, remove it with the trash icon on its thumbnail and upload another.
A category without an image shows its first letter (Category image) or a generic icon (Stepper).
Nothing to upload against? Add your categories on the Products tab first.
Arrows between the steps
Stepper only. The arrows that join one step to the next get their own settings:
| Setting | Options |
|---|---|
| Arrow | Arrow →, Chevron ›, Double », Line —, or None (hide arrows). |
| Arrow color | Defaults to grey. Hidden when the style is set to None. |
| Arrow size | 10–32px. Defaults to 18px. Hidden when the style is set to None. |
Colors, borders, and text
| Section | What you control |
|---|---|
| Tab Button Colors (Square, Stepper) | Tab Background, Selected Background, Tab Text, Selected Text, Border Color. |
| Tab Text Colors (Category image) | Tab Text, Selected Text, Active/Completed Border (the current step, finished steps and the line behind them) and Upcoming Border (steps still to come). |
| Border Settings (Square, Stepper) | Border Radius (0–24px, default 4) and Border Width (0–10px, default 1). |
| Tab Button Alignment & Typography | Tab Button Alignment (Left, Center or Right), Font Size in px, and Font Style (Light, Regular, Medium or Bold). |
| Category Title | The heading above the products. It has its own switch, on by default, plus Category Title Alignment, Category Title Color, Font Size and Font Style. |
Not every section applies to every template — the card only shows what's relevant to the one you picked.
Match your theme
Set the tab Border Radius to the same value as your theme's buttons. It's a one-slider change that makes the builder look native. It applies to Square and Stepper.