If Product Options doesn’t look right on your store — wrong colours, sizes, or alignment — start with the block’s own settings. Most of what looks wrong is something the app is meant to control for you.
Start With the Block Settings
Open the theme editor and click the Product Options block. Under Form Fields you can set the field background, hover background, max width, border width, border colour, corner radius and dropdown chevron size; Value image size sets how big value images are. These drive every field type at once — a dropdown, a text input, the quantity picker and the file-upload buttons all follow them, so you get one consistent look without writing a line of CSS.
Double Borders
You should not see two outlines around a field. Dawn and themes built from it draw a field’s border on the wrapper, outside the app’s own border, and the app suppresses that automatically for both fields and dropdowns.
If you still see a doubled outline, the second one is coming from somewhere else — a theme customisation or another app. Inspect the field in your browser, find which rule draws the outer line, and override it in the theme editor’s Custom CSS.
Options Look Too Wide or Too Narrow
Every field is capped at Field max width (360px by default) so a row of options shares one right edge rather than stretching to whatever the theme’s container happens to be. Raise or lower that setting rather than setting widths in CSS — value images and the quantity picker are positioned from it, so changing it in one place keeps them aligned.
Value Images Look Wrong
Different sizes - the app crops every value image to a square at the Value image size setting. Upload square images so nothing important is cropped out.
Images not appearing - check Show the value’s image on the option, under What customers see. It only appears once a value has an image.
Images in different places down the page - this is what the app aligns for you: a picture beside an option and a picture on a checkbox row land on the same line. If yours don’t, your theme is likely constraining the block’s width; check the section’s own width settings first.
Swatches
Blank squares - a swatch value with neither a colour nor an image shows its name in a tile instead. If you wanted a picture there, add one to the value.
Colour swatches - the value itself must be a hex code, including the
#(for example#FF0000).Selected state - the chosen swatch is outlined in the block’s Accent colour.
Fonts Don’t Match
Options inherit your theme’s font. If they don’t, your theme is probably setting a font on its own field classes that the app’s fields don’t carry:
.product-options-wrapper .form__label,
.product-options-wrapper .product-option {
font-family: inherit;
}
Mobile Display
An option and its quantity picker sit side by side on a desktop and stack on a phone, below 600px wide. If something overflows on mobile, check that the theme’s container isn’t forcing a width on the block, and that Field max width isn’t larger than the space available.
Still Wrong
Inspect the element in your browser to see which stylesheet wins. The app’s classes are listed in the Custom CSS article; write your override in the theme editor’s Custom CSS box on the section holding the block, so it survives theme and app updates.