2.1. How to Add/Edit Pop Card Details (Settings) #

The Settings tab lets you configure the core details of your Pop Card, including its name, type, display, and any internal notes.

1. Navigating to Settings 

• After clicking Start on the Create a Pop Card/Optin screen, you’ll land directly on the Settings tab.
• To edit an existing Pop Card, open the Pop Card List View (see Navigating to popCards for full steps) and select the one you want to update, and it will open in the Settings tab by default, where you can review or update its basic details.
  

2. Fill in the fields: 

• Pop Card Name – Pre-filled with the name you entered earlier (e.g., “Test Pop Card”). You can edit it here if needed.
• Pop Card Type – Shows the type you selected earlier (Text, Image, or Text with Image).
  Note: This field cannot be changed here. If you want to select a different format, click the Back button at the top of the form to return to the previous (Create a Pop Card/Optin) screen.
• Notes (Optional) – An open text field for internal notes or reminders (e.g., “Holiday campaign pop-up”). Customers will not see this field.

Tip: Use the Notes field if you’re running multiple campaigns. It helps you remember the purpose of each card (e.g., “Black Friday Free Shipping Banner”).

• Pop Card Display – A dropdown menu with the same options you chose before (Every Page, Home, Checkout, or Custom Page).
  
  • If you select Every Page, Home, or Checkout, your pop card will display only in that location.
  • If you select Custom Page, you’ll see an extra option to add specific page links:
    1. Click the green “+” button (circle with a plus icon) to add a page link (URL).
    2. A field will appear where you can type or paste the full page link (URL).
       Example: https://yourstore.com/sale.

