# Entry Pop-Up Modal Embed

### What This Embed Does

When a customer first visits your store, this modal appears as an overlay on top of your homepage. It asks the customer to:

1. **Confirm they are 21 or older** — legal requirement for alcohol purchases
2. **Select their shipping state** — determines product availability and fee calculations

Once the customer confirms, the modal closes and they browse your store normally. The modal does not appear again during the same session.

<figure><img src="/files/9tVAnshEgQg8izVdQfEL" alt=""><figcaption></figcaption></figure>

***

### Where the Modal Appears

The pop-up appears immediately when a customer first enters your store. It overlays on top of your existing theme and prevents interaction with the store until the customer completes the age and state selection.

This behavior is intentional — compliance requires that age verification happens before the customer can browse or purchase alcohol products.

***

### Customization Options

The entry modal is divided into three customization sections: **Branding & Layout**, **Age Verification**, and **Shipping State Pop-up**.

#### Branding & Layout

| Setting                   | What It Controls                                               | Default / Example           |
| ------------------------- | -------------------------------------------------------------- | --------------------------- |
| Logo                      | Your winery's logo image                                       | Uploaded image file         |
| Title                     | Main heading of the modal                                      | "WineMart"                  |
| Subtitle                  | Secondary line below the title                                 | "The header of entry modal" |
| Form Background Color     | Background fill of the modal form                              | `#FFFFFF`                   |
| Form Text Color           | Text color inside the form                                     | `#000000`                   |
| Delay pop-up by (seconds) | Seconds after page load before the modal appears               | `2`                         |
| Modal layout              | How the modal is displayed — centered overlay or bottom drawer | Centered / Drawer           |
| Corner radius             | Rounding applied to the modal, buttons, and inputs             | None                        |

#### Age Verification

Customize the copy shown in the age confirmation step.

| Setting                  | What It Controls                                 | Default                                         |
| ------------------------ | ------------------------------------------------ | ----------------------------------------------- |
| Age Header               | Primary question shown to the customer           | "Are you 21 or older?"                          |
| Age Subheader            | Supporting line below the header                 | "Please confirm you are of legal drinking age." |
| Age Button Over 21       | Text on the confirm button                       | "I'm 21 or older"                               |
| Age Button Under 21      | Text on the decline button                       | "I'm under 21"                                  |
| Age Error Message        | Message shown if the customer selects "Under 21" | "You must be 21 or older to access this site"   |
| Disable Age Confirmation | Skips the age verification step entirely         | Off (not recommended)                           |

{% hint style="danger" %}
**We strongly recommend keeping age confirmation enabled.** Disabling it means customers will not be shown the age gate — this may create compliance risk for your winery.
{% endhint %}

#### Shipping State Pop-up

Customize the copy shown in the state selection step.

| Setting                       | What It Controls                        | Default                                        |
| ----------------------------- | --------------------------------------- | ---------------------------------------------- |
| Shipping Header               | Primary question shown to the customer  | "Where are we shipping to?"                    |
| Shipping Subheader            | Supporting line below the header        | "Please select the state you are shipping to." |
| Default shipping state        | Pre-selects a state in the dropdown     | None                                           |
| Disable shipping state pop-up | Skips the state selection step entirely | Off (not recommended)                          |

{% hint style="danger" %}
**We strongly recommend keeping the shipping state pop-up enabled.** Without it, customers will not be routed to compliant products and shipping options for their state.
{% endhint %}

***

### How to Enable and Customize

1. In your Shopify Admin, click **Online Store → Themes → Customize**.
2. Click the **App Embeds** icon (third icon on the left navigation bar).
3. Find **"CS Entry Modal"** and toggle it on.
4. Click on the embed to expand its settings and work through each section:
   * Upload your **Logo** and enter your **Title** and **Subtitle**
   * Set your **Form Background Color** and **Form Text Color** to match your brand
   * Adjust the **Delay**, **Modal layout**, and **Corner radius** to fit your design
   * Customize the **Age Verification** copy (headers, buttons, and error message)
   * Customize the **Shipping State** copy and optionally set a default state

***

### Customizer Preview Note

The modal will routinely appear in your theme customizer preview as you work. This is normal — it shows so you can see how your customization looks. You can toggle the **"Display the modal in the customizer"** setting on/off without affecting whether real customers see it.

This toggle only affects the customizer view. On your live store, the modal always appears for first-time visitors as long as the embed is enabled.

***

### Best Practices

* **Keep the title welcoming.** This is often the customer's first impression of your brand. Use your winery name and a warm greeting.
* **Upload a high-quality logo.** It appears prominently in the modal and reinforces your brand identity.
* **Match your brand colors.** Use your winery's primary background and text colors to make the modal feel native to your store, not generic.
* **Consider the Drawer layout** for a softer, more modern entry experience — it slides up from the bottom rather than appearing as a centered overlay.
* **Don't over-customize the age/shipping copy.** The defaults are clear and compliant. Only adjust if you have a specific tone or language requirement.
* **Never disable both age confirmation and shipping state.** Each serves a distinct compliance purpose — disabling both effectively removes the gate entirely.


---

# 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/entry-pop-up-modal-embed.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.