• FORM DESIGN AND LAYOUT • SETUP GUIDE

How to Customize Form Titles, Fonts, and Colors

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

Match a Shopify wholesale registration form to your brand using the title, font, color, and alignment settings in the app.

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.

Separate the visible title from the admin name

The visible title is optional and can be styled for size, color, alignment, and padding. The internal form name is for your team. Choose theme-font inheritance when you want the form to blend with your storefront typography.

Form styling is stored in the app and reused wherever that form appears. A title-color change should therefore be checked on every placement of the same form, including inline and popup displays.

Set up this workflow

  1. Open the form Settings and select Appearance.

  2. Choose whether to display the optional form title and enter its text.

  3. Set title size, color, alignment, and padding using the available controls.

  4. Choose a font family or inherit your theme’s font.

  5. Set body and accent colors with sufficient contrast.

  6. Save and check the form on its storefront page, including mobile.

Example

Set the demo form title to Apply for wholesale access, inherit the theme font, and choose a readable title color.

Expected result

The saved storefront form uses the configured title and remains legible on desktop and mobile.

Limits and important behavior

  • The admin form name is separate from the visible title.
  • App styling is shared wherever the same form is placed.
  • Use Custom CSS only when the available appearance controls do not cover your need.

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 Customize Form Titles, Fonts, and Colors” 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: Save and check the form on its storefront page, including mobile. Use dummy applicant details and mask any secrets.

Related guides