Ready-made styles for your 404 suggestions

When a visitor reaches a page that no longer exists, SignalLane can suggest products, collections and pages in its place, in the page or as a popup. These templates restyle those suggestions 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: Default look › 404 suggestions › Custom CSS for the 404 suggestions. The preview beside it shows the result on sample suggestions; check a missing page on your store after saving too.

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 product cards

Each suggested product in its own white card with a thin border and rounded corners.

& .signallane-suggested-products__card {
  background-color: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  padding: 8px;
}
& .signallane-suggested-products__title {
  color: #1f2933;
  font-weight: 600;
}
& .signallane-suggested-products__price {
  color: #52606d;
}

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

Soft panel

The whole set of suggestions on a warm, light panel with rounded corners.

& {
  background-color: #f7f5f2;
  color: #2b2118;
  border-radius: 16px;
  padding: 24px;
}
& h2 {
  color: #2b2118;
  font-size: 20px;
}
& li > a {
  color: #2b2118;
}

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

Pill links

Collections and pages as rounded, tinted buttons instead of plain links. The product pictures sit in links too, so the middle rule keeps them plain. Set its background to your page's own background colour.

& li > a {
  background-color: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
  border-radius: 999px;
}
& .signallane-suggested-products__card {
  background-color: #ffffff;
  color: #1f2933;
  border-radius: 0;
}
& .sl-nf-x a {
  color: #3730a3;
}

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.

Dark

Light text on a dark surface, with yellow links. Shown here as a popup. It works the same way when the suggestions show in the page.

& {
  background-color: #111827;
  color: #f9fafb;
  padding: 20px;
}
& h2,
& p {
  color: #f9fafb;
}
& li > a,
& .sl-nf-x a {
  color: #facc15;
}
& .signallane-suggested-products__card {
  background-color: #1f2937;
  border-radius: 10px;
  padding: 8px;
}
& .signallane-suggested-products__title {
  color: #f9fafb;
}
& .signallane-suggested-products__price {
  color: #d1d5db;
}
& .sl-nf-c {
  color: #f9fafb;
}

Colours: lines 2, 3, 8, 12, 15, 20, 23 and 26. 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.