Style your banner with Custom CSS

The controls on the Default look page and a rule's Customize screen already set the colours, font, text size, corners, button shape and heading weight. Custom CSS is for everything else: spacing, letter case, a different look on phones, or one part styled on its own.

Where the Custom CSS boxes are

• Default look › Custom CSS: for your banner and popup. Every rule uses it. The preview beside it shows the result as you type.
• Default look › Custom CSS for the 404 suggestions: for the suggestions card on missing pages, in the page or as a popup. The preview beside it shows the result on sample suggestions as you type; check a missing page on your store after saving too.
• Default look › Custom CSS for the cart suggestion: for the suggestion SignalLane shows in your cart. The preview beside it shows the result above a sample cart as you type; check your cart on your store after saving too.
• A rule's Customize screen › Custom CSS for this rule: added to your store's Custom CSS, not a replacement. It applies only to that rule's banner or popup.

A moment after you stop typing, SignalLane checks what you wrote and rewrites it in a compact form. Only that checked text reaches your store or the preview. Remove custom CSS under the box empties it.

The parts you can style

Start a selector with & to mean the banner itself, or name a part inside it. SignalLane puts the banner's own name in front of every selector, so your CSS never reaches the rest of your store.

Banner and popup

• &: the banner or popup itself.
• &.sl-top, &.sl-bottom: the bar, at the top or the bottom of the page.
• &.sl-card, &.sl-sheet, &.sl-corner, &.sl-split: the popup's shape.
• A layout: .sl-classic, .sl-dark, .sl-ed, .sl-min, .sl-toast, .sl-bold, .sl-split, .sl-sel, .sl-store or .sl-notice, written straight after & (for example &.sl-dark).
• #sl-pop-t: the popup's headline (p strong on the bar).
• #sl-pop-b: the body text.
• .sl-act: the row of buttons; .sl-act a is the main button and .sl-act button the second button.
• .sl-x: the close (×) button.
• .sl-flag: the visitor's flag.
• .sl-img: the picture.

404 suggestions card

• &: the card itself.
• h2 and p: its section headings and its lines.
• .signallane-suggested-products__grid: the product grid; .signallane-suggested-products__card is one product tile.
• .signallane-suggested-products__image, .signallane-suggested-products__title, .signallane-suggested-products__price: a tile's picture, title and price.
• li > a: a collection or page link.
• .sl-nf-x: the search row.
• .sl-nf-go: the countdown line before an automatic redirect.
• .sl-nf-c: the popup's close (×) button.

Cart suggestion

• &: the suggestion itself.
• p and strong: its message and its title.
• .slk-b: its button. In Match my theme on a Dawn or Horizon-based theme the button is your theme's own, which .slk-b does not reach; a does.
• .slk-x: its close (×) button.

The suggestion sits inside your cart, next to your theme's own buttons, so its box is narrower than the banner's: no margins and no maximum widths, so your cart's own buttons never move; on the suggestion itself only top and bottom padding (4px to 20px, with padding-block, padding-top or padding-bottom), because its sides keep room for the close button; up to 16px of padding inside it; gaps up to 16px; text 12px to 22px; line height a number from 1 to 1.8; borders up to 2px (thin, not medium or thick); a small shadow only (offsets up to 4px, blur up to 8px). Its button and close button take only colours, corners and text style. Readable colours in Custom CSS are up to you. The three Default look boxes share the store's 8,000 characters.

When Default look › 404 suggestions › Style is Custom, SignalLane styles the card with these same parts: &, h2, li > a, .sl-nf-x a, .signallane-suggested-products__card, .signallane-suggested-products__image and .sl-nf-go button. Your Custom CSS for the 404 suggestions comes after that style, so a rule of yours that names the same part wins. A less specific one, such as & a against li > a, does not.

You can also name the elements a, button, p, h2, h3, strong, span, img, ul, li, label and select, and the states :hover, :active, :focus-visible, :first-child and :last-child. @media works with min-width, max-width, prefers-color-scheme, prefers-reduced-motion and hover. !important is allowed.

What SignalLane refuses, and why

Your visitors must always be able to read the banner, close it and stay on your store. So SignalLane accepts only CSS it can check, and refuses anything that could hide, move or cover a button:

• Properties: colours, borders, corners, shadows, font, text size, line height, letter spacing, letter case, alignment, underline, padding, margin, gaps, maximum width and the pointer. Everything else is refused, including display, visibility, opacity, position, width, height, transform and background-image.
• Buttons: the close button, the Stay button and every other button take only colours, corners and text style, never spacing, sizes or shadows. The same goes for a part named only by a state, such as .sl-act > :last-child.
• The banner itself cannot be moved: & takes no margin. Parts inside it can.
• Colours: a hex colour, rgb(), rgba(), hsl() or hsla() with plain numbers, or a colour name, at 50% opacity or more. transparent and currentColor are refused, and so is every other function, such as calc(), var() and url(). A shadow's colour can be fainter.
• Sizes are plain px: text 10 to 48px; line height a number from 1 to 2, or 10 to 64px; letter spacing 0 to 4px; margin, padding and gaps 0 to 32px; borders up to 12px; maximum width at least 120px. A part's shadow can be offset at most 4px with at most an 8px blur; the banner's own shadow can be larger.
• Underlines: text-decoration-line can be none or underline.
• The pointer cannot be hidden (cursor: none).
• Selectors: only the parts and elements listed above. & can only start a selector and cannot be followed by + or ~, which would reach outside the banner. Attribute selectors, *, ::before and :not() are refused.
• Other rules: only @media. @import, @font-face and the rest are refused, as are < and backslashes. Quotes are only for font names.

When SignalLane refuses something, the message under the box says where it is and why. For example, .sl-x { display: none; } shows Line 1, column 9: The property "display" is not allowed in Custom CSS. Save stays off until you fix it. SignalLane never trims or repairs your CSS: it takes all of it or none.

Limits

• Your store's banner box and 404 box share 8,000 characters between them.
• Each rule's box has 4,000 characters.

Characters are counted as SignalLane sends them to your store, after the rewrite: comments and extra spaces are dropped and each selector gains the banner's name, so the count under the box can differ from what you typed. Every character is sent with every page of your store, so keep it short.

Check it before your visitors do

To see your banners on your store without being redirected, use the preview.

Examples

Capital letters and more room on the main button, and a larger headline, for the banner or a rule:

.sl-act a {
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 24px;
}
#sl-pop-t {
  font-size: 24px;
  line-height: 1.2;
}

A white main button on hover in the dark layout, and smaller body text on phones:

&.sl-dark .sl-act a:hover {
  background-color: #ffffff;
  color: #111111;
}
@media (max-width: 600px) {
  #sl-pop-b {
    font-size: 14px;
  }
}

For the 404 suggestions card: bolder product titles, a red price and underlined links:

.signallane-suggested-products__title {
  font-weight: 600;
}
.signallane-suggested-products__price {
  color: #b00020;
}
li > a {
  text-decoration-line: underline;
}

For the cart suggestion: a green button and a smaller message:

& .slk-b {
  background-color: #0a7d3b;
  color: #ffffff;
  border-color: #0a7d3b;
}
& p {
  font-size: 14px;
}