What’s the best way to start styling personalizations?

This guide is specifically for beginners who want to style their personalizations in Spotler Activate. You’ll learn how to safely adjust colors, fonts, layout spacing, and more — without needing to write full templates. All examples include copy-paste CSS code you can use right away.

On this page you have the following options:

• How to inspect elements
• Common classes and CSS properties
• CSS prefix
• Styling your button
• Styling text
• Styling layout
• Testing and support

How to inspect elements

To style a personalization, you first need to inspect the elements on the page:

1. Right-click any element (e.g. a button) in your personalization preview
2. Choose Inspect or press F12
3. The browser will highlight the HTML and show all applied CSS styles

From there, you can identify class names and see how elements are built.

When styling:

• An id must be prefixed with # #thiselementid
• A class must be prefixed with . .thiselementclass

Common Spotler Activate classes and CSS properties

Below are some of the most frequently used classes across Spotler Activate templates:

• Different overlay containers: .sqzly-modal, .sqzly-toaster, .sqzly-bar
• Where the content sits: .sqzly-modal-content, .sqzly-description, .sqzly-body
• Specific elements: #sqzly-title, .sqzly-btn, .sqzly-modal-image, .sqzly-modal-close, .sqzly-toaster-close, .sqzly-bar-close

Useful CSS properties to style these elements:

• Colors: background-color, color
• Text: font-family, font-size, font-weight
• Spacing: padding, margin, border-radius
• Lay-out: width, height, border

CSS prefix

Every personalization has a unique internal ID. This is why your CSS must always begin with a prefix, like:

#sqzly_abc123 .sqzly-btn { ... }

Instead of copying the entire ID manually, use the {{cssPrefix}} variable. This ensures your styles always apply to the right version, even after changes.

{{cssPrefix}} .sqzly-btn {
  background-color: #0033cc;
  color: white;
}

Styling your button

Want to match your website's button color and shape? Here’s a simple CSS example you can adapt:

{{cssPrefix}} .sqzly-btn {
  background-color: #0077cc;
  color: #fff;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 4px;
  border: none;
}

To change hover behavior:

{{cssPrefix}} .sqzly-btn:hover {
  background-color: #005fa3;
}

a.sqzly-btn will always override .sqzly-btn, because it is more specific.

Styling text

To update font size, family or alignment in the description area:

{{cssPrefix}} .sqzly-description {
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #333;
  text-align: center;
}

Styling layout

To adjust spacing, background or container styling:

{{cssPrefix}} .sqzly-modal {
  padding: 30px;
  background-color: #f8f8f8;
  border-radius: 8px;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

To center content or adjust image sizing:

{{cssPrefix}} .sqzly-modal-image {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

Testing and support

Once you've added your CSS, preview the personalization to check your changes. The CSS applies instantly in the preview, but always test it live using a test URL before publishing.

Tip: use https://developer.mozilla.org/en-US/ and AI when working on custom CSS styling.