Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt

Use this file to discover all available pages before exploring further.

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 abe able to change some of it’s 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 assgined a value of 99, however it also declared that this component can receive props.
index.tsx
// piece of component with the target prop
const FreeShippingProgress: React.FC<FreeShippingProgressProps> = ({
   target = 99,
  ...props
}) => {
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