This article explains how to use the Advanced Custom CSS feature to take fine-grained control of the look of your authentication screens. It is written for brand designers, front-end developers, or anyone comfortable with CSS.
Prerequisites
Admin or Editor role.
A product template created in the Dashboard (see Product Templates: Customizing the Authentication Screens).
Plus, Advanced, or Custom plan. Advanced Custom Authentication Screens (HTML/CSS) are gated by plan — this feature is not available on Standard or Pro. If the toggle is disabled, contact your ForgeStop account manager.
Working knowledge of CSS (selectors, properties, pseudo-classes).
Why Use Custom CSS
The standard template editor lets you change fonts, colors, and text. Advanced Custom CSS goes further — you can adjust spacing, typography, borders, shadows, hover states, and anything else CSS supports. This is the level of control brand designers need to match a specific visual system on the consumer authentication page.
When Advanced Custom CSS is enabled, it overrides the color and font values set in the standard style editor. If you enable the feature, plan to manage every relevant style through CSS rather than mixing the two approaches.
Enabling Advanced Custom CSS
Open the Template Editor for your product.
Toggle Advanced Custom CSS to the on position at the top of the panel.
A confirmation dialog appears. Click Confirm. The CSS editor appears in place of the standard style controls.
Important: You must include the following sentinel at the top of your CSS for any rules to apply:
css :root { --advanced-css-enabled: 1; }
Without this declaration, the platform ignores your custom CSS entirely.
Selector Reference
All custom CSS is automatically scoped under #brand-template-root, so you do not need to prefix your selectors. Use the IDs and class names below to target specific elements.
Layout and Structure
Selector | Purpose |
| Outer viewport background (the area behind the card) |
| The authentication card itself |
| Small label above the product block |
Brand and Product Elements
Selector | Purpose |
| Brand logo at the top of the card |
| Wrapper applied when a custom logo is configured |
| Product image in the pre-verify state (typically blurred or grayscale) |
| Product image in the authenticated state (full color) |
| Product name |
| The |
| Individual metafield rows |
Buttons and Calls to Action
Selector | Purpose |
| Primary verification button |
| Lock icon inside the verify button |
| Tamper-state message rendered inside the verify button |
| Show More accordion toggle |
| Chevron/arrow icon inside the Show More toggle |
Fine Print and Status Messages
Selector | Purpose |
| Fine print below the card (privacy, contact) |
| Links inside the fine print |
| Tamper alert banner (appears only when the NFC tamper loop is broken) |
Supported Pseudo-States
:hover— supported on#verify-button,#show-more-button, and any<a>element.
Button Styling Rules
The button selectors above have a restricted property set. The platform's layout engine positions these elements; your CSS only styles them. Violating these rules causes the button to float, disappear, or overlap other elements.
On #verify-button, #verify-button svg, #verify-button > p, #show-more-button, and #show-more-button svg, do not set:
positionz-indexdisplayoverflowwidthheighttransform
Safe property whitelist for button selectors:
colorbackground, background-colorborder, border-radius, border-colorpaddingfont-family, font-size, font-weight, font-styleline-heightletter-spacingtext-transform, text-alignopacitybox-shadowtransition (only on :hover states)
Merge Tags
Merge tags let you insert dynamic values into template text fields and the Show More section. Use Handlebars syntax: #{{tag_name}}.
Product-Scope Tags
Tag | Example Output |
|
|
|
|
| Brand support URL |
Batch-Scope Tags
Tag | Example Output |
|
|
|
|
|
|
Scan-Scope Tags
Tag | Example Output |
| Unique scan UUID |
| Lifetime scans for this tag |
| NFC chip UID |
Locale and User Tags
Tag | Example Output |
|
|
|
|
|
|
Custom Metafields
Any metafield defined on the product or batch is available as:
#{{metafields.keyName}}
The key is case-sensitive and must match exactly how it was saved on the Metafields page. See Working with Metafields for details.
Conditional Blocks
Use Handlebars #{{#if}} blocks for conditional content:
#{{#if isUS}} <p>US residents qualify for a free trial.</p>#{{else}} <p>Available in your region.</p>#{{/if}}#{{#if isExpired}} <p><strong>This product has reached its expiration date.</strong></p>#{{/if}}
Supported flags: #{{isUS}}, #{{missingData}}, #{{tagTamper}}, #{{isExpired}}.
Note: Nested #{{#if}} blocks are not supported. Flatten your logic into sequential sibling conditionals.
Example — Minimal Brand Color Swap
:root { --advanced-css-enabled: 1; --brand-primary: #2563eb; --brand-text: #1f2937;}#card-foreground { background: #ffffff; border-radius: 1rem;}#product-title { color: var(--brand-text) !important; font-weight: 600;}#verify-button { background-color: var(--brand-primary) !important; color: #ffffff !important; font-weight: 700 !important; letter-spacing: 0.08em !important;}#show-more-button { background-color: transparent !important; color: var(--brand-primary) !important; border: 1px solid var(--brand-primary) !important;}
Troubleshooting
Issue | Solution |
My custom CSS does not apply at all | Add |
The Show More button is floating or misaligned | Remove |
Verify button text is invisible | The tamper message inside |
The blurred product image is not blurring | Target the blur with the full descendant selector: |
A merge tag renders as literal | Check the exact tag spelling. For custom metafields, use |
An external image is blocked | Use HTTPS URLs only. If the CDN host is blocked, contact support. |
A nested | Nested conditionals are not supported. Flatten to sibling conditionals. |
Need Help?
If you need further assistance, contact us at [email protected] or use the chat widget in your Dashboard.
Last Synced: 2026-04-23 · Sync Status: Current · ID: 14742475 · Language: English