Skip to main content
Ollie Custom Components can receive properties configured directly in the Admin.
Prop Configuration Pn
This is useful when you have a custom component but would like to be able to change some of its behaviour without needing to make code changes.

​
Example - Free Shipping Progress Bar

Instead of hard-coding the Free Shipping Tier directly in the code, use props to define the component behavior. In this example the Free Shipping custom component has a default value of $99.00 and let’s assume that we need to change the Free Tier to $350.00.
Free Shipping Custom Component Pn
In the custom component code you can define a variable and via the admin you can assign a value that will override the hard-coded value in your code. The snippet below is part of a Free Shipping Progress Bar (custom) component. The developer declared a variable named target and assigned a value of 99, however it also declared that this component can receive props.
index.tsx
When you configure props in the admin, you can name them and if there is a matching variable then the configured value will override the hard-coded one.
Free Shipping Tier 350 Pn
The result is the component will now use the configured prop target=350 instead of the original (default) value of 99.
Free Shipping Tier 350 Front Pn

​
Where to edit props

  • Admin → Components → your component → Props Configuration. Click Add Property, give the key, pick a type (String, Number, Boolean or JSON) and the value, then Save. Object and array values get an edit button; every prop can be deleted. See Managing Components.
  • Studio → the component’s props panel. The same props as a form (Visual editor) or as raw JSON, saved with Save changes.
Either way the checkout reads the new values on its next load, with no rebuild.
Component Props Configuration tab

​
Version props

A Version has props too, on its Props Configuration tab. They configure the native checkout rather than one component: steps, font, form fields, share cart, and the checkout flags. Custom components read them through useStoreInfo().props.