Ready-made styles for your store closed page

While your store is closed, SignalLane can show visitors a page you design: a heading, your words, a picture, a countdown to opening and a password box. These templates restyle that page 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: open Visitor rules, press Store closed page, choose A page designed here under What visitors see, and paste into Custom CSS for the store closed page under Look. The preview beside the form shows the page as you change it.

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 card

Your words in a white card on a light grey page, with a dark button.

& {
  background-color: #f4f5f7;
  color: #1f2933;
}
& .sl-sc-in {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.12);
}
& button {
  background-color: #1f2933;
  color: #ffffff;
  border-radius: 8px;
}

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

Dark launch

A dark page with a large uppercase heading, a yellow countdown and a yellow pill button: made for a launch.

& {
  background-color: #0b1020;
  color: #f5f7ff;
}
& .sl-sc-t {
  font-size: 40px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
& .sl-sc-cd {
  color: #facc15;
}
& button {
  background-color: #facc15;
  color: #0b1020;
  border-radius: 999px;
}
& .sl-sc-po a {
  color: #c7d2fe;
}

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

Warm holiday

Soft peach colours with an orange heading and button, for a holiday break.

& {
  background-color: #fff7ed;
  color: #431407;
}
& .sl-sc-t {
  color: #c2410c;
}
& button {
  background-color: #c2410c;
  color: #ffffff;
  border-radius: 8px;
}
& .sl-sc-po a {
  color: #9a3412;
}

Colours: lines 2, 3, 6, 9, 10 and 14. Change the colour codes on those lines to your own and leave everything else as it is.

Brand colour

The whole page in one bold brand colour, with white text and a white button.

& {
  background-color: #1d4ed8;
  color: #ffffff;
}
& .sl-sc-t {
  font-size: 36px;
}
& button {
  background-color: #ffffff;
  color: #1d4ed8;
  border-radius: 4px;
}
& .sl-sc-e {
  color: #fde68a;
}

Colours: lines 2, 3, 9, 10 and 14. 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.