How to Install Yofi UI Checkout Extension on Shopify Store

Note: Ensure that you have a Shopify Plus plan before proceeding.

After installing the Yofi app, you will need to add it to your checkout pages via the Checkout and Accounts Editor. The Yofi UI Extension will display after the cart items, which is required by the Yofi Rule Engine. Without this, certain Yofi Rule Engine actions may not function as intended.

Steps:

1. In your Shopify admin, go to Settings > Checkout.
2. In the Configurations section, click Customize next to the checkout configuration that you want to customize.

3. In the top menu bar, select the page where you'd like to add an app.
4. Click ⊕ Add app block.

5. In the Apps available for this page section, select the Yofi Checkout Notification. The app is automatically placed in the recommended area on the page.
6. If you don’t see Yofi Checkout Notification, click View all apps and locate it. Then, click the Plus icon to add it.

7. You can adjust the Yofi Checkout Notification placement in the left panel by simply dragging and dropping the extension to any available location.

8. After adding the Yofi Checkout Notification, select it from the left panel, then enable Allow App to Block Checkout under Checkout Behavior.

9. Click Save.

Please note that the Yofi Checkout Notification may not appear in the checkout page editor preview for certain Shopify templates (themes). This is not a concern, as the feature remains functional. You can test it by creating a rule with a simple condition (e.g., "email domain contains example.com") and verifying it on the live checkout page by placing an order using an email address ending with example.com.