Product Options inherits your theme’s fonts and colours automatically, and its own look is driven by the block’s settings. When you need more than those settings offer, CSS gives you the rest.

Where to Put Your CSS

Shopify’s theme editor has a Custom CSS box on every section, and one for the theme as a whole. Open the theme editor, select the section holding the Product Options block — or the theme, under Theme settings — and paste your rules there. They apply to the storefront without touching theme code, and they survive theme updates.

Anything you write there is scoped by Shopify to that section, so the selectors below are all you need.

Settings First

Most of what merchants reach for CSS to change is a block setting, and a setting survives an app update where a selector may not. In the theme editor, click the Product Options block and you will find Field background, Field hover background, Field max width, Field border width, Field border colour, Field corner radius, Dropdown chevron size and Value image size. Those drive the app’s own styling — the CSS below is for what they don’t cover.

Common Styling Examples

Change label colour:

.product-options-wrapper .form__label {
  color: #333333;
  font-weight: bold;
}

Style the dropdown:

select.product-option {
  border: 2px solid #000000;
  border-radius: 8px;
}

Change the value image size:

.product-options-wrapper {
  --po-image-size: 100px;
}

Change the spacing between an option’s parts:

.product-options-wrapper {
  --po-gap: 14px;
}

Style the help text under an option:

.product-options-inner-wrapper .description {
  font-size: 13px;
  opacity: 1;
}

CSS Variables

These are the supported way to restyle the block, and are what the block settings themselves set. Declare them on .product-options-wrapper and everything inside picks them up:

--po-image-size - How big value images are (default 75px)
--po-gap - The spacing step used between an option’s parts and between the rows of a list (default 10px)
--field-max-width - How wide a field is allowed to get (default 360px)
--field-height - Minimum field height, shared by inputs, dropdowns and the quantity stepper (default 45px)
--field-bg / --field-hover-bg - Field background, at rest and on hover
--field-border-width / --field-border-color / --field-border-radius - The field border
--field-chevron-size - The dropdown caret

CSS Class Reference

Containers:

.product-options-wrapper - The whole block; where the variables above are declared
.product-options-inner-wrapper - One option
.po-option-content - Everything the customer reads and acts on within an option
.po-option-control - An option’s label and its field
.po-option-media - The image column beside an option
.po-option-qty - The quantity picker beside a field

Fields:

.product-option - On every option’s field or field wrapper, whatever the type
select.product-option - Dropdowns
.field__input.normalized - Text, email, phone, number and date inputs
.product-option .checkbox / .checkbox-item - Checkbox lists and their rows
.product-option.radio-buttons - Radio lists
.button-option - Button tiles
.product-option__pick-file-btn / .product-option__pick-upload-btn - The gallery and upload buttons

Values:

.po-value-main - A row’s checkbox or radio and its label
.po-value-media - A row’s image cell
.po-value-image - The image itself
.po-value-description - Per-choice description text

Accordion layout:

.accordion-item - One collapsible option
.accordion-button - The header; gains .active when open, .completed when confirmed, .skipped when skipped
.selected-value - The chosen value shown in the header
.accordion-content - The panel

Theme-Specific Adjustments

The app already declines your theme’s field decoration — Dawn and its descendants draw a border on the .field and .select wrappers, which would sit outside the app’s own border — so a double outline is not something you need CSS for.

For anything else, inspect the element in your browser and target the classes above. They are stable; if you find yourself needing a selector that isn’t listed here, tell support rather than relying on one you found by inspection.

Custom Css