Visitor rules

How do I change how a banner looks?

Set one look for every banner and notice on the Default look page, then give a single rule its own words and look on its Customize screen, beside a live preview.

Last reviewed October 12, 20265 min read

Two places set the look. The Default look page sets how every banner and notice looks unless a rule changes it. A rule's own Customize screen sets that rule's words and, if you want, its own look. Both show the real banner in a live preview as you change things.

Default look

Open Default look from Home, or from any rule's Customize screen. Changes there apply to every rule that has not been given its own setting.

The page has three sections, Banner and popup, 404 suggestions and Cart suggestion, each with its own preview, and one Save for all three. In 404 suggestions, Match my theme (the default) lets the suggestions on a missing page take your theme's colours and font; Custom sets their colours, font, button shape, heading weight and corner radius. As a popup, the popup's outer corners keep the corner radius from Banner and popup. The same section also sets whether the suggestions show in the page or as a popup, the same settings as on URL redirects. A Suggested products block on your 404 page uses its own settings for those instead.

In Cart suggestion, Match my theme (the default) shows the suggestion in your cart in your theme's own text colour, and in Dawn and Horizon-based themes with your theme's secondary button. If that button would be hard to read, it shows as an outlined button instead. Custom sets its colours, font, button shape, border and corner radius; text and buttons need a contrast of at least 3:1 to be saved. The preview shows the suggestion above a sample cart, in a drawer or on the cart page, on a light or a dark page. The checkout message on Shopify Plus uses your checkout's own style.

A rule's Customize screen

Open a saved rule and press Customize in the summary card beside the form. It is off until the rule is saved, and off for an Instant rule, which sends visitors straight on and so has nothing to show them.

The screen has a preview on one side and sections on the other: What it says (the title, message and buttons, in each of your store's languages), Image, Layout, Colors, Typography and shape, Behaviour and Preview links. Each look section has a Same as store default box. Untick it to give this rule its own setting for that group; leave it ticked and the rule follows Default look.

In What it says, {country} and {state} become the visitor's country and state/province: see Words that fill in.

Layouts

A banner is shown either as a bar or as a popup:

  • Bar — a strip across the top or bottom of the page; nothing is blocked.
  • Popup — a dialog the visitor answers first.

And in one of these layouts:

  • Classic card — centred card with a flag, a headline and two buttons.
  • Minimal sheet — bottom sheet with one line of copy and two buttons.
  • Corner toast — small card in the bottom corner that does not block the page.
  • Bold headline — large title over full-width stacked buttons, built for a phone.
  • Split image — your picture beside the copy and buttons. Choose it from your store's Files under Image on Default look or Customize; without one, the photo picked in the theme editor (App embeds › SignalLane › Popup image) is used.
  • Selector card — country and language dropdowns over one button; the visitor picks.
  • Store list — a headline and one row per store, each with its flag and currency.

Selector card and Store list appear only when you have at least two stores to list: your markets, plus any linked stores. A Notice rule always uses the Notice layout, as a popup; it can show the same photo you picked for Split image.

Colours and contrast

Seven colours: Background, Text, Button background, Button text, Secondary button background, Secondary button text and Overlay (the colour that dims the page behind a popup). Tick Transparent under any of them to draw nothing there.

Typography, shape and behaviour

  • Font — Inherit uses whatever your theme already loaded, so no extra font is downloaded.
  • Text size, Corner radius and Padding — in pixels.
  • Overlay strength — how much the page behind a popup is dimmed. 0 means no dimming; the page behind is still blocked while the popup is open.
  • Show a close (×) button and Show the visitor's flag — under Behaviour.

Words

Leave a banner's words empty and it uses the default text from your theme's language settings, in the visitor's language. A notice needs a title or a message of its own. SignalLane never puts its own name or logo on your storefront.

The last section of the Customize screen, Preview links, has Preview on your store and Stop previewing. They open your live storefront in a new tab with the preview on or off, so you can see your banners there without being redirected. It lasts for that browser tab only, and only for you. How the preview works.

Questions and answers

Can I change the look in my theme editor?
No. The theme editor only has the app embed switch, a debug option and the photo for two layouts. Colours, fonts and layouts are set in SignalLane.
Why can't I pick the Notice layout on Default look?
A notice is set per rule. A store-wide notice layout would turn every banner into a notice, so Default look does not offer it.

Was this helpful?

Related articles

  • Visitor rulesWhat is the difference between Instant, Banner and Notice?

    Instant redirects straight away, Banner lets the visitor choose whether to go, and Notice tells visitors you don't serve their region without sending them anywhere.

  • Visitor rulesHow do I add a picture to a banner or notice?

    Pick a picture from your store's Files on the Default look page, or give one rule its own on its Customize screen. Split image and Notice show it, with a description for screen readers.

  • Visitor rulesStyle your banner with Custom CSS

    Add your own CSS to the banner, the popup, the 404 suggestions card and the cart suggestion: where the boxes are, the parts you can style, what SignalLane refuses and why, and the limits.

  • Visitor rulesWhich words fill in for each visitor?

    Write {store}, {product}, {country} or {state} in a rule's words and each visitor reads the real name: the other store, the product, their country or their state/province.