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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/slab/content/blocks/utility/visibility.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.