StoreSpan
Blocks

Styling and preview

How the store's design applies to a block, why a block-backed injectable has no design choice, and where to see a block rendered.

The store design

The Design page under Storefront defines your store's look: colours, spacing, corner roundness, shadows and type. At render time StoreSpan puts those values on the wrapper around a styled block, so the block's CSS can use them and match the store.

That applies to HTML & CSS and Preset blocks. HTML, Template and Script content renders as is and takes no styling from the store design.

No design choice on a block-backed injectable

An injectable with inline content has a Design card with three choices: use the store design, no styling, or customise for this one. When the injectable's content source is a block, that card shows a note instead: This injectable renders a block, so whether a store design applies is governed by that block's content kind — not by a source chosen here.

In other words, the block decides. An HTML & CSS or Preset block takes the store design; an HTML, Template or Script block does not.

The block itself has no design choice on its edit page either. To make one use of a block look different from another, declare Colour or Number variables and use them in the block's CSS custom properties. See Variables.

Preview

The block edit page has no preview. To see a block rendered:

  • Put it in a Blocks injectable. The stack editor has a live preview of the whole stack. While the stack is empty it says Add a visible block or write wrapper HTML to preview it here., and it warns when the assembled body is too large for widget delivery.
  • Or look at it on the storefront through an injectable that uses it.

An injectable whose content source is a single block does not show the live preview card.

On this page