Skip to main content

Form & Localization Blocks

Form and localization blocks give you the building pieces for custom sign-up forms and let visitors switch the store's market and language. Ronin includes 4 form and localization blocks. All four inherit their base styling from Theme settings: the Input block follows Input fields, the Submit button follows Buttons, and the two selectors follow your Typography and Colors.

Input​

block-input.webp

The Input block renders a single-line text field styled with the theme's input presets.

The Contact and Popup sign up sections, and the newsletter area of the Footer ledger, ship with their own built-in fields, so you only need this block when you compose a custom form layout inside a Group or Layout block. It uses the same field styling as those sections, which keeps custom forms consistent with the rest of the store.

Settings:

  • Color: The text color from the color scheme (Default, Inherit, Foreground, Primary, and so on), Transparent, or Custom.
  • Color opacity: Fade a scheme color from 5% to 100%.
  • Custom color: A color picker, shown when the color is set to Custom.
  • Height desktop: Default (from Theme settings) or Custom, with a Custom height desktop slider from 0 to 100 px.
  • Height mobile: Default or Custom, with a Custom height mobile slider from 0 to 100 px.

Submit button​

block-submit-button.webp

The Submit button block renders a button of type submit, styled with the theme's button presets.

Pair it with the Input block when you build a custom form. For ordinary links and calls to action, use the regular Button block instead.

Settings:

  • Button label: The text on the button.
  • Button style: Solid, Outline, Underline, Ghost, Solid primary, Solid secondary, Solid tertiary, or Link.
  • Button size: Small, Medium, or Large.

Currency selector​

block-currency-selector.webp

The Currency selector block lets visitors pick their country or region, which switches the currency shown across the store.

The Header and Footer sections have their own Show currency selector switch; use this block when you want a selector elsewhere, such as inside a Menu, a Group, or a custom footer layout.

Settings:

  • Show on: All, Desktop, or Mobile.
  • Divider and Divider Position: Draw a separator on the Left or Right of the selector.
  • Country/region selector: Show country name and Show country flag in the trigger. Countries come from your store's market settings.
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, case, and wrap, plus Color with opacity.
  • Hover: None, Color, Opacity, Underline in, or Underline out, with matching color, underline size, and opacity.
  • Icon: Icon size and Color of the dropdown arrow.
  • Size: Per-device width (Fit or Fill), height (Fit, Fill, or Custom), and an optional max width.
  • Appearance Modal: Color scheme, background, corner radius, and border of the dropdown, and its Placement (Top center or Bottom center).
  • Animation and Padding: Entrance animation and device-specific padding.

Language selector​

block-language-selector.webp

The Language selector block lets visitors switch between the languages published for your store.

Like the currency selector, it can sit anywhere blocks are accepted; the Header and Footer sections also provide a Show language selector switch for the default placement.

Settings:

  • Show on: All, Desktop, or Mobile.
  • Divider and Divider Position: Draw a separator on the Left or Right of the selector. Languages come from your store's language settings.
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, case, and wrap, plus Color with opacity.
  • Hover: None, Color, Opacity, Underline in, or Underline out, with matching color, underline size, and opacity.
  • Icon: Icon size and Color of the dropdown arrow.
  • Size: Per-device width (Fit or Fill), height (Fit, Fill, or Custom), and an optional max width.
  • Appearance Modal: Color scheme, background, corner radius, and border of the dropdown, and its Placement (Top center or Bottom center).
  • Animation and Padding: Entrance animation and device-specific padding.
note

The selectors only appear when your store has more than one market or language. Add markets under Settings > Markets and languages under Settings > Languages in your Shopify admin. Currency formatting itself is controlled in Online Store > Customize > Theme settings > Currency format.