> For the complete documentation index, see [llms.txt](https://crushsuite.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://crushsuite.gitbook.io/docs/compliance/storefront-and-checkout/the-compliance-gate-experience-visual-walkthrough.md).

# The Compliance Gate Experience — Visual Walkthrough

This page is a step-by-step visual walkthrough of what your customers see from landing on your store to completing a purchase. Use it to understand the experience from your customer's perspective and

### Step 1: First Visit — Entry Modal

A new customer lands on your store. The **Entry Pop-Up Modal** appears immediately, presenting:

* Your **winery logo** (if configured)
* A **title and description** welcoming them
* An **age confirmation** — they confirm they're 21 or older
* A **state selector** — they choose their shipping state from a dropdown

Once they confirm both, the modal closes and they're on your store.

<figure><img src="https://3906158595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagSKdREExJMSW7WgxBLr%2Fuploads%2FVeUw5Gn0UsxOJ9ER7gxl%2FCleanShot%202026-06-23%20at%2013.33.15.png?alt=media&amp;token=b74b57cf-060e-4af0-a28d-54d4cb2eafdc" alt=""><figcaption></figcaption></figure>

***

#### Step 2: Browsing — Product Availability

With their state selected, the customer browses your store. CrushSuite is working in the background:

* **Available products** display normally on product pages and in collections
* **Restricted products** show a compliance message on their product page (e.g., "This wine cannot be shipped to your state") and a visual badge on collection thumbnails
* The **floating shipping button** (a small map icon) is visible in the corner of the screen, allowing the customer to change their state at any time

If the customer clicks the shipping button and selects a different state, all product availability updates instantly.

***

#### Step 3: Product Page — Compliance Details

When the customer clicks on a wine product, the product page shows:

* Standard product information (images, description, pricing, variants)
* **Compliance details** — powered by the Product Page Compliance embed:
  * Whether the product can ship to their state
  * Optionally, a list of all states the product can ship to (toggle-able in your embed settings)
  * If unavailable, a **cannot-purchase message** that you've customized

<figure><img src="https://3906158595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagSKdREExJMSW7WgxBLr%2Fuploads%2FyoIDfHoge3SoBDWISCFV%2FCleanShot%202026-06-23%20at%2013.34.21.png?alt=media&amp;token=b8149bfb-eaf3-4070-8a52-d2126420b55d" alt=""><figcaption></figcaption></figure>

***

#### Step 4: Cart — Fees Calculated

The customer adds wine to their cart. CrushSuite automatically calculates and displays:

* **State alcohol fee** — appears as a separate line item (e.g., "State Alcohol Fee × 3" for three 750ml bottles)
* The fee amount is based on the customer's selected state and the quantity/size of bottles

The cart otherwise looks exactly like a standard Shopify cart. Wine products, merchandise, alcohol fees, and standard pricing all display together.

<figure><img src="https://3906158595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagSKdREExJMSW7WgxBLr%2Fuploads%2FRVJ7Jpwh3pa0ld3jPKpw%2FCleanShot%202026-06-23%20at%2013.37.30.png?alt=media&amp;token=c7c5f3ba-6bc3-41c3-b0f6-24f7bddf3571" alt=""><figcaption></figcaption></figure>

***

#### Step 5: The Compliance Form

When the customer clicks **Checkout**, the CrushSuite **compliance form** appears before they reach Shopify. Depending on your settings it either **slides in as a drawer from the right** or opens as a **centered modal**. It collects everything needed to verify the order:

* **Your details** — email and date of birth (age verification)
* **Billing address** — with predictive address autofill, so customers barely type
* **Shipping address** — or a single **"Same as Shipping Address"** checkbox to reuse billing

For signed-in customers, their saved details are pre-filled automatically. When they click **Verify Purchase**, CrushSuite confirms the order is compliant and sends them into Shopify checkout with their information already populated.

If the order can't be verified, the form shows a **non-compliance** message explaining what to fix (age, state, or cart). The customer is never silently blocked.

<figure><img src="https://3906158595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagSKdREExJMSW7WgxBLr%2Fuploads%2Fz1yCkVHc4xCPKOnLYLrB%2FCleanShot%202026-06-23%20at%2013.40.22.gif?alt=media&amp;token=43805984-3678-456a-bf2b-1c00ff652b13" alt=""><figcaption></figcaption></figure>

***

***

### Step 6: Order Confirmation

After payment, the customer sees Shopify's standard order confirmation page with:

* Order number and details
* Product summary including alcohol fees
* Shipping information and expected delivery

**For Vinoshipper users:** The order syncs to Vinoshipper immediately for fulfillment. Tracking information updates in Shopify once Vinoshipper ships the order.

**For self-compliance users:** The order appears in your Shopify orders dashboard for you to fulfill through your own process.

***

#### Key Takeaway

Your customers never leave Shopify. The entire experience — from age verification through payment — happens within your existing theme. CrushSuite adds the compliance layer invisibly, and every customer-facing element, including the compliance form, is customizable through your app embed settings.