• FORM DESIGN AND LAYOUT • SETUP GUIDE

How to Configure Alignment, Width, Borders, and Spacing

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

Control Shopify registration form alignment, field layout, padding, borders, and corner radius from Appearance settings.

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.

Layout controls and full-row fields

The app provides alignment, full- or half-width field layout, button width, padding, border width, and corner-radius controls. The containing theme section can still limit the space available to the form.

Address, Company, Paragraph, and File upload blocks can remain full row under the recorded layout behavior. Use half width for appropriate short inputs and review mobile readability after changing padding or width.

Set up this workflow

  1. Open the form Settings and select Appearance.

  2. Choose left, center, or right alignment where available.

  3. Review form padding, border width, border color, and radius.

  4. Set Fields layout to full width or half width.

  5. Review the button layout separately and save.

  6. Check the page on a narrow mobile viewport and confirm every field remains readable.

Example

Place two short contact fields at half width where appropriate, keep a long explanation at full width, and review padding in a narrow viewport.

Expected result

The form has useful spacing and no clipped questions or horizontal scrolling.

Limits and important behavior

  • The recorded helper text says address, company, paragraph, and file blocks still span the full row.
  • The surrounding theme section can constrain the form’s available width.
  • Avoid using padding that makes mobile inputs too narrow.

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 Configure Alignment, Width, Borders, and Spacing” 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 the page on a narrow mobile viewport and confirm every field remains readable. Use dummy applicant details and mask any secrets.

Related guides