🔍 Preview your Block
Last updated
Last updated
Follow these steps to preview your block in Shopify's editor. This lets you test your block before publishing it without affecting your live site.
In the block creation screen, locate the Base Settings section. Copy the Preview Block ID provided here.
The block ID is unique to your block and will be used to preview it in Shopify's editor.
Below the block title, find the hint with a link to Shopify's editor and click it. This will open the editor in a new tab.
You can also access the editor directly from your Shopify admin under Online Store > Customize.
In Shopify's Editor, follow these steps to locate your block and choose where to preview it:
See all the available blocks that Hubble can offer you in the left sidebar
Select the block you want to previsualize
Choose the appropriate screen where you'd like to preview your block (e.g., Profile, Orders, Order Status, etc).
The page or section where you'd like the block to appear could be:
Profile: For customer account profile information.
Orders: For order history details.
Order Status: For displaying order updates.
You can preview your block in different contexts by switching between these sections. This helps ensure the block looks perfect across all customer account screens.
In the app block settings panel:
Set Enable Block Preview to true to activate preview mode.
Paste the Preview Block ID (copied in the first steps) into the Block ID field.
The preview block will appear only for you—it won’t be visible to your customers.
Once the settings are updated, your block will appear on the previewed screen. Test its content and appearance as needed.
Previews are for testing only. They won’t affect your live store until the block is saved and enabled.
