Skip to main content

Pop Up

The Pop Up section creates a modal dialog that appears automatically when a page loads. It’s ideal for capturing leads, promoting offers, announcing launches, or displaying important messages (e.g., age verification, shipping delays, or newsletter sign-ups).

Settings​

  • Section class: Custom CSS class for spacing or layout overrides.
  • Background: Set a solid or gradient background color.
  • Or, use image: Apply a background image using a preset from Theme Settings → Style scheme settings → Background Image Schema.
  • Size: Modal width—small, default, large, or extra large.
  • Overlay opacity: Transparency of the dark backdrop behind the modal (0–100%).

Child Blocks​

You can include any combination of the following inside the pop-up modal:

Heading​

Modal title (e.g., “Get 10% Off Your First Order”). Settings follow Blocks → Basic Block → Heading.

Text​

Supporting message or terms. Settings follow Blocks → Basic Block → Text.

Button​

Primary action (e.g., “Close” or “Submit”). Settings follow Blocks → Basic Block → Button.

Newsletter form​

Email subscription input with Shopify integration. Settings follow Blocks → Basic Block → Newsletter form.

Contact form​

Full contact form for inquiries (see Blocks → Basic Block → Contact Form).

Countdown timer​

Urgency-driven timer for flash sales. Settings follow Blocks → Basic Block → Countdown timer.

Video​

Embedded or self-hosted video content. Settings follow Blocks → Basic Block → Video.

Image​

Static promotional or product image. Settings follow Blocks → Basic Block → Image.

3D model​

Interactive product visualization. Settings follow Blocks → Basic Block → 3D model.

🌟 Tip: Use pop-ups sparingly and always include a clear close button to avoid frustrating users. For best results, trigger them after a short delay or on exit intent.