Ready-made styles for your notice
Four ready-to-copy looks for a notice, the message a Notice rule shows with no redirect. Paste one, change its colours, save.
A Notice rule shows a message, such as “We don’t ship to your country yet”, and never sends the visitor anywhere. It always shows as a popup with the Notice layout: your picture or a globe, your words and one button to keep browsing. These templates restyle it with one paste.
How to use a template
- Press Copy code on the template you like.
- Paste it into the box named below and change the colour codes on the lines listed under the template. A colour code looks like #1f2933: you can copy one from your theme's settings or from any color picker.
- Wait a moment for the preview beside the box to update, then save.
Where to paste it:
- For one notice: open the Notice rule, press Customize, then paste into Custom CSS for this rule.
- For every notice: Default look › Banner and popup › Custom CSS. The template styles only notices, so your other banners keep their look.
SignalLane checks what you paste and keeps your styles to its own surface, so nothing else on your store changes. If you want to start again, press Remove custom CSS under the box.
Calm blue
A light blue card with a thin border and a dark blue button: friendly, for a message such as “We don’t ship there yet”.
&.sl-notice {
background-color: #eff6ff;
color: #1e3a5f;
border: 1px solid #bfdbfe;
border-radius: 14px;
}
&.sl-notice .sl-act button {
background-color: #1e40af;
color: #ffffff;
border-radius: 8px;
}
&.sl-notice .sl-x {
color: #1e3a5f;
}Colours: lines 2, 3, 4, 8, 9 and 13. Change the colour codes on those lines to your own and leave everything else as it is.
Warm amber
A soft amber card with a brown button, for a notice that asks for attention without alarm.
&.sl-notice {
background-color: #fffbeb;
color: #78350f;
border: 2px solid #fcd34d;
border-radius: 12px;
}
&.sl-notice #sl-pop-t {
color: #92400e;
}
&.sl-notice .sl-act button {
background-color: #92400e;
color: #ffffff;
border-radius: 999px;
}
&.sl-notice .sl-x {
color: #78350f;
}Colours: lines 2, 3, 4, 8, 11, 12 and 16. Change the colour codes on those lines to your own and leave everything else as it is.
Dark
A dark card with light text and a white button.
&.sl-notice {
background-color: #1f2937;
color: #f3f4f6;
border-radius: 16px;
}
&.sl-notice .sl-act button {
background-color: #ffffff;
color: #1f2937;
border-radius: 8px;
}
&.sl-notice .sl-x {
color: #f3f4f6;
}Colours: lines 2, 3, 7, 8 and 12. Change the colour codes on those lines to your own and leave everything else as it is.
Plain outline
A white card with a dark outline and square corners, for stores with a simple, clean look.
&.sl-notice {
background-color: #ffffff;
color: #111111;
border: 2px solid #111111;
border-radius: 0;
}
&.sl-notice .sl-act button {
background-color: #111111;
color: #ffffff;
border-radius: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
&.sl-notice .sl-x {
color: #111111;
}Colours: lines 2, 3, 4, 8, 9 and 15. Change the colour codes on those lines to your own and leave everything else as it is.
Choosing your colours
Use your store's own colours: the same background and button colours as your theme make the surface feel part of your store. Keep text dark on a light background, or light on a dark one, so every visitor can read it. Text colours that are more than half see-through are refused, but a pale grey on white is still up to you to avoid.
Colours can be written as a code such as #2563eb, as rgb(37, 99, 235), or as a color name such as navy. If you are not sure, keep the code format the template uses.
Questions and answers
- Will a notice template change my other banners?
- No. Every line starts with the notice's own name, so it styles only notices, even when you paste it into the Default look page.
- Does it work on a notice that blocks browsing?
- Yes. A notice that blocks browsing has no button and no ×, so the lines for those simply have nothing to style.
- Can SignalLane support change a template for me?
- The templates are ready to use as they are. Once you change one beyond its colours, the styling is yours to look after.
- Why does my store look slightly different from the picture?
- The pictures use sample words and your store's text size, font and theme can differ. The preview beside the box in SignalLane shows your own store's result.
Was this helpful?
Related articles
- Style libraryReady-made styles for your banner and popup
Six ready-to-copy looks for the bar at the top or bottom of the page and every popup layout. Paste one, change its colours, save.
- Visitor rulesWhat is the difference between Instant, Banner and Notice?
Instant redirects straight away, Banner lets the visitor choose whether to go, and Notice tells visitors you don't serve their region without sending them anywhere.
- Visitor rulesStyle your banner with Custom CSS
Add your own CSS to the banner, the popup, the 404 suggestions card and the cart suggestion: where the boxes are, the parts you can style, what SignalLane refuses and why, and the limits.