Skip to main content
The options Customei adds to your product page come with a plain, tidy look. Global styles is where you make them look like the rest of your store: your colours, your font, your spacing, your corners. One change here restyles every option on every personalized product. You change a setting on the left and watch a real form change beside it. Nothing here needs code. Go to Preferences and open Global styles. The editor opens full screen, with the settings on the left and a live preview of a form beside them. In a narrow window, switch between the two with Settings and Preview at the top. When you close the editor, the Customize button on the Global styles card opens it again.
The full-screen Global styles editor. The left panel shows the style name Default with a Used as default badge, then Color swatches, Typography cards Small, Medium, Large and Customize, Spacing cards Compact, Balanced, Spacious and Customize, Corner radius cards Sharp, Soft, Circular and Customize, and the start of Option styles. The right side shows a sample form with swatches, size buttons, a dropdown, a text box, radio buttons, checkboxes, a slider, a file upload box and a map.

The Global styles editor. Settings on the left, a working sample form on the right.

​
How you work here

1

Pick the style you're editing

The name at the top of the panel is the style you are editing. The one marked Used as default is the look your storefront shows.
2

Change the settings

Color, Typography, Spacing and Corner radius change every option at once. Option styles, at the bottom, fine-tunes one kind of option.
3

Watch the preview

The board beside the panel is a working form with sample options. Click the chips, type in the boxes. It changes as you edit.
4

Save

As soon as you change something, the top bar reads Unsaved changes with Discard and Save. Discard throws your changes away. When the style you are saving is the one Used as default, Customei asks Apply changes to your storefront? first: Update all saves it, and every personalized product picks up the new look. You don’t have to publish your option sets again. Saving any other style changes nothing on your storefront until you make it the default.

​
Everything at once

These four sections style every option together. Each starts with a few preset cards: pick one, or open Customize for exact values.
Getting Color and Typography to match your theme is usually enough to make the whole form look like it belongs. Do those before you touch anything else.

​
Option styles: one kind of option at a time

Each entry under Option styles styles one kind of option wherever it appears in your store. Where you see Hover and Active together, you are looking at two different moments, not two settings:
  • Hover is how it looks while the customer’s mouse is over it.
  • Active is how it looks once they have chosen it.
Make Active clearly different from the rest. If a chosen swatch looks the same as an unchosen one, customers pick twice and get confused. Reset, in an option type’s settings, puts only that type back to its defaults.
The top bar of the Global styles editor reading Unsaved changes, with the Discard and Save buttons outlined in red.

Change anything and the top bar offers Discard and Save.

​
Keeping more than one style

Click the style’s name at the top of the panel to see your styles. A style is one complete set of the settings in this editor. Most stores need one; a second is handy for a seasonal look you plan to switch to and back from.
The style list open under the style name. It shows the style Default marked Used as default with a tick, and below it Create new, Start from the default styles, outlined in red.

Your styles, with Create new below them.

  • Create new starts a style from the default look. A preset listed under it starts one from that preset instead.
  • The … menu holds Rename, Duplicate (a copy to experiment on, so your live look stays untouched) and Delete. You can’t delete the style used as default.
  • Use as default, on any other style, makes it the look your storefront shows. Customei asks first, because it changes every personalized product at once.
If you leave a style with unsaved changes (switching to another one, creating or duplicating one, closing the editor), Customei asks before it drops them.
There is one default look for your whole account. Change it and every product page using Customei changes with it, as soon as you save.

​
Where to next

Where the design shows on your product page

The other half of how your product page is arranged.

Check your options before customers do

Try the real thing, on your own option set.