Add a block to Shopify's checkout editor

Before you start

• Save the block in Checkout Ninja first. The Block ID only appears under Block Details after the first save. Before that, the card reads “Your block ID appears here after saving.”
• Check the block’s Status. Only Active blocks render. A Draft block stays blank in the checkout editor and in checkout.
• Shopify Plus or a development store. Shopify only allows checkout apps in the information, shipping and payment steps on Plus.

Steps

1. In Checkout Ninja, go to Blocks and open the block.
2. Under Block Details, click the copy button next to the Block ID. The app confirms with “Block ID copied”.
3. Click Open Checkout Editor. Shopify’s checkout editor opens in a new tab.
4. In the checkout editor, go to the section where you want the block and click Add app block. Choose Custom Block.
5. In the app block’s settings, paste the ID into Block ID. Paste only the number, with no spaces before or after it.
6. Click Save in the checkout editor.
7. Back in Checkout Ninja, open the block’s Setup guide and click Mark as done on Add it to your checkout.

Choose a position

The Custom Block app block can go in four positions. What each position is good for.

Position	Where the buyer sees it
Checkout body	Any spot where the checkout editor lets you add an app block
After the header	Just below the checkout header
Before the delivery address	Above the delivery address form
After the delivery address	Below the delivery address form

Active vs Draft

Status sits at the top of the block’s right-hand column. New blocks default to Active.

• Active: the block renders wherever its Block ID is placed.
• Draft: the block renders nothing, even though it’s still placed in the checkout editor. Use it to take a block down without removing it from the editor.

Status changes take effect as soon as you click Save in Checkout Ninja. You don’t need to touch the checkout editor again.

Add more than one block

Each saved block has its own Block ID, and each Custom Block app block holds one ID. To show several blocks, add one Custom Block app block per Block ID, each with its own ID pasted in.

Verify it worked

1. In the checkout editor, the Custom Block preview shows your block’s content instead of Block not found or an empty space.
2. Open your storefront, add a product to the cart and go to checkout. The block appears in the position you chose.
3. Set the block to Draft in Checkout Ninja and save. Reload checkout: the block is gone. Set it back to Active.

Limitations

• The Custom Block app block works only in the checkout. It isn’t available on the thank-you or order status pages.
• The delivery address positions only render when checkout shows a delivery address form. They don’t render when there’s no address to collect, for example when the buyer picks up in store.
• Checkout Ninja can’t detect placement. The setup guide’s Mark as done is a note for you. It’s stored in your browser, so it can show as not done on another computer.
• On stores not on Shopify Plus, Shopify doesn’t let checkout apps render in the information, shipping and payment steps.

Troubleshooting

The checkout editor shows “Block not found”. The Block ID setting is empty. Paste the ID from Block Details and save the editor. More causes.

The Custom Block is placed but shows nothing in the editor. The Block ID is mistyped, belongs to a deleted block, or the block is set to Draft. Copy the ID again and check Status.

It shows in the editor but not in the live checkout. Check that you clicked Save in the checkout editor, then check the block’s visibility conditions. Full checklist.