Get started with Checkout Ninja

Before you start

• Install Checkout Ninja from the Shopify App Store and open it from Apps in your Shopify admin.
• Check your plan. Checkout apps can only add blocks to the checkout steps on Shopify Plus. You can build and test on a development store.

Step 1: Choose a plan

1. On the app’s Home page, find the Create your first block setup guide.
2. Click View plans and pick a plan, or start the free trial. Most of the app is locked until you do.

Step 2: Create your first block

1. In the app menu, click Blocks to open Checkout Blocks. Click Create New Block (or Create Your First Block if you haven’t made one yet).
2. On Select a template, pick a template and click Use Template. Or click Start Fresh to begin with an empty block.
3. Give it a Block Name between 3 and 100 characters. Only you see this name.
4. Click Add block and choose a block type from the list, for example Trust Badge.
5. Fill in the block’s settings and click Done.
6. Leave Status set to Active.
7. Click Save. The block now has a Block ID, shown under Block Details on the right.

A saved block can hold several block types, for example a heading, a set of trust badges and a payment icon row. They stack one under another in the order you add them.

Step 3: Add it to your checkout

1. Under Block Details, click the copy button next to the Block ID.
2. Click Open Checkout Editor. Shopify’s checkout editor opens in a new tab.
3. In the checkout editor, click Add app block in the section where you want the block to appear. Then choose Custom Block.
4. Paste your Block ID into the Block ID setting of the app block.
5. Click Save in the checkout editor.
6. Back in Checkout Ninja, mark Add it to your checkout as done in the setup guide.

The Custom Block can go in the main checkout body, just after the header, or directly before or after the delivery address. How placement works.

Verify it worked

1. In the checkout editor, the Custom Block should show your content. It shows Block not found only when the Block ID setting is empty.
2. Open your store, add a product to the cart, and go to checkout. The block appears where you placed it.
3. If you set visibility conditions, test with a cart that should not match. Check that the block stays hidden.

Limitations

• Shopify only allows checkout UI apps in the information, shipping and payment steps on Shopify Plus.
• Blocks render in Shopify’s own checkout components and follow your checkout branding. You can’t inject custom CSS.
• Only blocks with Status: Active render. Draft blocks never show, even if they are placed in the checkout editor.

Troubleshooting

The Custom Block is blank or says “Block not found”. “Block not found” means the Block ID setting is empty. A blank block usually means the ID is mistyped, belongs to a deleted block, or the block is in Draft. Copy the ID again from Block Details and paste it without extra spaces. More causes.

The block shows in the editor but not in the live checkout. Check that the block’s Status is Active and that you clicked Save in the checkout editor. Then check whether its visibility conditions match your test cart. Full checklist.

Choosing a block opens “Upgrade The Plan”. That block type isn’t included in your current plan. Upgrade from Billing, or choose another block.