Docs / Design & display

Customizing your brand look

SupaPop lets your popups match your store. You can set brand colors and a logo once in Settings, then fine-tune the look of any individual section in the editor with its own colors, fonts, width, alignment, and images. This keeps every popup on-brand without rebuilding the same styles by hand each time.

Before you start

The Brand block lives on the Settings page and only shows up once your store record exists. On a brand-new install, give it a moment after first opening the app, then revisit Settings if you do not see it yet.

Your brand settings act as defaults. They seed the colors for any new section you add and give you a one-click way to recolor an existing popup later.

  1. Open the Settings page and find the Brand section.
  2. Under Colors, set your four brand colors: Primary, Secondary, Text, and Background. Each color has a swatch picker and a hex field. The hex field accepts a standard six-digit color like #2C6ECB.
  3. To save time, click Auto-detect from theme. SupaPop reads your live theme and pre-fills the four color fields, then shows a message telling you to review and save. Auto-detect only fills the fields. You still have to save.
  4. Under Logo, click Upload logo to add your logo. Once a logo is set, the button reads Change logo.
  5. Click Save brand settings.

Defaults if you never set them: Primary #2C6ECB, Secondary #F0F4FF, Text #303030, Background #FFFFFF.

Apply your brand colors to an existing popup

Saving brand colors does not restyle popups you already built. To push your brand onto an existing popup, use the editor.

  1. Open the popup in the editor. If you have saved brand settings, an Apply brand colors button appears in the top bar.
  2. Click it. A confirmation dialog titled Apply brand colors to all sections? appears.
  3. Read the warning, then click Apply to confirm.
  4. This recolors every text, button, form, and survey answer section across all steps, and sets each step’s background to your brand Background color.
  5. Click Publish to make the changes live. Apply writes to your draft, so it does not go live on its own.

This action is not subtle. It overwrites colors on those sections everywhere in the popup, and there is no single undo. The dialog spells this out: you can change colors back with the per-section pickers, but it takes a while if you regret it.

Style an individual section

Every section has its own settings in the config panel on the right side of the editor. A text section, for example, gives you:

  • Text color and Background color. Leave Background color empty for no background. Setting it reveals Border radius (px) and Padding (px).
  • Font family, starting with System default plus 25 curated Google fonts. The font you pick loads in the preview so you see the real result.
  • Font weight: Regular, Medium, Semibold, or Bold.
  • Font size (px).
  • Alignment: Left, Center, or Right.

Form sections add a Button color and Button text color pair. When the two colors do not contrast enough to be readable, the picker flags it with a contrast-ratio warning next to the field, so you know to lighten or darken the text yourself. Set both colors so your button stays legible.

Control width and alignment

Most visual sections share the same layout controls.

  • Width: choose Full width, Fit to content, or Custom (px). Picking Custom reveals a Width (px) field. Custom widths are limited to 40 to 800 pixels.
  • Alignment: Left, Center, or Right. Survey and quiz answer panels label this control Text alignment instead.

Add images and logos to a section

Image and Logo sections both use the same uploader. In the Image section, you get a drop zone that reads Click or drag image here.

  1. Click the zone to pick a file, or drag an image onto it.
  2. Or paste a link into the Or paste URL field to use an externally hosted image.
  3. If you have uploaded images before, use Choose from library to reuse one.

The Logo section works the same way and adds Logo width (px) (left blank and shown as Auto) and Max height (px) (which defaults to 60). This per-section logo is separate from the store-wide logo in Settings, which is only used as the default for new logo sections.

Tips

  • Saving brand colors in Settings does not change your live popups. New sections pick them up, but existing popups only change when you click Apply brand colors in the editor.
  • The Secondary brand color is saved and shown in the Settings preview, but it is not applied to popup sections. Treat Primary, Text, and Background as the colors that actually drive your look.
  • Apply brand colors only appears once you have saved brand settings. With no saved brand, the button is hidden.
  • There is no store-wide font. Fonts are set per text section in the editor, so set the font on each text section you want to style.
  • Image limits apply across both the Settings logo and editor uploads: up to 5MB per file, formats JPEG, PNG, WebP, and AVIF, and 50 images per store total. The cap is for your whole store, so heavy per-section image use leaves less room for new uploads.

Troubleshooting

  • Auto-detect could not read my theme. You will see a message telling you to set colors manually. Just enter your hex values in the four color fields and click Save brand settings.
  • My upload was rejected. Files over 5MB return “Image must be under 5MB.” Unsupported formats return “Only JPEG, PNG, WebP, and AVIF images are allowed.” If you have hit the cap you will see “Image limit reached (50 images per store).” Delete or reuse existing images, or upload a smaller, supported file.
  • The Apply brand colors button is missing. Save your brand settings in Settings first. The button only shows when brand settings exist.