Customize the widget

Most of the widget’s appearance is editable from the theme editor, with no code. For anything beyond those settings — a custom font, a narrower layout — you can add a few lines of CSS to your theme.

Change colors and sizes

Go to Online Store → Themes → Customize, open the page with the widget on it, and select the Hero ID Discount block. You can set:

• Background color, text color, and border radius
• Text size and button text size
• Button color, button text color, and hover color
• Button padding and button border radius

Click Save and the changes are live.

Fonts

The widget uses your theme’s font, so it matches the rest of your store automatically. There’s nothing to set up.

If you want the widget to use a different font than your theme, add custom CSS.

Use a custom font

In the theme editor, go to Theme settings → Custom CSS and add:

.hero-id-root,
.hero-id-root__modal-overlay {
  font-family: "Poppins", sans-serif;
}

Include both selectors. The pop-up is rendered at the end of the page rather than inside the block, so a rule that targets only .hero-id-root changes the inline widget and leaves the pop-up on your theme’s font.

If your theme doesn’t have a Custom CSS setting, add the same rule to the bottom of your main stylesheet instead — usually assets/base.css under Online Store → Themes → Edit code.

Pick a font your theme already loads

The browser can only use a font that’s loaded on the page. If you name a font your theme doesn’t load, it falls back to the next font in the list.

Many themes, including Dawn, expose their fonts as CSS variables. That’s the safest way to borrow one:

/* Use the theme's heading font for the whole widget */
.hero-id-root,
.hero-id-root__modal-overlay {
  font-family: var(--font-heading-family);
}

To use a font your theme doesn’t load yet, add it to your theme first — through your theme’s own font settings, or by uploading it under Content → Files and adding an @font-face rule in your stylesheet.

Other useful selectors

Target these the same way, from Custom CSS:

Selector	What it styles
.hero-id-root	The inline widget on the page
.hero-id-root__modal-overlay	The dimmed backdrop behind the pop-up
.hero-id-root__modal	The pop-up itself
.hero-id-root__heading	The widget’s headings
.hero-id-root__text	Body copy
.hero-id-root__button	The primary button
.hero-id-root__button--secondary	The outlined secondary button
.hero-id-root__input	Text inputs, like the email field
.hero-id-root__link	Inline links

For example, to make the pop-up wider:

.hero-id-root__modal {
  max-width: 560px;
}

Notes

• Custom CSS applies to both the app block and the manual Liquid embed.
• Changes made in Custom CSS are part of your theme, so they survive app updates — but they don’t carry over if you switch to a different theme.
• If a rule doesn’t seem to apply, your theme may be loading its stylesheet after your custom CSS. Add !important to the declaration, or move the rule lower in your stylesheet.