Style the options block with your theme and CSS

Before you start

See Style customer pages for the Branding presets. Avoid changing both areas without checking which saved appearance you intend.

Customize the shared style

1. 1

   Step 1: Open the style controls

   Go to Settings›Online store›Style of the options block. Choose Customize style.

   The card shows the 6 fields. A blank field uses the theme's style.

2. 2

   Step 2: Set the needed values

   Choose values only where the theme needs an override.

   Field	Controls
   Accent	Highlight color.
   Corners	Corner radius.
   Space between options	Vertical spacing between choices.
   Swatch size	Size of swatch controls.
   Borders	Border styling.
   Selected option outline	Outline color for the selected choice.

   Click Save in the save bar. The store configuration is republished for product pages.

   

   With no explicit accent and a brand color in Branding, the block uses that brand color.

3. 3

   Step 3: Return to theme styling

   Choose Use your theme's fonts and colours and save when the theme should supply the appearance.

   Check the product page after publication and caching. The saved setting now requests the theme's fonts and colors.

Add custom CSS

1. 1

   Step 1: Open the CSS field

   Go to Settings›Online store›Custom CSS. Enter rules for the options block, up to 20,000 characters.

   For example, this rule adjusts the value-control corners:

   ``css .op-value { border-radius: 8px; } ``

   The app wraps the rules in a scope limited to the options block.

   

2. 2

   Step 2: Save and check the result

   Save, then inspect the intended control on the product page. Resolve any validation message before expecting the new style to appear.

   A browser without CSS scope support skips these rules. Use the shared style fields for changes that should not depend on custom CSS.

3. 3

   Step 3: Clear the custom rules

   Choose Reset to default to clear the CSS field. Save the change.

   When the field is already empty, the reset control explains there is no custom CSS to reset.

   This field is separate from customer-page CSS under Branding. Changing one does not clear the other.

Use classes, variables and events

1. 1

   Step 1: Open the reference

   Go to Settings›Online store›Class names and events. Give this reference to the person maintaining your theme.

   It lists the supported names for the block and its controls.

   

2. 2

   Step 2: Choose a stable class

   Use the class for the specific element being styled.

   Class	Element
   .op-block	Options block.
   .op-option	One option.
   .op-option--<look>	An option with a particular look.
   Option's own class	The Class name set on the shared option.
   .op-value	A value control.
   .is-selected, .is-sold-out	Selection and availability states.
   .op-price-line, .op-error	Price summary and error.
   .op-block--actions, .op-actions	Action areas.
   .op-btn, .op-pop	Buttons and pop-up.

   Use option-specific class names for a choice needing a distinct style.

3. 3

   Step 3: Use variables for shared appearance

   The variables are --op-accent, --op-radius, --op-gap, --op-swatch-size, --op-border, --op-selected-ring, --op-ring-width and --op-button-fill.

   Defaults are declared within :where(.op-block). Button fill uses 100% for filled styling and 0% for an outline.

   Branding's Selected ring and Buttons controls set ring width and button fill.

4. 4

   Step 4: Respond to supported events

   Use events when the theme needs to react to configuration or quote-cart changes.

   Event	Timing and detail
   op:change	First render and every change; detail contains cfg and unitPrice.
   op:valid	Initial valid state or the line becoming complete.
   op:invalid	Initial incomplete state or the line becoming incomplete.
   op:quote-added	After a quote line is added and before the pop-up opens; detail contains line and pieces.

   Configuration and price are null while the line is incomplete. The quote-added event can be canceled to suppress the standard pop-up.

What happens next

The shop configuration republishes after a save. Shopify's cache can delay the product-page result.

A style change does not alter prices or required choices. Check appearance and the customer interaction separately.

If something goes wrong

Branding presets and Online store style fields edit the same saved style. Branding displays the nearest preset for a custom value.

Choosing an equivalent preset keeps that custom value. Changing the preset deliberately replaces the corresponding style setting when saved.