> 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/customizing-the-compliance-ui.md). # Customizing the Compliance UI CrushSuite's storefront compliance elements are designed to integrate seamlessly with your existing Shopify theme. Every customer-facing element can be customized to match your winery's branding. This ### All Customization Options at a Glance **Main CrushSuite App Embed** | Setting | Options | | -------------------------- | ---------------------------------------------- | | Shipping button visibility | On / Off | | Shipping button color | Any hex color | | Shipping button position | Top Left, Top Right, Bottom Left, Bottom Right | **Entry Pop-Up Modal Embed** | Setting | Options | | ---------------- | --------------- | | Title text | Custom text | | Subtitle text | Custom text | | Logo image | Upload your own | | Description text | Custom text | **Product Page Compliance Details Embed** | Setting | Options | | ------------------------------ | --------------------------------------------------------- | | Cannot purchase message | Custom text | | Show available shipping states | On / Off | | States list position | Under Add to Cart, Under main section, Above main section | **Collection Page Compliance Settings Embed** | Setting | Options | | ----------------------- | ----------------------------------------------- | | Cannot purchase message | Custom text | | Indicator color | Any hex color | | Indicator size | Adjustable | | Indicator position | Top Left/Center/Right, Bottom Left/Center/Right | **Pre-Checkout Compliance Form (CS 5. Cart Embed)** The compliance form is what customers complete after they click checkout. It collects age, billing, and shipping details and verifies the order before sending them to Shopify checkout. It's fully brandable, and out of the box it matches Shopify's native checkout so it looks polished with zero setup. **Display** | Setting | Options | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | Display style | Drawer (slides in from the right) / Modal (centered pop-up) | | Preview the compliance form | On / Off. Opens the form automatically so you can style it in the theme editor. No effect on your live store, remember to turn it off when you're done. | **Appearance** (defaults match Shopify's native checkout) | Setting | Default | Options | | ---------------------- | ---------- | --------------------------------------------------------------------------------------- | | Accent / button color | #1A1A1A | Any hex color | | Text color | #1A1A1A | Any hex color | | Background color | #FFFFFF | Any hex color | | Error color | #D72C0D | Any hex color | | Success color | #2E7D32 | Any hex color | | Inline form card color | #F6F6F7 | Background of the inline compliance form on the cart page (CS 6. Cart Compliance block) | | Corner radius | 8px | Slider | | Match my theme's font | On | Use your storefront's body font instead of the checkout-style default | | Font | system\_ui | Used when "Match my theme's font" is off | | Base font size | 14px | Slider | **Copy** | Setting | Default | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | Compliance Check Heading | Alcohol Compliance Check | | Compliance Check Description | All collected information is used for shipping notifications and to verify that we can legally ship alcohol to your desired destination. | | Success Heading | You're verified | | Success Message | Taking you to checkout… | | Non-compliance Heading | We're unable to verify your order | | Non-compliance Description | Please review the details below and update your information or cart items. | **Bypass** | Setting | Options | | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Enable pre-checkout compliance check | On (default) / Off. Turn off to run compliance only at checkout (for example, on Shopify Plus), the storefront form won't appear before checkout. | | Skip compliance when cart has no synced items | On / Off (default). Send carts with only gift cards or other non-compliance products straight to checkout. The form reappears the moment the cart contains a compliance-tracked product. | *** ### Branding Tips **Keep It Consistent** Use the same color for the shipping button and collection page indicators. Customers learn to associate that color with compliance information across your store. **Write Helpful Messages** The default "cannot purchase" messages work, but custom messages that reference your brand build more trust: * **Generic:** "Shipping unavailable to your state." * **Better:** "Due to state regulations, we're unable to ship this wine to \[state]. View our \[shipping info] page for details." **Make the Compliance Form Feel Native** By default, the compliance form's colors and corners mirror Shopify's native checkout, so customers feel like they never left your store. If you'd rather it match your storefront, turn on **Match my theme's font** and set the accent and background colors to your palette. Use **Preview the compliance form** to style it live in the theme editor, then turn the preview off before you save. **Match Your Theme** If your theme uses dark colors, choose lighter badge colors for contrast (and vice versa). The compliance UI should complement your design, not compete with it. **Test on Mobile** All CrushSuite embeds are responsive, but always preview on mobile to ensure the shipping button, entry modal, compliance form, and compliance badges look good on smaller screens. Use the Shopify customizer's mobile preview mode. *** #### How to Access All Embed Settings All CrushSuite embeds are managed from the same place: 1. **Shopify Admin** → **Online Store** → **Themes** → **Customize** 2. Click the **App Embeds icon** (third icon, left sidebar) 3. Each CrushSuite embed is listed, click to expand and customize *** #### Need More Help? If you're having trouble with embed customization or the compliance UI isn't displaying as expected, [contact our support team](https://crushsuite.com/contact), we're here to help.