🔍 Preview your Block

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.

Copy the Preview Block ID

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.

Open 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.

Select the Block in the Shopify's Editor

In Shopify's Editor, follow these steps to locate your block and choose where to preview it:

Find Your Hubble Block

See all the available blocks that Hubble can offer you in the left sidebar

Select Your Hubble Block

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).

Select the Preview Location

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.

Enable Block Preview

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.

View Your Block

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.