Ready-made styles for your banner and popup

Your banner already takes its colours, font, corners and button shape from the Default look page. These templates go further with one paste: a softer shadow, pill buttons, a brand-colour bar or a serif headline. Each one works with the bar and with every popup layout, so you only change the colours.

Where your banner can appear

Under Default look › Banner and popup, Presentation chooses a Bar (at the Top of the page or the Bottom of the page) or a Popup. A popup has seven layouts: most sit in the middle of the page, Minimal sheet rises from the bottom edge, Corner toast sits in the bottom corner and Split image shows your photo beside the words. A notice rule always shows as a popup with the Notice layout.

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 every rule: Default look › Banner and popup › Custom CSS.
• For one rule only: open the rule, press Customize, then paste into Custom CSS for this rule. It is added to your store's Custom CSS, not a replacement.

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.

Clean white card

A white card with a soft shadow, a dark main button and an outlined second button.

& {
  background-color: #ffffff;
  color: #1f2933;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}
& .sl-act a {
  background-color: #1f2933;
  color: #ffffff;
  border-radius: 10px;
}
& .sl-act button {
  background-color: #ffffff;
  color: #1f2933;
  border-color: #cbd2d9;
  border-radius: 10px;
}
& .sl-x {
  color: #52606d;
}

Colours: lines 2, 3, 5, 8, 9, 13, 14, 15 and 19. Change the colour codes on those lines to your own and leave everything else as it is.

Dark with a bright button

A near-black surface with a yellow main button that stands out.

& {
  background-color: #111827;
  color: #f9fafb;
}
& .sl-act a {
  background-color: #facc15;
  color: #111827;
  font-weight: 700;
}
& .sl-act button {
  background-color: #111827;
  color: #f9fafb;
  border-color: #4b5563;
}
& .sl-x {
  color: #d1d5db;
}

Colours: lines 2, 3, 6, 7, 11, 12, 13 and 16. Change the colour codes on those lines to your own and leave everything else as it is.

Pill buttons

Fully rounded buttons in one brand colour, on a white surface.

& {
  background-color: #ffffff;
  color: #1f2933;
}
& .sl-act a,
& .sl-act button {
  border-radius: 999px;
}
& .sl-act a {
  background-color: #2563eb;
  color: #ffffff;
  padding: 10px 22px;
}
& .sl-act button {
  background-color: #ffffff;
  color: #2563eb;
  border-color: #2563eb;
}
& .sl-x {
  color: #1f2933;
}

Colours: lines 2, 3, 10, 11, 15, 16, 17 and 20. Change the colour codes on those lines to your own and leave everything else as it is.

Brand-colour band

A deep green bar with an uppercase headline and white pill buttons. Made for the bar at the top or bottom of the page. The first two rules style only the bar; on a popup, only the buttons and the × change.

&.sl-top,
&.sl-bottom {
  background-color: #0f5132;
  color: #ffffff;
  padding: 10px 24px;
}
&.sl-top strong,
&.sl-bottom strong {
  text-transform: uppercase;
  letter-spacing: 1px;
}
& .sl-act a {
  background-color: #ffffff;
  color: #0f5132;
  border-radius: 999px;
}
& .sl-act button {
  background-color: #0f5132;
  color: #ffffff;
  border-color: #ffffff;
  border-radius: 999px;
}
& .sl-x {
  color: #ffffff;
}

Colours: lines 3, 4, 13, 14, 18, 19, 20 and 24. Change the colour codes on those lines to your own and leave everything else as it is.

Soft cream bar

A light cream bar with a thin gold line on the side that faces the page. Made for the bar at the top or bottom of the page. The first three rules style only the bar; on a popup, only the buttons and the × change.

&.sl-top,
&.sl-bottom {
  background-color: #fffaf0;
  color: #3d2b1f;
}
&.sl-top {
  border-bottom: 2px solid #e8c48a;
}
&.sl-bottom {
  border-top: 2px solid #e8c48a;
}
& .sl-act a {
  background-color: #3d2b1f;
  color: #fffaf0;
  border-radius: 6px;
}
& .sl-act button {
  background-color: #fffaf0;
  color: #3d2b1f;
  border-color: #3d2b1f;
  border-radius: 6px;
}
& .sl-x {
  color: #3d2b1f;
}

Colours: lines 3, 4, 7, 10, 13, 14, 18, 19, 20 and 24. Change the colour codes on those lines to your own and leave everything else as it is.

Classic serif

Warm paper colours, a serif font, a spaced uppercase headline and square buttons. The last block makes the headline a little smaller on a phone.

& {
  background-color: #faf7f2;
  color: #2b2118;
  font-family: Georgia, "Times New Roman", serif;
  border-radius: 4px;
}
& #sl-pop-t,
& strong {
  letter-spacing: 1px;
  text-transform: uppercase;
}
& .sl-act a {
  background-color: #2b2118;
  color: #faf7f2;
  border-radius: 0;
}
& .sl-act button {
  background-color: #faf7f2;
  color: #2b2118;
  border-color: #2b2118;
  border-radius: 0;
}
& .sl-x {
  color: #2b2118;
}
@media (max-width: 600px) {
  & #sl-pop-t,
  & strong {
    font-size: 18px;
  }
}

Colours: lines 2, 3, 13, 14, 18, 19, 20 and 24. 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.