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
This option requires that your live checkout already be on checkout extensibility. If you are not yet live with checkout extensibility, you must use option 1.
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.