Ready-made styles for your cart suggestion

The cart suggestion shows on your cart page and, with Dawn and Horizon themes, in the cart drawer, and offers your other store. These templates restyle it with one paste while your cart's own layout stays as it is.

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 › Cart suggestion › Custom CSS for the cart suggestion. The preview beside it shows the result above a sample cart; check your cart on a phone 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.

Soft tint

A pale green box with a thin border and a dark green button.

& {
  background-color: #f0f7f4;
  border: 1px solid #b7dcc8;
  border-radius: 10px;
  padding-block: 12px;
}
& strong {
  color: #14532d;
}
& p {
  color: #1f2933;
}
& a,
& .slk-b {
  background-color: #14532d;
  color: #ffffff;
  border-radius: 8px;
}

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

Outlined

A white box with a strong dark outline, square corners and a dark button.

& {
  background-color: #ffffff;
  border: 2px solid #1f2933;
  border-radius: 0;
}
& strong,
& p {
  color: #1f2933;
}
& a,
& .slk-b {
  background-color: #1f2933;
  color: #ffffff;
  border-color: #1f2933;
  border-radius: 0;
}

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

Dark

Light text on a dark box, with a yellow button.

& {
  background-color: #111827;
  border-radius: 8px;
}
& strong,
& p {
  color: #f9fafb;
}
& a,
& .slk-b {
  background-color: #facc15;
  color: #111827;
  border-color: #facc15;
  border-radius: 999px;
}
& .slk-x {
  color: #f9fafb;
}

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

Accent stripe

A warm tint with a coloured line down the start side and an underlined link in place of a button. The line sits on the side the text starts from, so it moves to the right in a right-to-left language.

& {
  background-color: #fff7ed;
  border-color: #fed7aa;
  border-inline-start: 2px solid #c2410c;
  border-radius: 4px;
}
& strong {
  color: #9a3412;
}
& p {
  color: #431407;
}
& a,
& .slk-b {
  background-color: #fff7ed;
  color: #9a3412;
  border-color: #9a3412;
  text-decoration-line: underline;
}

Colours: lines 2, 3, 4, 8, 11, 15, 16 and 17. 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.