How to preview blocks

We provide two options for previewing your blocks before enabling for all customers. We recommend previewing blocks before going live to ensure they look and function as desired.

Option 1: Checkout Editor Preview

You can manually preview any block within the Shopify checkout editor by copy and pasting the block id into the checkout extension settings:

First, copy the "Internal ID" shown on the block detail page within Checkout Blocks:

Next, paste the Internal ID into the checkout extension settings under "Preview Block ID". It's important to note that will override any display rules as it is meant to be a visual and functional preview, not a way to test display rules. Make sure to remove the block id before saving the checkout editor.

Option 2: Preview Links

Checkout Blocks offers a more robust preview option if you need to preview a specific block under a specific currency, language, or Shopify market. Similarly to the preview within Shopify's checkout editor, preview links bypass display rules.

First, go to a block's detail page and click on "More actions". Then click on "View preview" which will open a modal to set the preview environment:

Then click on "Generate preview" which will launch a new checkout instance with the block in preview mode:

Preview Block with Display Rules

The only way to view a block with the display rules respected is to enable the block on your store. One option is to add an additional rule during testing which requires a specific product.