> For the complete documentation index, see [llms.txt](https://docs-shpf.bsscommerce.com/bss-b2b-lock-login-password-hide-price/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-shpf.bsscommerce.com/bss-b2b-lock-login-password-hide-price/lock-core-concepts/goal-based-guides-i-want-to.../hide-page-sections-and-blocks-conditionally.md).

# Hide page sections & blocks conditionally

Hide specific storefront sections, banner blocks, price tables, or custom theme elements based on customer login status, tags, or passcode.

Hide any storefront section — promotional banner, pricing block, RFQ inquiry form, or product section — based on who is visiting without modifying Liquid code.

***

| **💡 Quick Tips**                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------- |
| • **Native Section/Block mode:** Auto-detects Liquid sections and blocks from your active theme.                          |
| • **Custom CSS Selector mode:** Target custom HTML elements, classes (`.class`), IDs (`#id`), or third-party app widgets. |
| • **Custom Fallback Message:** Replace the hidden element with custom notice text to avoid awkward blank spaces.          |
| • Always test rules in a private/incognito window before going live.                                                      |

***

### On This Page

1. [Eligibility Requirements](#eligibility-requirements)
2. [What This Feature Does](#what-this-feature-does)
3. [Availability & Limitations](#availability--limitations)
4. [Step 1 — Create a New Lock](#step-1--create-a-new-lock)
5. [Step 2 — Set Target (Native vs CSS Selector)](#step-2--set-target-native-vs-css-selector)
6. [Step 3 — Set Access Conditions & Fallback Message](#step-3--set-access-conditions--fallback-message)
7. [Third-Party App Element Support](#third-party-app-element-support)
8. [Common Issues & Troubleshooting](#common-issues--troubleshooting)

***

## Eligibility Requirements

* BSS B2B Lock app installed and active.
* Standard Shopify theme (Online Store 2.0 or compatible Liquid theme).
* Admin staff or store owner permissions.
* Buyer customer tags configured in Shopify Admin (for tag-based conditions).

{% hint style="warning" %}
**Scope Note**: Does not apply to checkout pages or third-party iframe elements without accessible CSS selectors.
{% endhint %}

***

## What This Feature Does

Hides specific parts of your storefront from visitors who do not meet your conditions — without permanently deleting them from your theme.

* **Wholesale-only banners:** Show promotional wholesale banners only to tagged B2B buyers.
* **Hide Inquiry / RFQ Forms:** Hide custom contact or quote request forms from retail shoppers.
* **Hide Custom Price Blocks:** Selectively hide custom pricing tables or discount notices.
* **Granular CSS Targeting:** Hide any element by class name (`.custom-block`) or element ID (`#special-offer`).

***

## Availability & Limitations

| Content Target                             | Supported       | Notes                                                    |
| ------------------------------------------ | --------------- | -------------------------------------------------------- |
| **Native Shopify Sections & Blocks**       | ✅ Supported     | Select from auto-detected list in your active theme      |
| **Custom CSS Selectors (`.class`, `#id`)** | ✅ Supported     | Target any storefront HTML element                       |
| **Third-Party App Elements**               | ⚠️ Limited      | Supported if the element exposes a valid CSS class or ID |
| **Checkout Pages**                         | ❌ Not Supported | Checkout is outside storefront theme scope               |

***

## Step 1 — Create a New Lock

1. Go to **Shopify Admin → Apps → BSS B2B Lock**.
2. From the **Lock List**, click **Add Rule**.
3. In the **Select Rule Type** modal, choose **Hide Section/Block/Snippet**.
4. Click **Select**.

***

## Step 2 — Set Target (Native vs CSS Selector)

### Option A — Native Section/Block (Recommended for standard themes)

1. Select **Native Section/Block**.
2. Click the section dropdown to view all sections auto-detected from your active theme.
3. Select the target section or block you wish to hide.

### Option B — Custom CSS Selector (For custom themes & app widgets)

1. Select **Custom CSS Selector**.
2. Inspect the element on your live storefront (Right-click → **Inspect**).
3. Copy the exact class (e.g. `.wholesale-announcement`) or ID (e.g. `#b2b-pricing-table`).
4. Enter the selector into the field and click **Add**.

{% hint style="warning" %}
**Selector Accuracy**: The selector must match exactly. A typo will prevent the lock script from identifying the target element on page load.
{% endhint %}

***

## Step 3 — Set Access Conditions & Fallback Message

1. In **Step 2 — Control Access**, define who can still see the section (e.g. `Customer Tag contains wholesale` or `Customer is logged in`).
2. In **Step 3 — Advanced Settings**, choose whether to:
   * **Hide completely:** Leaves no placeholder.
   * **Display Custom Fallback Message:** Renders a clean replacement message (e.g. *"Log in as an approved distributor to view this section"*).
3. Click **Save**.

***

## Third-Party App Element Support

You can hide blocks generated by page builders and review apps:

* **Page Builders:** PageFly, Shogun, GemPages, Zipify.
* **Review & Widget Apps:** Judge.me, Loox, Yotpo.

**How to target:**

1. Open your storefront in Chrome/Safari.
2. Right-click the widget → **Inspect**.
3. Copy its container CSS class (e.g. `.pagefly-section-b2b` or `.judgeme-widget`).
4. Paste it as a **Custom CSS Selector** in B2B Lock.

***

## Common Issues & Troubleshooting

### Section still visible after lock is active

* Verify the rule status is **Enabled** in the Lock List.
* Clear your browser cache and test in a fresh Incognito window.
* For CSS selectors, confirm the selector matches the live HTML structure.

### Section hidden for everyone, including approved buyers

* Check if the **Reverse access rule** condition was accidentally enabled.
* Verify the test customer account has the exact tag assigned in Shopify Admin.

### Section not appearing in the Native list

* The section may be inactive or conditionally loaded by the theme. Use **Custom CSS Selector** mode instead.

***

## **Still Need Help?**

If you have questions or need assistance configuring BSS B2B Lock, our dedicated support team is here to help.

* **In-App Assistance:** Click **Need help?** or use the in-app chat button within BSS B2B Lock.
* **Email Support:** Contact us at [**support-sbc@bsscommerce.com**](mailto:support-sbc@bsscommerce.com) with your store URL and specific rule details.