Package
Add selectable plan cards, set each card's package ID, choose the default plan, and style the selected look.
A package is a plan card that a visitor can pick, such as Monthly or Annual. Use packages with a Purchase button to build a paywall. Miniwall only draws the cards. Your site supplies each plan's price and runs checkout, matched by the package ID you set here.
Add it
- Drag Package from Purchase onto the phone.
- Or hover a layer in Layers, click +, then Purchase, then Package.
Adding one package always adds two, inside a stack named Packages: Monthly, and Annual, which is selected by default. A single card cannot show a selected state next to an unselected one. Each card has a radio icon, a title, a subtitle and a price. The prices are variables: Monthly uses {{ product.price_per_week }} and Annual uses {{ product.secondary_offer_price }}. Change them to the variable you want, for example {{ product.price }}.
Where it can go
In stacks, the header, the footer and tab content. A package is tappable, so it cannot sit inside a button, purchase button, another package, an answer or a tab button, and it cannot hold buttons, questions, tabs or carousels. See Where components can go.
Design panel
| Section | Control | What it does | Default |
|---|---|---|---|
| Package | Package ID button | Opens the Package ID dialog. It shows Set package ID in orange until an ID is set. | A placeholder, not valid |
| Package | Selected by Default | Whether this card starts selected. Turn it on for one card. If several are on, the first in the tree wins. | Off, except Annual |
| Style | Default and When selected tabs | All stack controls for the card, for each state. | See below |
The Package ID dialog has an ID box, suggestion chips (weekly, monthly, annual, lifetime, plus IDs used elsewhere on the screen), Cancel and Save ID. IDs use letters, numbers and the characters _ $ . -, up to 64. If another card has the same ID, saving moves the ID here and clears it there.
The style controls are those of a Stack: layout, size, spacing, shape, fill, border and drop shadow. The default card is a horizontal row with space between, padding 16, white fill, a light gray 1 pixel border and 12 pixel corners. In When selected, the border turns blue.
States
- Default and When selected apply to the card and everything inside it. Text and icons inside have the same two tabs. The default radio icon swaps to a checked circle when selected.
- Clicking a card on the canvas previews it as selected. That is not saved. Selected by Default is what visitors see first.
Dark mode and screen sizes
Card colors are light only by default. Add dark colors for the fill, border and text. Cards set to Fill width adapt to any screen.
Tips and common mistakes
- Publishing is blocked until every card has a valid, unique ID, and until a purchase button exists. A purchase button without packages is blocked too.
- Use the IDs your site passes in
products. If they differ, the price shows nothing. See Packages and pricing. - Duplicating a card gives the copy an ID with a suffix such as
_2and turns off its default selection. Set the real ID. - Do not put a button inside a card. Make the whole card the choice.
In the JSON
The component type is package, with package_id, is_selected_by_default and one inner stack that carries the look. The selected look is a selected override on that stack.