Visibility

Overview

A container block that controls whether nested content is rendered at all (not merely hidden with CSS) based on device, customer, cart, visit session, URL path, and optional viewport rules. Approved-customer logic follows Theme settings > Account (matching tags and B2B handling). URL rules are evaluated in Liquid on the server to reduce flashing content. Session-based rules use browser storage and run in the customer’s browser.

Common use cases

• Show or hide content based on customer login status

• Display content only to approved or B2B customers

• Control visibility based on cart state (empty or not empty)

• Target first-time or returning visitors, or cap how many visits show a message

• Show or hide blocks on specific paths (for example /collections/*) or everywhere except chosen paths

• Reveal content when another element (identified by a CSS class) enters or leaves the viewport

• Prefer this over display: none when content should not appear in the DOM for some audiences

Compatible blocks

The following blocks can be nested within this block:

• All theme blocks

• App blocks

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals load or scroll animation settings (mutually exclusive)	Checkbox (default: false)

Display

Setting	Description	Options
Device visibility	Limits visibility to mobile or desktop	• All (default) • Mobile only • Desktop only
Customer visibility	Limits visibility by authentication and approval	• All (default) • Logged out • Any account • Approved account • B2B account
Cart visibility	Limits visibility by cart item count	• All (default) • Empty • Not empty
Session	Limits visibility by how many store visits the browser has recorded	• Always show (default) • First visit only • Returning visitors only • Show up to session count • Hide after session count
Session count	Visit count used when session is Show up to session count or Hide after session count	Number (default: 5) Visible when session uses a count-based mode
URL	Whether URL patterns are ignored, used to show only on matches, or hide on matches	• Show on all pages (default) • Show only on matching pages • Hide on matching pages
URL patterns	Comma-separated paths; * is a wildcard (for example /collections/*)	Textarea Visible when URL is not Show on all pages
Block	Whether nested content is always shown or tied to another element’s visibility	• Always show (default) • Show when block enters viewport • Show when block not in viewport
Block class	CSS class of the element to observe (for example buy-button)	Text Visible when block visibility uses a viewport mode
Toggle animation	How content appears or disappears when Alpine.js toggles visibility	• None (default) • Fade • Fade up • Fade down Applies when cart, session, URL rules, or block visibility use dynamic show or hide.
Load animation	Animation when the block first loads	• None (default) • Fade • Fade up • Offset fade • Offset fade up Visible when Show advanced settings is on and Scroll animation is None
Scroll animation	Animation tied to scroll position	• None (default) • Fade • Slide up • Slide down • Slide left • Slide right • Zoom Visible when Show advanced settings is on and Load animation is None