How CSS customization works

ProofNudge injects messages into your storefront as HTML elements with well-defined CSS classes. You can override the default styles using the Custom CSS field in your campaign settings, or by adding CSS to your Shopify theme. The built-in style editor in the ProofNudge admin handles most use cases — colors, fonts, padding, borders, and animations are all configurable without writing code. This guide covers advanced customizations for when you need full control.

The built-in style options in the ProofNudge admin cover most customization needs. Only use custom CSS for advanced scenarios not covered by the visual editor.

CSS selectors reference

Every ProofNudge message uses these CSS classes. Use them as selectors in your custom CSS.

/* Main message container */
.proofnudge-message { }

/* Message text content */
.proofnudge-message-text { }

/* Icon container (left side) */
.proofnudge-message-icon { }

/* Dismiss button (if enabled) */
.proofnudge-message-dismiss { }

/* Image overlay wrapper */
.proofnudge-overlay { }

/* Inline/block message wrapper */
.proofnudge-inline { }

/* Campaign-specific: use data attribute */
[data-proofnudge-campaign="your-campaign-id"] { }

/* Message-specific: use data attribute */
[data-proofnudge-message="your-message-id"] { }

Common customizations

Change colors and background

Override the default message appearance with your brand colors.

/* Dark background with light text */
.proofnudge-message {
  background: #1a1a2e;
  color: #ffffff;
  border: 1px solid #2d2d44;
}

/* Soft brand-colored background */
.proofnudge-message {
  background: #fef3e2;
  color: #8b5e0b;
  border: 1px solid #f5d89a;
}

/* Transparent/glass effect */
.proofnudge-message {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

Change fonts and text styling

Match the message typography to your theme's font stack.

/* Use your theme's font */
.proofnudge-message-text {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Bold emphasis on the dynamic value */
.proofnudge-message-text strong {
  font-weight: 700;
  color: #e63946;
}

/* Uppercase small text style */
.proofnudge-message-text {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

Adjust spacing and borders

Control padding, margins, border radius, and shadow to match your theme's design language.

/* Compact pill style */
.proofnudge-message {
  padding: 6px 14px;
  border-radius: 20px;
  margin: 8px 0;
  box-shadow: none;
}

/* Card style with shadow */
.proofnudge-message {
  padding: 14px 18px;
  border-radius: 8px;
  margin: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
}

/* Full-width banner */
.proofnudge-message {
  padding: 10px 16px;
  border-radius: 0;
  margin: 0;
  border-left: none;
  border-right: none;
}

Custom icons

Style the icon area or hide it entirely.

/* Hide the icon */
.proofnudge-message-icon {
  display: none;
}

/* Larger icon with background circle */
.proofnudge-message-icon {
  width: 28px;
  height: 28px;
  background: rgba(13, 136, 241, 0.1);
  border-radius: 50%;
  padding: 5px;
}

/* Custom icon color */
.proofnudge-message-icon svg {
  stroke: #e63946;
}

Animations

ProofNudge supports several built-in animations. You can also define custom animations with CSS.

/* Fade in from below */
.proofnudge-message {
  animation: proofnudge-fade-up 0.4s ease-out;
}

@keyframes proofnudge-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Subtle pulse on the icon (draws attention) */
.proofnudge-message-icon {
  animation: proofnudge-pulse 2s ease-in-out infinite;
}

@keyframes proofnudge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Slide in from left */
.proofnudge-message {
  animation: proofnudge-slide-left 0.3s ease-out;
}

@keyframes proofnudge-slide-left {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Mobile-specific styles

Use media queries to adjust messages for smaller screens. ProofNudge also supports separate desktop and mobile placements in the admin — see placements and targeting for details.

/* Smaller text on mobile */
@media (max-width: 768px) {
  .proofnudge-message {
    padding: 8px 12px;
  }

  .proofnudge-message-text {
    font-size: 12px;
  }

  .proofnudge-message-icon {
    width: 16px;
    height: 16px;
  }
}

/* Hide specific messages on mobile */
@media (max-width: 480px) {
  .proofnudge-overlay .proofnudge-message {
    display: none;
  }
}

/* Full-width messages on mobile */
@media (max-width: 768px) {
  .proofnudge-message {
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

Campaign-specific styles

Target styles to individual campaigns or messages using data attributes. Find your campaign and message IDs in the ProofNudge admin.

/* Style only your "urgency" campaign */
[data-proofnudge-campaign="abc123"] .proofnudge-message {
  background: #fde8e8;
  color: #d03a2a;
  border: 1px solid #f5c4c4;
}

/* Style a specific message differently */
[data-proofnudge-message="msg456"] {
  font-weight: 700;
  font-size: 15px;
}

Where to add custom CSS

Option 1: ProofNudge admin (recommended)

Open your campaign in the ProofNudge app. In the message styling section, find the "Custom CSS" field. Paste your CSS here. It will be scoped to that campaign's messages automatically.

Option 2: Shopify theme CSS

Go to Online Store > Themes > Edit code. Open your theme's main CSS file (often base.css or custom.css). Add your ProofNudge CSS rules there. This approach gives you global control but requires managing CSS in two places.

Option 3: Theme editor custom Liquid

Add a <style> block in a custom Liquid section or snippet. This is useful if you want CSS that's conditional on Liquid variables (e.g., different styles per collection template).

Troubleshooting CSS issues

  • Styles not applying? Your theme CSS may have higher specificity. Add !important or increase specificity with a parent selector like .product-page .proofnudge-message.
  • Layout breaking? Check for overflow: hidden on parent elements. ProofNudge overlay messages need their parent to have position: relative.
  • Animations stuttering? Stick to transform and opacity properties for smooth GPU-accelerated animations. Avoid animating width, height, or margin.
  • Need more help? Check our troubleshooting guide or email support@proofnudge.com.

For message template inspiration, browse our template examples library. To learn about placement options before styling, see the placements and targeting guide.