Home > widget-integration > CountdownTimerController > injectCampaignStyles

CountdownTimerController.injectCampaignStyles() method

Inject campaign-specific CSS (colors, fonts, sizes) via JS.

Signature:

protected injectCampaignStyles(): void;

Returns:

void

Remarks

The Liquid <style> block uses {{ styleSettings.* }} but Shopify's template pipeline applies strip_newlines | replace: ' ', ' ' which collapses {{ }} inside CSS { } blocks (braces get separated by spaces). We replace that broken <style> with correctly built CSS.

Example

Override to append custom CSS rules:

protected injectCampaignStyles() {
  super.injectCampaignStyles();
  const style = this.element?.querySelector('style');
  if (style) {
    style.textContent += '\n.boost-sd__countdown-timer { border-radius: 8px; }';
  }
}