App Embed #2: Entry Pop-Up Modal Design

Modified on Sat, 29 Jun at 2:52 PM

Overview

The Entry Pop-Up Modal embed allows you to customize the initial modal that customers see when they first visit your site. This modal is crucial for ensuring compliance by confirming that customers are 21+ and selecting their shipping state.


Where the Modal Appears

  • Location: The pop-up modal appears immediately when customers first enter the store website.

What This Embed Does

  • Purpose: The entry modal is important for your customers to confirm they are 21+ and select their shipping state for compliance purposes. This ensures that only eligible customers can proceed with viewing and purchasing products.

Customization Options

You can personalize the look and feel of the pop-up modal using the Shopify customizer. This includes customizing the following elements:

  • Title: The main heading of the modal.
  • Subtitle: A secondary heading that can provide additional context.
  • Logo: Add your store's logo for branding consistency.
  • Description Text: Text that describes the purpose of the modal, such as age verification and shipping state selection.

Customizer View

  • Modal Display in Customizer: The modal display will routinely appear in your customizer view. You can choose to disable this display in the customizer once you have configured the entry modal to your satisfaction. This toggle affects only the customizer view, making it easier to design other aspects of your site without the modal repeatedly appearing.

How to Customize the Entry Pop-Up Modal

  1. Access Theme Customization:
    • In Shopify, click on your Theme and then click Customize.
  2. Open App Embeds:
    • Click on the App Embeds icon (the third icon on the left-side navigation bar).
  3. Select Entry Pop-Up Modal Embed:
    • Find the Entry Pop-Up Modal embed (CS 2. Entry Modal) and ensure it is turned on.
  4. Customize Modal Elements:
    • Adjust the title, subtitle, logo, and description text to match your branding and compliance needs.
  5. Toggle Modal Display in Customizer:
    • If you prefer not to see the modal repeatedly in the customizer, you can turn off its display while you work on other customizations.
  6. Save Changes:
    • After customizing the modal, click Save to apply your changes.


By following these steps, you can ensure that your entry pop-up modal is both compliant and aligned with your store’s branding, providing a smooth entry experience for your customers.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article