# The Compliance Gate Experience — Visual Walkthrough *** ### 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. > 📸 **Screenshot:** Full entry pop-up modal as seen by a first-time customer, showing logo, title, age confirmation, and state selector *** ### 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. > 📸 **Screenshot:** Store homepage with the floating shipping button visible in the bottom-right corner > 📸 **Screenshot:** Collection page showing some products with green "available" indicators and others with "unavailable" compliance badges *** ### 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 > 📸 **Screenshot:** Product page for an available wine showing the "Ships to your state" compliance indicator and the list of available shipping states > 📸 **Screenshot:** Product page for a restricted wine showing the "Cannot ship to \[state]" message *** ### 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. > 📸 **Screenshot:** Shopify cart showing wine products plus the "State Alcohol Fee" line item *** ### Step 5: Checkout — Address Validation The customer proceeds to checkout. Shopify's standard checkout flow begins, but CrushSuite validates the shipping address before payment: * The address is checked for completeness, eligibility, and compliance * If the address passes, checkout continues without interruption * If it fails, the customer sees a message explaining the issue and how to fix it Payment processing uses **Shopify's native payment flow** — credit cards, Apple Pay, Shop Pay, or whatever payment methods you've enabled. CrushSuite doesn't touch payment. > 📸 **Screenshot:** Shopify checkout page showing the standard shipping address form *** ### 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 is customizable through your app embed settings. --- # 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://crushsuite.gitbook.io/docs/compliance/storefront-and-checkout/the-compliance-gate-experience-visual-walkthrough.md?ask= ``` 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.