Design, styles & Match my store

Match my store

In Design, click Import my theme. Luv Upsell reads your published theme's settings and what shoppers actually see on your storefront: your fonts, your text and background colors, and your buttons' color and corner shape. It shows you what it found and puts it in the preview. Click Apply to my offers to use it; nothing is saved until you click Save.

Leave Follow my theme automatically on and your offers keep following your theme: change your theme's colors or fonts later and the offers pick them up, with nothing to edit in Luv Upsell. The colors you set are used wherever your theme can't be read.

Styles

Prefer a starting point? Pick one of five styles, then change anything:

• Clean: white, with near-black text and buttons and gently rounded corners.
• Soft: warm cream with terracotta accents and pill-shaped buttons.
• Bold: indigo buttons, a yellow badge and green sale prices.
• Minimal: black and white with square corners.
• Midnight: a dark look with light text.

Picking a style replaces your colors and corners. Change a color afterwards and the design becomes your own.

Everything you can change

• Colors: background, text, secondary text, borders, the accent, buttons and their text, sale prices, badges and their text, and the shade behind popups.
• Fonts: your theme's own fonts, or name others for body text and headings, and scale all text from 85% to 125%.
• Shapes: card and image corners from square to well rounded, button corners from square to pill, and product images square, rounded or circle.
• Popups: on computers, the image on top or on the left and a width from 380 to 760 pixels; on phones, a bottom sheet or a centered card; and an optional soft shadow.
• Prices: the crossed-out price beside an offer's price, the product's compare-at price when it has one above its price (the default) or its regular price. The saving badge always states the saving against the crossed-out price.
• Words: the default words every offer uses, grouped by where shoppers read them, from popup titles to button labels. Tokens drop in live values: {product}, {trigger}, {discount}, {price}, {compare}, {total} and {count}, as in Picked to go with {trigger}. In the badge beside a price, {discount} is the saving against the price shown crossed out. Each offer can override its own words.

Each offer's own picture and words

In an offer with products you pick, click Use my image beside a product to upload your own picture (PNG, JPG, GIF or WebP; Luv Upsell resizes it to load fast). It shows in place of the product photo in the popups and the product and cart page blocks, first among the photos after payment, and on the thank-you page. Product photo goes back. Version B's products can have their own, to test pictures against each other. Under Words, each popup offer can set its own heading, text, buttons and badge, and under Every other line its own Added message, the button after it and the option and quantity labels. Before checkout that button shows only in a popup with 2 or 3 products you pick, once one of them is added: when there’s nothing left to add, the popup takes the shopper on to checkout by itself and says so (“Taking you to checkout…”, set in Design under Before checkout). Empty boxes use the words from Design.

The two popups (after add to cart and before checkout) also have a Look section: a picture across the top with its height and fit, a small, medium or large product picture or none, the popup's width and padding, and left or centered text. Anything you leave as Design follows the Design page. Version B can have its own picture at the top.

The live preview

The preview stays beside the funnel editor as you scroll, with the funnel's steps numbered over it. With Click to edit on (it is, with a mouse), pointing at any part of an offer outlines it, and clicking it opens the setting that changes it: the heading, the text, the picture, a button or a label. Click into the Added message to see the popup as it looks after an add.

Custom CSS

For the last 1%, add up to 8,000 characters of your own CSS. It styles only Luv Upsell's popups and blocks, which live in their own sealed box, so nothing else on your store can break. @import, HTML and scripts are removed.

Checkout, post-purchase and thank-you pages

These pages are Shopify's own, and Shopify styles them with your checkout branding, set in the checkout editor. Shopify doesn't allow custom colors, fonts or CSS there for any app, so Luv Upsell's offers on those pages wear your checkout's look automatically.

Questions? hi@customerluv.app — a founder answers every message.