Skip to main content

Per-block mobile overrides

Theme blocks (threshold bar, PDP gift preview, PDP buy-get pairing, urgency banner, inline tier stack, collection eligibility overlay, gift unlock celebration) ship a single mobile breakpoint that activates below 640px wide.

You don't get a separate Mobile / Tablet / Desktop matrix - one toggle, one breakpoint. Anything wider than 640px renders the block exactly as you set it on the default tab.

What you can override on mobile​

Six visual settings have a mobile-specific value:

  • Max width - cap the block at a narrower px value so it doesn't span edge to edge on phones.
  • Font size - tighten body text for the smaller viewport.
  • Padding - reduce the inner whitespace so the block doesn't feel oversized.
  • Border radius - swap a chunky desktop radius for a tighter mobile one if the block sits flush with neighbors.
  • Shadow - drop the desktop shadow on mobile (helps when the block sits inside an already-shadowed cart drawer).
  • Animation - turn off entrance animation on mobile if it competes with the cart-open transition.

What does NOT change per breakpoint​

  • Color, background, accent - global, the same on every screen.
  • Copy / button text / translations - global.

If you want to hide a block entirely on one device class, that's separate from overrides: every block's Behavior tab has Hide on mobile and Hide on desktop checkboxes.

How to set it​

  1. Open any theme block in the block editor.
  2. Toggle Mobile overrides on in the Behavior tab.
  3. Fill in only the fields you want to override. Empty fields fall through to the desktop value.

Next: Operations -> Where to find analytics ->