• FORM DESIGN AND LAYOUT • SETUP GUIDE

How to Add Custom CSS to a Registration Form

By Rivio Support Team
2 min read

What you will achieve in this guide

Follow this step-by-step documentation to configure custom B2B registration forms, approval workflows, and customer tagging.

EXPECTED SETUP TIME 5-10 Minutes
COMPATIBILITY All Shopify Themes & Plans
TECHNICAL DIFFICULTY Zero Code Required

Use Custom CSS to refine a Shopify registration form when the app’s built-in appearance settings do not cover your design.

Before you begin

Open the selected form’s Appearance settings for visual changes. Check every page and popup using that form, because the same saved appearance is reused. Keep a copy of existing Custom CSS before changing it.

When to use Custom CSS

Use the built-in appearance settings first for colors, fonts, borders, spacing, and width. Custom CSS is for a presentation change those controls do not cover. It does not add field logic, approval logic, or JavaScript behavior.

Inspect the actual rendered element before writing a selector; undocumented classes may change. Keep a copy of the previous CSS and test required-field errors and mobile layout so a visual adjustment does not obscure an important control.

Set up this workflow

  1. Open the form Settings and select Appearance.

  2. Try the built-in typography, color, layout, and spacing controls first.

  3. Locate Custom CSS and enter only the styling needed for the form.

  4. Keep selectors specific to the rendered form elements you have inspected.

  5. Save and test the form in its actual storefront placement.

  6. Check keyboard focus, mobile layout, required-field errors, and popup display after the change.

Example

On a demo copy, use a selector verified from the rendered form to adjust a small spacing issue. Save the previous CSS so you can restore it if needed.

Expected result

The intended element changes without affecting unrelated theme elements; the form still submits successfully.

Limits and important behavior

  • Custom JavaScript is not supported.
  • Do not assume undocumented CSS class names are stable.
  • Use a test form before applying CSS that hides or repositions inputs.

Troubleshooting and verification

If a style does not appear, reopen the saved Appearance settings and verify the page loads the same form slug. For clipping or excess width, check the containing theme section and Custom CSS as well as the form’s padding and field layout.

Screenshots to add

Screenshot placeholder: Capture the relevant app screen for “How to Add Custom CSS to a Registration Form” after completing the setup. Show the controls used to open the form Settings and select Appearance. Add a second screenshot showing the result of this check: Check keyboard focus, mobile layout, required-field errors, and popup display after the change. Use dummy applicant details and mask any secrets.

Related guides