How to modify product review form CSS in Shopify?

Store Design
, ,

Topic summary

A user is unable to modify the CSS styling for a product review form on their Shopify product page. Changes added to base.css (targeting .spr-form-label, .spr-form-input, and font-family properties) are not rendering or taking effect.

Suggested troubleshooting steps:

  • Increase CSS selector specificity to override existing styles
  • Use browser developer tools to inspect the review form and identify exact class/ID names
  • Verify the base.css file is properly linked/imported into the HTML document
  • Check for caching issues that might prevent updated CSS from applying

The issue appears to stem from either insufficient selector specificity or the CSS file not being properly loaded.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I can’t work out where to change the css for the product review form on the product page. The css entered into base.css doesn’t seem to change the styles at all.

.spr-form-label+.spr-form-input {
margin: 0;
min-height: 30px!important;
}

.spr-form-input-text {
font-family:‘Lato’
}

I basically want those styles but not rendering when entering in base.css

Our url is https://cabinandcrate.co.uk/products/cabin-ii

Thanks in advance

2

If your CSS styles in the base.css file aren’t affecting the product review form on the product page, it’s possible that the specificity of your CSS selectors might be too low to override existing styles. To ensure your styles take precedence, consider using more specific selectors or inspecting the element using your browser’s developer tools to identify the exact class or ID associated with the review form. Additionally, make sure that your base.css file is being properly linked or imported into the HTML document. It’s also essential to check for any caching issues that might prevent your updated CSS from being applied.