Tip: When adding a custom page, always paste the full link (including https://) from your store website. This ensures the Pop Card displays on the exact page you set.

3. Each input field has an “X” button beside it. Click this if you want to remove that page.
4. You can add as many custom pages as you need by clicking the green button again.

Tip: Use Custom Page when you want to show the pop card on specific pages like campaign landing pages, blog articles, or special product launches.

Tip: Use the Preview button anytime to check how your popCard looks as you build it. You can preview changes at each stage – whether you’re naming it, setting placement, adjusting behavior, or designing the look. This is especially helpful if you’re new and want to visualize what a pop card is before finishing the setup.

Tip: You can click Save in any tab to keep your changes so far, or wait until you’ve finished all sections and save once at the end. Both work — choose whichever feels more secure for you.

2.2. How to Customize Pop Card Positioning (Placement) #

This section lets you decide where and how your pop card will appear on the page.

1. Navigating to Placement 

• After creating a new Pop Card and completing the Settings tab, click on the Placement tab to decide where and how your Pop Card will appear.
• To edit an existing Pop Card, open the Pop Card List View (see Navigating to popCards for full steps) and select the one you want to update. Then open the Placement tab, where you can review or adjust its position, sticky behavior, and background display.
  

2. Customize Pop Card Placement

Step 1: Sticky and Dim Options (Optional)

• Make this Pop Card Sticky – Check this box to keep the pop card fixed in place, even when visitors scroll the page.
• Make this Pop Card Dim Background – Check this box to darken the rest of the page behind the pop card and draw focus to your message.

✅ You can select either option alone or both together, depending on how much attention you want the popCard to grab.

💡 Tip: Sticky + Dim is ideal for urgent promotions, but use sparingly so visitors don’t feel overwhelmed.

Step 2: Placement Options

💡Insider Trick: Use the Preview button while choosing a placement–the PopCard updates instantly each time you click an option. This way, you’ll see exactly how it looks in real time (for example, “Across the Top” stretches full width, while “Bottom Right” anchors neatly in the corner) as you decide what works best.

Click one of the placement buttons to choose where your popCard will appear:

• Across the Top – Stretches across the full width at the top of the site.
• Top Left – Displays in the upper-left corner.
• Top Right – Displays in the upper-right corner.
• Center – Pops up in the middle of the page content.
• Bottom Left – Displays in the lower-left corner.
• Bottom Right – Displays in the lower-right corner.
• Across the Bottom – Stretches across the full width at the bottom of the site.

Note: If Sticky is unchecked, your pop card will behave like part of the page content. For example, “Across the Bottom” will only show at the very bottom of the page (below the footer), and “Across the Top” will only show at the very top. With Sticky checked, your popCard stays fixed on screen, even as visitors scroll.

Tip: Looking for visibility? Try “Center” or “Across the Top” for standout impact. Prefer something more subtle? Corner placements or “Across the Bottom” work well as gentle reminders without getting in the way. Feel free to test every option and find what feels right for your store–and keep an eye on other website elements (like chat widgets or pop-ups) to avoid overlap.

2.3. How to Control How and When Pop Cards Appear (Behavior) #

This section controls how visitors interact with your Pop Card, who sees it, and when it appears.

1. Navigating to Behavior 

• After setting up the Placement tab, click on the Behavior tab to configure how visitors interact with your Pop Card, who sees it, and when it appears.
• To edit an existing Pop Card, open the Pop Card List View (see Navigating to popCards for full steps) and select the one you want to update. Then go to the Behavior tab to review or adjust its visibility rules and triggers.
  

2. Customize Pop Card Behavior

Step 1: How Visitors Can Close or Exit Pop Cards

Under “Hide Pop Card When”, choose how you want visitors to close the pop-up:

• Click outside the Pop Card – The pop-up will close when a visitor clicks anywhere outside of it.
• Click the X – The pop-up will close only when a visitor clicks the close button (X) in the corner.

Tip: If you want to make sure visitors read your message before closing, choose Click the X. For a lighter, less intrusive experience, use Click Outside the PopCard.

Step 2: Who Will See Your Pop Card

Under “Who to Show”,  decide which visitors should see your pop-up:

• All Visitors – Show to everyone who visits your site.
• New Visitors Only – Target people visiting for the very first time.
• Returning Visitors Only – Re-engage visitors who have already been to your site before.
• Logged-In Customers – Only display to users who are signed into their account.

Tip: Targeting specific groups (like new or returning visitors) makes your Pop Cards feel more personal and can boost engagement

Step 3: When Your Pop Card Appears

Under “When to Display,” choose the exact moment the pop-up will show:

• Immediately – Shows right away when the page loads.
• After Time (Seconds) – Shows after a set delay. When selected, enter the number of seconds before it appears.
• When Scrolled Down (%) – Shows after the visitor scrolls down a set percentage of the page. Enter the percentage in the field provided.
• When User Tries to Leave – Shows when a visitor’s mouse moves to close the tab or leave the page (exit intent).

Tip: Use “After Time” or “When Scrolled Down” for less intrusive pop-ups. Reserve “Immediately” for urgent announcements, and “Exit Intent” to recover abandoning visitors.

Step 4: How Often Pop Cards Display

Under “Max Display Frequency”, set how often each visitor will see your pop-up:

• Every Visit – Shows each time they visit your site.
• Once per Hour – Shows once within an hour.
• Once per Day – Shows once per day.
• Once per Week – Shows once per week.
• Once per Month – Shows once per month.

Tip: Limiting frequency (e.g., once per day) helps reduce annoyance while still keeping your promotions visible.

2.4. How to Customize the Look of Your Pop Card (Design) #

In this tab, you’ll control the visual appearance of your Pop Card — including choosing a layout (when applicable), text, fonts, colors, buttons, images, animations, and extra styling.

Navigating to Design

• After setting up the Behavior tab, click on the Design tab to customize how your Pop Card looks.
• To edit an existing Pop Card, open the Pop Card List View (see Navigating to popCards for full steps) and select the one you want to update. Then open the Design tab to review or adjust its visual elements.

Customize the Look of Your Pop Card #

⚠️ Heads-up: The design options you see depend on the Pop Card type you selected earlier (Quick Message or Opt-in, plus whether it’s Text, Image, or Text with Image). Don’t worry if your screen looks a little different — it just adjusts to your selection.

Design Settings for Each PopCard Type #

The table below provides a quick reference showing which customization options are available for each Pop Card type.

For more in-depth instructions, including helpful tips and best practices, you can click the links in each section to access the detailed guide. Use the table for a fast overview, and the detailed guide whenever you want step-by-step guidance or extra recommendations.

Quick Message Pop Card #

1. Text Only #

Customization Settings	Detailed Guide Reference
Pop Card Text & BackgroundHeading Text: Add/edit the heading; adjust font, size, and color.Body Text: Add/edit the body message; adjust font, size, and color.Background Color: Set the background color for the Pop Card.	See Customizing Text ↗See Customizing Background ↗
ButtonLabel text: Edit the button label.Colors: Set the button color.Font: Adjust font style, size, and color.Link: Define the link destination. Choose whether it opens in the same tab or a new tab.	See Customizing Buttons ↗
Animation & Additional StylingBorders: Adjust border color and style.Pop Card Width: Set the overall width of the Pop Card.Opacity: Control the transparency of the Pop Card.Animation: Select an entry animation for how the Pop Card appears.	See Customizing Animations ↗See Customizing Additional Styling ↗

2. Image Only #

Customization Settings	Detailed Guide Reference
Image & AnimationImage: Upload or replace an image.Alt Text: Add descriptive text for the image (for accessibility and SEO).Animation: Select an entry animation for how the Pop Card appears.	See Customizing Images ↗See Customizing Animations ↗

3. Text with Image
#

Step 1: Choose Your Layout

Select a layout style for your Pop Card to get started. Each option shows a sample design with different image shapes and arrangements. You’ll be able to customize the colors and overall look in the next step.

Step 2: Customization

Customization Settings	Detailed Guide Reference
Pop Card TextHeading Text: Add/edit the heading; adjust font, size, and color.Body Text: Add/edit the body message; adjust font, size, and color.	See Customizing Text ↗
ButtonLabel text: Edit the button label.Colors: Set the button color.Font: Adjust font style, size, and color.Link: Define the link destination. Choose whether it opens in the same tab or a new tab.	See Customizing Buttons ↗
Image & AnimationIcon/Image: Set an icon or upload or replace an image.Alt Text: Add descriptive text for the image (for accessibility and SEO).Animation: Select an entry animation for how the Pop Card appears.	See Customizing Icon/Images ↗See Customizing Animations ↗
Additional StylingBackground Color: Set the background color for the Pop Card.Borders: Adjust border color and style.Pop Card Width: Set the overall width of the Pop Card.Opacity: Control the transparency of the Pop Card.	See Customizing Animations ↗See Customizing Additional Styling ↗

---

Opt-in Pop Card #

1. Text Only #

Customization Settings	Detailed Guide Reference
Opt-in Text & BackgroundHeading Text: Add/edit the heading; adjust font, size, and color.Body Text: Add/edit the body message; adjust font, size, and color.Background Color: Set the background color for the Pop Card.	See Customizing Text ↗See Customizing Background ↗
Opt-in FormEmail Field: Set placeholder/label text, background color, text color, font, and font size.First Name Field: Set placeholder/label text, background color, text color, font, and font size.Corner Style: Adjust corner style for form fields.	See Customizing the Opt-in Form ↗
ButtonLabel text: Edit the button label.Colors: Set the button color.Font: Adjust font style, size, and color.Link: Define the link destination. Choose whether it opens in the same tab or a new tab.	See Customizing Buttons ↗
Animation & Additional StylingBorders: Adjust border color and style.Pop Card Width: Set the overall width of the Pop Card.Opacity: Control the transparency of the Pop Card.Animation: Select an entry animation for how the Pop Card appears.	See Customizing Animations ↗See Customizing Additional Styling ↗

2. Text with Image #

Step 1: Choose Layout

Select a layout style for your Pop Card to get started. Each option shows a sample design with different image shapes and arrangements. You’ll be able to customize the colors and overall look in the next step.

Note: Some layouts don’t include a first name field. If you want to collect first/full names, choose a layout that includes the first name field so you can customize it later in the Opt-in Form settings.

Step 2: Customization

Customization Settings	Detailed Guide Reference
Opt-in TextHeading Text: Add/edit the heading; adjust font, size, and color.Body Text: Add/edit the body message; adjust font, size, and color.	See Customizing Text ↗
Opt-in FormEmail Field: Set placeholder/label text, background color, text color, font, and font size.First Name Field: Set placeholder/label text, background color, text color, font, and font size.Corner Style: Adjust corner style for form fields.	See Customizing the Opt-in Form ↗
ButtonLabel text: Edit the button label.Colors: Set the button color.Font: Adjust font style, size, and color.Link: Define the link destination. Choose whether it opens in the same tab or a new tab.	See Customizing Buttons ↗
Image & AnimationIcon/Image: Set an icon or upload or replace an image.Alt Text: Add descriptive text for the image (for accessibility and SEO).Animation: Select an entry animation for how the Pop Card appears.	See Customizing Icon/Images ↗See Customizing Animations ↗
Additional StylingBackground Color: Set the background color for the Pop Card.Borders: Adjust border color and style.Pop Card Width: Set the overall width of the Pop Card.Opacity: Control the transparency of the Pop Card.	See Customizing Background ↗ See Customizing Additional Styling ↗

Navigation tip: Use the back arrow in the header to return to the design menu. The square back button in the top corner will take you all the way back to the Create PopCard screen.

Design Settings (Detailed Guide) #

Use these guides to configure each design element in detail. Each guide provides step-by-step instructions, helpful tips, and best practices to ensure your Pop Card looks and functions exactly how you want.

As you set up your Pop Card, you may need to move back and forth between these guides to reference different elements, colors, or layouts — this will help you make all the necessary adjustments efficiently.

Customizing Text #

This section lets you personalize the Heading and Body text of your Pop Card. Clear, readable text is key to making your message stand out.

Heading Text

• Enter Heading – Type your PopCard title in the Heading Text (H2) editor.
• Formatting – Style your title with bold, italic, underline, bullets, or numbering.
• Font – Choose a heading font from the dropdown.
• Text Color – Click the color circle to pick a font color.
• Font Size – Adjust with the slider (14px-50px).
  

💡 Best Practice: Keep your heading short (5-7 words). A clear, punchy headline grabs attention faster.

Body Text

• Enter Message – Add your supporting text in the Body Text (P) editor.
• Formatting – Same options as the heading (bold, italic, bullets, etc.).
• Font – Choose a body font.
• Text Color – Select a font color with the color picker.
• Font Size – Adjust with the slider (11px-30px).
  

Tip: Try keeping your text in short sentences or bullet points. Shoppers usually find these easier to read at a glance.

Note: To change colors, click directly on the colored circle — not the entire dropdown field.

Tip: Preview your Pop Card often while customizing text. This helps you quickly spot if fonts are too small, colors are hard to read, or text doesn’t align well with your chosen layout.

Customizing Background #

Your background sets the overall tone of your Pop Card. Depending on the layout you selected earlier, you may see different background color options here:

• Layouts with a single background color
  Field available:
  • Background Color – Pick a color for the Pop Card’s overall background.
    
    
• Layouts with a main and accent color
  Fields available:
  • Main Background Color
    • This is the primary color of your Pop Card, automatically set based on the layout you chose earlier.
    • Click the color picker to change it if you want a different primary background.
      
      
  • Secondary Background Color
    • This is the accent color used in your chosen layout (for example, wavy edges or decorative elements).
    • It’s not optional–it reflects the design style of your layout.
    • Click the color picker to adjust it if you’d like a different accent.

Best Practice: Use your brand colors, but keep contrast high for readability. For example, light text on a dark background.

Customizing Buttons #

This section controls how your Pop Card button looks and where it takes your visitors. Buttons are one of the most important parts of your Pop Card, since they drive the action you want users to take.

Button Text

• Enter Label – Type the button text (e.g., Shop Now, Claim Offer, Subscribe).
• Keep it short and action-oriented so visitors instantly know what to do.

Best Practice: Use verbs like Get, Claim, or Join to encourage clicks.

Button Colors

• Background Color – Click the color circle to open the picker and set your button’s background color.
• Text Color – Click the circle beside Text Color to change the text inside the button.

Best Practice: Make sure your button color contrasts with your Pop Card background — high contrast means better visibility.

Button Link (Redirection)

• Destination URL – Enter the full page link where visitors should land after clicking.
  • Example: https://yourstore.com/collections/sale
• Open in New Tab – Tick the checkbox if you want the link to open in a separate browser tab (recommended if linking outside your main site).

⚠️ Important: Always test your links. Broken or incorrect links can lose conversions.

Button Font & Size

• Font – Choose a style from the dropdown (matches your site branding).
• Font Size – Adjust using the slider (0px-100px) until the text is readable but balanced.

Previewing Your Button

• Click Preview to instantly see how your button looks inside the PopCard.
• Adjust text, colors, and size until it’s both eye-catching and clear.

Best Practice: Always check readability on both desktop and mobile previews.

Tip: Use the Preview button while customizing your button. It lets you instantly see how the text, colors, and link placement will look — ensuring your button is both eye-catching and functional.

Customizing Icon/Images #

Images and animations make your PopCard more engaging. Use them wisely to add personality without overwhelming your message.

Icon Settings #

Note: For Quick Message – Image Only Pop Cards, the icon fields do not apply. You can skip the icon settings and proceed directly to the Image Settings below.

1. Use Icon from Materialize
   • Visit materializecss.com to browse the full list of available icons.
   • Paste the name of a Materialize icon in this field.

Note: The Materialize icons site may feel technical because it shows code examples. For PopCards, you only need the icon name (e.g., home, star, email). Copy that name and paste it into this field.

2. Icon Size
   • Adjust the size of your chosen icon using the slider (50px-150px).

Image Settings #

1. Upload an Image

• Instead of an icon, you can upload an image.
• Click the upload field, drag and drop a file, or browse from your device.
• Supported formats: JPG and PNG.
• Image height must not exceed 75px.
  

2. Image Alt Text

• Enter a short description of your image (important for accessibility and SEO).

Note: If both an icon and an uploaded image are provided, the system will prioritize the icon.

Customizing Animations #

Animation Settings

1. PopCard Animation
   • Choose how your Pop Card will appear on the page from the dropdown.
   • Options include: No Animation, Fade In, Slide Right, Slide Left, Slide Down, Slide Up, Zoom In, Roll In, Rotate In, Shake, Flash, Bounce, Flip, Swing.

Tip: On most websites, subtle animations like Fade In or Slide are considered best practice, as they draw attention without distracting visitors. However, depending on the Pop Card’s purpose and your brand’s personality, feel free to adapt what works best for your store.

Tip: Use the Preview button anytime to see how your animation looks before saving.

Customizing Additional Styling #

This section lets you adjust borders, sizing and transparency for your Pop Card.

Border Color

• Click the color selector to pick a color for your Pop Card’s border.
• Background Border Style
  • Choose from the following styles:
    • None – No border.
    • Solid – A continuous line.
    • Dotted – A line made of dots.
    • Dashed – A line made of dashes.
    • Inset – A recessed border effect.
      
  • ✅ The UI previews these styles directly, so you can see what each looks like before applying.
• Pop Card Width
  • Use the slider (350px-700px) to control how wide your Pop Card will be.
• Opacity
  • Adjust how transparent or solid your Pop Card appears, using the slider (0-100%).
    

Note: The default colors shown here are pulled from the layout you selected earlier. Adjusting them lets you fine-tune the design, but the main/secondary roles remain tied to the layout style.

Note: Don’t forget to click Save at the top of the page after making your adjustments.

💡Tip: Use the Preview button to see your final design in action before moving on. This helps ensure your colors, borders, and sizing all look good together.

Customizing the Opt-in Form #

The Opt-in Form is where your visitors will enter their information (like email and first name). A well-styled form builds trust and encourages sign-ups, so it’s worth fine-tuning these settings.

You can customize text, colors, corners, fonts, and sizes for each input field.

1. Email Field

• Field Text (Placeholder) – Type the text that appears inside the email field before the user types.
  Example: “Enter your email address”
• Background Color – Click the color selector to choose the background for the field.
• Text Color – Pick the color for the text inside the field.
• Corner Style – Choose from the dropdown:
  • Rounded Corners
  • Slightly Rounded
  • Squared Corners
    
• Font – Select the font style (options include Open Sans, Abril Fatface, etc.).
• Font Size – Use the slider (0px-100px) to adjust the size of the email text inside the field.

💡 Best Practice: Keep placeholder text simple and clear, e.g., “Your email” instead of longer sentences.

2. First Name Field

• Field Text (Placeholder) – Type the text that appears inside the first name field.
  Example: “Enter your first name”
• Background Color – Select a background color using the color picker.
• Text Color – Choose the color for the text inside the field.
• Corner Style – Choose from:
  • Rounded Corners
  • Slightly Rounded
    Squared Corners
    
• Font – Select the font style from the dropdown (same options as the email field).
• Font Size – Adjust with the slider (0px-100px).

Note: Some layouts include only the email field and Call-to-Action (CTA) button. If your chosen layout doesn’t have a first name field, customizing it here won’t affect your Pop Card.

Best Practice: Keep placeholder text simple and clear, e.g., “Your email” instead of longer sentences.

General Tips for Opt-in Forms:  • Consistency – Use the same corner style and font across all fields for a clean look. • Contrast – Make sure text color stands out clearly against the background color. • Mobile Preview – Always check your form on mobile. Rounded corners and text sizes can look different on small screens.

2.5. How to Configure Thank You Messages & Redirects (Opt-in Only) #

The Thank You Tab lets you decide what happens right after a visitor subscribes through your Opt-in PopCard. This is where you set the confirmation experience–either by showing a simple thank-you message, redirecting them to a link, or sending them a follow-up email.

Navigating to Thank You Setup

• If you’re creating an Opt-in Pop Card, this tab appears after the Design tab. Click on Thank You tab to configure what happens after a visitor subscribes.
• To edit an existing Opt-in Pop Card, open the Pop Card List View (see Navigating to popCards for full steps) and select the one you want to update. Then open the Thank You tab to review or adjust the post-subscription experience.

Configure Thank You Messages & Redirects #

1. Default Action

At the top of this tab, you’ll see a dropdown called Default with two options:

1. Thank You – Shows a custom thank-you message inside the PopCard.
   
   • Enter your message in the text field.
   • Example: “Thank you for subscribing! Check your inbox for updates soon.”
   • This message will automatically display right after the visitor opts in.
     
2. Send to This Link – Redirects visitors to a different page after they opt in.
   
   • Enter the URL (page link) in the text field.
   • Example: https://yourstore.com/welcome
   • After submitting, visitors are redirected straight to this link.

⚠️ Important: Always double-check your page links (URL) before saving to avoid broken redirects.

2. Sending a Confirmation Email

Below the default options, you’ll find a setting card labeled Send This Email with Yes/No radio buttons.

• Select Yes if you’d like subscribers to receive an automated thank-you email.
• Once enabled, new fields appear:
  1. Subject – Enter the subject line for your email.
     • Example: “Thanks for signing up with EPIC!”
       
  2. Email Body – Write the content of your email.
     • Example: “Thank you for signing up with EPIC. Please enjoy this coupon! – The EPIC Team”
       
  3. Test Email – Enter an email address and click Send Test Email to preview what subscribers will receive.

Tips:  • Keep your subject line short, clear, and friendly. • Make your email body concise and clearly explain what the subscriber will receive (e.g., discount, newsletter, freebie). • Test your email flow by sending a test email to ensure the experience feels smooth, helpful, and not overwhelming for your customers.

3. Saving Your Settings

Once you’ve customized the Thank You message, redirect link, or confirmation email, don’t forget to:

1. Click Preview to check how it looks.
2. Click Save to make sure your settings are applied.

⚠️ Warning: If you leave this tab without saving, your changes will be lost.