Global CSS is a powerful feature that allows you to apply consistent brand styling across all your Dialogue assets with a single setup. Instead of manually customizing each asset individually, you can define your brand's colors, fonts, spacing, and design elements once, and they'll automatically apply to every Dialogue asset on your website.
Key benefits:
Save time: Style all your assets at once instead of customizing each one individually
Brand consistency: Ensure every Dialogue asset perfectly matches your website's look and feel
Automatic updates: Make changes once and see them instantly across all your assets
Don't worry if you're not a developer - this process is designed to be simple and straightforward. You'll just need to copy and paste a few lines of text.
In your Dialogue dashboard, navigate to Settings > Brand > Global CSS > Click on “How to use”.
You'll see a unique CSS file URL:
https://cdn.nowdialogue.com/prod/stores/mystorename......global.cssThis URL is automatically generated for your account and updates in real-time when you make styling changes.
You’ll find a pre-formatted HTML link tag that looks like this:
Click the copy button next to this code to copy it to your clipboard.
This is where you'll need to access your website's code, but don't worry - you're simply adding a line:
Access your website's HTML:
Find the <head> section in your website's code
Paste the link tag between <head> and </head>, preferably before other CSS files to ensure proper loading order.
Save your changes: Save the file or publish your changes
Once you've saved the changes:
Visit your website and check any pages with Dialogue assets
Your assets should now automatically inherit your global styling
Any future changes you make to your global CSS will appear instantly across all assets
Global CSS gives you complete control over your Dialogue assets' appearance:
Visual elements:
Colors (backgrounds, text, buttons, borders)
Typography (fonts, sizes, weight, spacing)
Spacing and padding
Button styles and hover effects
Badge and promotional element designs
Navigation arrow styles
Interactive elements:
Hover effects
Active states
Loading animations
Mobile-specific behaviors
Assets not showing your custom styles?
Double-check that you've added the link tag inside the <head> section
Ensure you've saved and published your website changes
Clear your browser cache and refresh the page
Verify the CSS URL is accessible by visiting it directly in your browser
With Global CSS, you can transform all your Dialogue assets to perfectly match your brand in just a few minutes. This one-time setup will save you hours of individual asset customization and ensure a consistent, professional appearance across your entire shopping experience.
Go to Brand Settings > Global CSS