Custom CSS

Style the widget yourself when the built-in settings do not cover what you need.

Settings > Settings > Design > Additional > Custom CSS for the widget. This is a code editor, and its contents are applied to the widget on your storefront.

The custom CSS editor, under Additional in Design settings.

Try the settings first

Most of what merchants write CSS for has a setting, and a setting continues to work when your theme changes.

You want	Setting
The widget to look like your theme	Match theme style
Different colors	Colors
Different fonts or sizes	Borders and typography
Rounder or squarer controls	Border radius, same page
Fields side by side	Column width
A shorter widget	Limit widget height
Options grouped or collapsible	Section

Use custom CSS for what those settings do not cover.

Targeting one option

Global rules can affect the whole widget. Target a class on the specific option instead:

1

Give the option an HTML class

Set HTML class on the option's Advanced tab. Use letters, numbers, hyphens, and underscores only, with no leading dot. See HTML class.

2

Write a rule against it

.engraving-field label {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.engraving-field input {
  text-align: center;
}

3

Check a real product page

Custom CSS applies to the storefront, not to the builder preview. Use View in Store.

4

Check on a phone

Most CSS problems are layout problems, and they usually appear first on a phone.

What custom CSS is useful for

Use	Notes
Emphasising one important option	A background, a border, more spacing
Hiding something in a context no setting covers	Use a class rather than a broad selector
Fine spacing adjustments	Where the design settings are too coarse
Matching a house style the settings cannot reach	Unusual label placement, custom control shapes
Excluding something on one page type	Combine with your theme's own body classes

Writing CSS that keeps working

Do	Avoid
Target your own HTML class values	Targeting the app's internal class names, which can change
Keep rules short and specific	Broad selectors that catch more than you meant
Write down why each rule exists, in a comment	An unexplained block nobody dares delete
Test after every theme update	Assuming it still works
Use relative units and check mobile	Fixed pixel widths

Custom CSS is yours to maintain. It is not affected by Match theme style and is not updated when the app changes, so check it first when the widget looks wrong after an update. Keep it as short as possible.

Notes

• Custom CSS is store-wide. One stylesheet applies to every option set.

• It is applied to the widget on the storefront. The builder preview is not affected.

• Your theme's own CSS also applies, and it may be more specific than your rules.

• Custom CSS does not change what the options collect or how they behave.

• If you would rather not write CSS, support can help with styling. See Contact support.