Choose a version:

BlockSpacer

BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements.

Note that you should favor BlockStack when spacing between all elements is the same.

Support

Targets (50)

Supported targets

Checkout::Actions::RenderBefore
Checkout::CartLineDetails::RenderAfter
Checkout::CartLines::RenderAfter
Checkout::Contact::RenderAfter
Checkout::CustomerInformation::RenderAfter
Checkout::DeliveryAddress::RenderBefore
Checkout::Dynamic::Render
Checkout::PickupLocations::RenderAfter
Checkout::PickupLocations::RenderBefore
Checkout::PickupPoints::RenderAfter
Checkout::PickupPoints::RenderBefore
Checkout::Reductions::RenderAfter
Checkout::Reductions::RenderBefore
Checkout::ShippingMethodDetails::RenderAfter
Checkout::ShippingMethodDetails::RenderExpanded
Checkout::ShippingMethods::RenderAfter
Checkout::ShippingMethods::RenderBefore
Checkout::ThankYou::CartLineDetails::RenderAfter
Checkout::ThankYou::CartLines::RenderAfter
Checkout::ThankYou::CustomerInformation::RenderAfter
Checkout::ThankYou::Dynamic::Render
purchase.checkout.actions.render-before
purchase.checkout.block.render
purchase.checkout.cart-line-item.render-after
purchase.checkout.cart-line-list.render-after
purchase.checkout.contact.render-after
purchase.checkout.delivery-address.render-after
purchase.checkout.delivery-address.render-before
purchase.checkout.footer.render-after
purchase.checkout.header.render-after
purchase.checkout.payment-method-list.render-after
purchase.checkout.payment-method-list.render-before
purchase.checkout.pickup-location-list.render-after
purchase.checkout.pickup-location-list.render-before
purchase.checkout.pickup-location-option-item.render-after
purchase.checkout.pickup-point-list.render-after
purchase.checkout.pickup-point-list.render-before
purchase.checkout.reductions.render-after
purchase.checkout.reductions.render-before
purchase.checkout.shipping-option-item.details.render
purchase.checkout.shipping-option-item.render-after
purchase.checkout.shipping-option-list.render-after
purchase.checkout.shipping-option-list.render-before
purchase.thank-you.announcement.render
purchase.thank-you.block.render
purchase.thank-you.cart-line-item.render-after
purchase.thank-you.cart-line-list.render-after
purchase.thank-you.customer-information.render-after
purchase.thank-you.footer.render-after
purchase.thank-you.header.render-after

Anchor to ExamplesExamples

Anchor to Basic BlockSpacerBasic BlockSpacer

Basic BlockSpacer

Basic BlockSpacer

import {

reactExtension,

BlockSpacer,

View,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

<>

View

</View>

View

</View>

</>

);

}

import {extension, BlockSpacer, View} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {

const blockSpacer = root.createComponent(View, undefined, [

root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),

root.createComponent(BlockSpacer, {spacing: 'loose'}),

root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),

]);

root.appendChild(blockSpacer);

});

React

import {
  reactExtension,
  BlockSpacer,
  View,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <View border="base" padding="base">
        View
      </View>
      <BlockSpacer spacing="loose" />
      <View border="base" padding="base">
        View
      </View>
    </>
  );
}

JS

import {extension, BlockSpacer, View} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const blockSpacer = root.createComponent(View, undefined, [
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(BlockSpacer, {spacing: 'loose'}),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
  ]);

  root.appendChild(blockSpacer);
});

Anchor to PropertiesProperties

Anchor to blockspacerpropsBlockSpacerProps

Anchor to id id string: A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.
Anchor to spacing spacing <> Default: 'base': The size of the spacer.

MaybeResponsiveConditionalStyle

A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the `Style` helper which simplifies the creation of conditional styles.

T | ConditionalStyle<T, ViewportSizeCondition>

ConditionalStyle

A conditional style definition that maps one or more conditions to different values. The `default` value is used as a fallback when none of the conditions in `conditionals` are satisfied.

conditionals
An array of conditional values.
```
ConditionalValue<T, AcceptedConditions>[]
```
default
The default value applied when none of the conditional values specified in `conditionals` are met.
```
T
```

ConditionalValue

A single conditional branch that pairs a set of conditions with the value to apply when those conditions are met.

conditions
The conditions that must be met for the value to be applied. At least one condition must be specified.
```
AcceptedConditions
```
value
The value that will be applied if the conditions are met.
```
T
```

ViewportSizeCondition

A condition that targets layouts based on the inline size (width in horizontal writing modes) of the viewport.

viewportInlineSize
The minimum viewport inline size that the condition must match.
```
{ min: T; }
```

Spacing

A keyword that maps to a predefined spacing value from the design system. Use these instead of pixel values to ensure consistent spacing throughout the UI. - `none`: No spacing (0px). - `extraTight`: The smallest amount of spacing. - `tight`: A compact amount of spacing, suitable for tight layouts. - `base`: The default spacing, appropriate for most layouts. - `loose`: A generous amount of spacing, used to create visual separation. - `extraLoose`: The largest amount of spacing.

'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose'

Anchor to docsstyleDocsStyle

Anchor to default default <T>(defaultValue: T) => <T, > required: Sets an optional default value to use when no other condition is met.
Anchor to when when <T>(conditions: , value: T) => <T, > required: Adjusts the style based on different conditions. All conditions, expressed as a literal object, must be met for the associated value to be applied.

The when method can be chained together to build more complex styles.

StylesConditionalStyle

conditionals

An array of conditional values.

StylesConditionalValue<T, AcceptedConditions>[]

default
The default value applied when none of the conditional values specified in `conditionals` are met.
```
T
```

StylesConditionalValue

conditions
The conditions that must be met for the value to be applied. At least one condition must be specified.
```
AcceptedConditions
```
value
The value that will be applied if the conditions are met.
```
T
```

StylesBaseConditions

The full set of conditions available for conditional styling. At least one condition must be specified.

focus
Applies when the component has keyboard or programmatic focus.
```
true
```
hover
Applies when the user is hovering over the component with a pointer device.
```
true
```
resolution
A minimum device pixel ratio that must be met. Higher values target high-density (Retina) displays.
```
1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4
```
viewportInlineSize
A minimum viewport inline-size breakpoint that must be met.
```
{ min: ViewportInlineSize; }
```

ViewportInlineSize

A keyword that maps to a viewport inline-size breakpoint from the design system. - `extraSmall`: A very narrow viewport, typically small phones. - `small`: A narrow viewport, such as a large phone or small tablet. - `medium`: A medium viewport, such as a tablet in landscape. - `large`: A wide viewport, such as a desktop display.

'extraSmall' | 'small' | 'medium' | 'large'

StylesConditions

The set of conditions available for viewport-responsive and interactive styling. At least one condition must be specified.

focus
Applies when the component has keyboard or programmatic focus.
```
true
```
hover
Applies when the user is hovering over the component with a pointer device.
```
true
```
viewportInlineSize
A minimum viewport inline-size breakpoint that must be met.
```
{ min: ViewportInlineSize; }
```

Was this page helpful?