All guides · Look and words

Change how offers look

The Design page sets how every offer looks on your store. It is one look for all offers. It starts from your theme: its font, its text color and its text size. The preview beside the fields shows the result, drawn with an example T-shirt until you choose one of your products. Press Save in the bar at the top: nothing changes on your store before that.

• Design preset: first Vertical, Horizontal or Two columns: the tiers one under the other (to start with), side by side, or two to a row. Side by side, they go onto more lines on a phone. In two columns, each tier's price is under its name, and a tier's picture above it.
• Beside them, the mark on each tier: Radio button (to start with), Checkmark, or None. With None there is no mark: the buyer presses anywhere on a tier to choose it, and the chosen tier shows by its line and its background. The subscription choice and the add-ons take the same mark.
• Then the looks, drawn the way you chose above, each with one of your products at your prices. Soft is what you get if you pick none: the tiers that are not chosen are light grey, the chosen one stands out with a heavy line, a heading has a line on each side and a badge sits on the top line of its tier like a tab. Side by side, its words are in the middle. Classic gives every tier a box with the chosen one's line a little thicker. Table puts the tiers in rows between lines, the chosen row marked at its left edge; side by side or in two columns, they are cells with lines between them, the chosen one marked along its top.
• Main color: "Match my store" or "My own color". Match my store, which is what you get if you pick none, takes the color of your theme's Add to cart button, so the offer matches your store with nothing set. If your button is white, has no color of its own or is hard to see on your page, your theme's text color is used. My own color opens a color field, with your brand colors and a color picker: the color sets the chosen tier's line, its dot, the badge and the sticky bar's button. The preview on this page cannot know your theme's button, so with Match my store it shows a neutral color.
• A design for one offer: on the offer's page, "Design", choose "A look of its own" to give that offer its own direction, design and main color, chosen the same way. Everything else (corners, text size, colors, CSS) stays as the Design page has it. Choose "Same as your shop" to go back.
• The other parts of the page fold: press a part's name to open it or close it.
• Corner radius: any whole number of pixels from 0 (square) to 50 (fully round). The usual is 10.
• Border: how thick the line around a tier is, from 0 (none) to 6 pixels. The chosen tier's line is 1 pixel thicker.
• Spacing: the tier padding at the top and bottom and at the left and right, the space between tiers, the space under the heading, the space under the offer, the variant picker padding at the top and bottom and at the left and right, and the space between variant pickers, each from 0 to 40 pixels. Empty is the design's own, which grows with the text size. Smaller numbers make the offer take less height on the page. The padding and the space between are the add-ons', the subscription choices' and the total's too.
• Colors: one row for each part of the offer, with its Background, Text and Border side by side: the tier, the chosen tier (its border is the main color), the badge, the heading, a tier's name, its subtitle, its price, the crossed-out price, the savings line and the variant pickers. A color you leave empty says "Theme color": it comes from your theme. The words on a badge, a tier background or a variant picker background turn black or white so they can be read, unless you give them a color. A part's text color wins over the tier's.
• Every color field opens two tabs. Brand colors lists your palette: Primary and Secondary background, Primary and Secondary text, Border, Accent, Accent text, Badge background, Badge text and Savings. A field set to a brand color follows it: change the color in "Customise brand colors" and every field using it changes. Custom colors is a color picker, with the hex, the transparency in percent and the colors you already use. "Use your theme's color" empties a field. The palette starts from your store's own colors, which the app learns when a product page with a live offer opens on your store; "Use my store's colors" in the palette sets them again.
• Text size: from 8 to 32 pixels, or empty to use your theme's size. Under the field the page shows your theme's size, as the app measured it on your store.
• Heading alignment, Tier name alignment and Price alignment: Left, Center or Right; Auto keeps the design's own. In the Soft design a heading at the left or the right keeps its line on the other side.
• Each part of the text: the heading, a tier's name, its subtitle, its price, the crossed-out price, the savings line, the badge's words and the variant pickers each have their own size (8 to 48 pixels), and the heading, the name, the price and the variant pickers a weight: Default, Normal, Medium or Bold. Leave a field empty to keep the widget's own. Their colors are under Colors.
• Picture size and Picture corners: for the pictures on the tiers, which each tier chooses on its offer's page. The size is from 24 to 120 pixels (empty: about three lines of text). The corners are from 0 (square) to 50 (a circle).
• Price on each tier: the tier's total (to start with), the price of one item ("$22.46 each"), or both. With the price of one item, the crossed-out price is one item's too, and the Save line still says what the whole tier saves. A tier with other products always shows its total.
• The price per kg or per litre: when a product has a unit price in Shopify (the product's "Unit price", which stores in the EU give products sold by weight or volume), each tier shows its own, worked out from the tier's price, like "$224.55/kg". It needs no setting.
• Show the total under the offer: off to start with. On, one line under the tiers and the add-ons says what the buyer pays for everything they chose, crossed out against the price without the offer, and what they save, like "Total $48.91 $57.90 Save $8.99". A free gift counts at its price, once for each one the buyer gets, and a ticked add-on with its discount, and a tier with free shipping says so under the word Total. The line is hidden while the buyer saves nothing.
• Count the savings from the compare-at price: off to start with. A product's compare-at price is the crossed-out price you gave it in Shopify. On, each tier crosses it out and its "Save" line counts from it, even a tier with no discount. A product with no compare-at price is drawn as before. Buyers pay the same either way: the checkout takes the tier's discount off the product's price.
• Sticky bar: Never (to start with), On phones, or On phones and computers. Once the buyer has scrolled past your theme's Add to cart button, a bar stays at the bottom of the screen with the product, the tier they chose and its price, and a button that presses your theme's own Add to cart button. It goes away when the button is in view again. Some themes have a bar like this already: turn this on only if yours does not.
• Variant pickers: how a buyer picks the color or size of each item. "A list for each item" (to start with) is one list of the variants. "Buttons and swatches" shows every value at once, one row for each option, like your theme's own: a value with a swatch in Shopify (Products, an option's values: a color or a picture) shows its swatch, and the others their names. A value that is sold out with the others chosen is crossed out; pressed, it moves to a variant of it that can be bought.
• Show variant pictures: on or off. On, the lists where a buyer picks the color or size of each item show each variant's picture. With buttons, when no option has swatches in Shopify, the first option's values show a picture of their variant beside their name, when each has one.
• Your own CSS: rules you write for what the settings do not cover, up to 3,000 characters. They are added after the app's own CSS, so they win. The parts are .wb-tier (a tier; .wb-tier[data-selected] is the chosen one), .wb-title, .wb-sub, .wb-badge, .wb-pay, .wb-was, .wb-save and .wb-total.
• Reset design, under all the parts: every field goes back to where it started, with your store's own brand colors. Nothing changes on your store until you press Save; Discard in the bar brings your design back.

The preview: "Choose preview product" chooses a product with Shopify's own picker, and the preview shows the offer that product's page shows, with its own tiers, badges and heading; with no product chosen, it shows an example T-shirt the app keeps, in three colors with a picture each and three sizes, one of them sold out, so every variant setting shows what it does, with example tiers under an example heading, all in the language you choose below. Its price is an example: 24.95 US dollars, in your currency at the day's rate. A product with no offer is drawn with example tiers too. The examples' "Most popular" badge is only an example: on an offer, you give any tier a badge of its own on the offer's page, or none. Under it, the country button draws the offer at the prices of a country your store sells to (your store's markets), starting on your own. The language button beside it starts on the language that country's market is sold in, which may be English in Germany. "Your store's languages" show the words you translated on the Languages page and the app's own words, as buyers see them. "Other languages" show the app's own words alone ("Save", "Item 1"), so you can see a language before you add it to your store. Press a tier, a subscription choice or an add-on in the preview to choose it as a buyer would; it changes nothing on your offer.

More in Look and words

• Translate your offers
• Where the offer shows on the page

Made by Web Weirdos · hello@webweirdos.com · Privacy