Set up purchases

To set up purchases on a screen, add a purchase button and configure its Purchase action. The action can target a specific product or whichever product the user selects from a Products element on the screen.

Add products

A product element is a visual card that displays a product on the canvas.

To add a product element:

1. On the canvas, click + on the target screen.

2. Select Products.

3. Choose a layout preset: vertical list, horizontal list, feature carousel, feature cards, banner list, or bottom sheet.

   

4. Select each product card and assign it a product in the dropdown in the Design panel.

   A product element without an attached product blocks previewing and publishing. Assign a product or delete the element.

   

To show a crossed-out anchor price on a card, add an Old Price element inside it.

Add a purchase button

A purchase button triggers a Purchase action when the user taps it.

To add a purchase button:

1. On the canvas, click + on the screen.
2. Select Button and choose a button preset.
3. With the button selected, open the Interactions tab in the right panel.
4. Click Add trigger > On tap, then click Add action.
5. Set Action to Purchase, then set Product to one of:
   • products.selectedProduct: Buys whichever product the user has selected from a Products element on the screen.
   • A specific product: Always buys that product, regardless of any selection on the screen.

Show the price on the button

To insert the selected product’s price into the button label, use a variable:

1. With the button selected, open the Design tab in the right panel.
2. In the Content field, place the cursor where the price should appear.
3. Click the variable icon, pick products.selectedProduct, then pick the prod_price attribute. The full variable resolves to products.selectedProduct.prod_price.
4. Add static text around the variable — for example, Subscribe for {prod_price}.

The label updates as the user selects different products.

Restore purchases

To let users restore previous purchases, add a restore button or link to the screen.

To add a restore purchases element:

1. On the canvas, click + on the screen.
2. Select Button, then choose Links for a text link or any other button type for a styled button.

3. With the element selected, open the Interactions tab in the right panel and click Add trigger.
4. Select On tap and click Add action.
5. From the Action dropdown, select Restore purchases.

Display additional elements based on the selected product

If a screen has products on it, you can show or hide other elements depending on which product the user selects.

To set up conditional visibility:

1. In the Products element, select a product card.
2. Open the Interactions tab in the right panel and click Add trigger.

3. Select On tap and click Add action.
4. From the Action dropdown, select Show or Hide.
5. Select the element to show or hide when that product is selected.

Change the selected product from another element

Users normally change the selection by tapping a product card. To move the selection from somewhere else on the screen, add a Select product action and point it at the target product card.

To set up the action:

1. Select the element that should change the selection — a button, a toggle, or any other element.
2. Open the Interactions tab in the right panel and click Add trigger.
3. Select the trigger and click Add action.
4. From the Action dropdown, select Select product.
5. Set Product to the product card the action should select.

The action works only with product cards in a product group on the same screen. To select a different product depending on the user’s choice, wrap the action in a conditional action.

Review products in flow

The Products panel in the left sidebar maps existing products to each screen in the flow.

Each screen has two sections:

• Default — one product, pre-selected when the screen loads.
• Other — additional products available on the same screen.