Help · Content

Images, buttons and other blocks

Choosing an image, and describing it

An image block shows the image you chose, with the words that describe it, and offers to change it or to describe it differently. The description belongs to the image, so editing it here changes it everywhere that image is used.

The description belongs to the image, not to this email. Editing it here changes what that image is called everywhere it appears — in every other template and in every form. That is deliberate: an image means the same thing wherever it is used, and describing it twice is two answers that drift apart. The words are read aloud to anyone using a screen reader, and shown when a mailbox blocks images.

Alignment puts an image on the left, in the center or on the right of its column, under its width on the panel. It moves the image only when the image is narrower than its column. A border or background color you gave the image moves with it; the white background an image keeps in dark inboxes still runs the whole width of the column, with the image on its side. New images start in the center.

An image in dark inboxes

Two cards on an image's panel are for readers whose email is shown dark: Keep a white background in dark inboxes, for a logo with a see-through background, and Image for dark inboxes, a second image shown where an inbox uses your dark colors.

Keep a white background in dark inboxes keeps a white strip behind the image, across the whole column, wherever an inbox darkens the email — the Gmail app included, for Gmail addresses, which repaints colors but never an image. Use it for a logo with a see-through background, which would otherwise vanish on a dark page. The strip is white in every inbox, so it is offered only for an image that sits on plain white — a white section, with no image, color, border or box of its own around the image. There, a light inbox shows nothing new. Anywhere else the strip is not drawn, even if it was enabled before the image's ground changed, and the card says why:

A white background is drawn only for an image on plain white. This image sits on a color, an image, a border or a box of its own, where a white strip would show in every inbox.

In a Library element you can enable the white background too. An element is drawn wherever it is placed, so the strip is drawn only in the templates where the element sits on plain white; the card says:

Drawn only where the element sits on plain white.

Image for dark inboxes is a second image shown instead of this one where an inbox shows your email in its dark colors — a light version of a logo, say. It is described by the first image's words, because it is the same image. It is used only while Keep emails light in dark inboxes is off in Settings → Store. Gmail always shows the regular image. Remove takes it away again.

While an image has an image for dark inboxes, it keeps a white background on its own wherever it sits on plain white, and the white background switch is not offered; the card says:

A white background is kept behind this image while it has an image for dark inboxes. The Gmail app shows this image on the white; an inbox that shows your dark colors shows the image for dark inboxes instead.

That is both answers in one image: the Gmail app, which never swaps an image, shows the regular one on white, and an inbox that shows your dark colors takes the white away and shows the image for dark inboxes. Where the image does not sit on plain white, no white background is drawn, and the image for dark inboxes is still used there.

A new template made in your brand does both for your logo: the logo band keeps a white background (it is always on white), and carries your Logo for dark backgrounds if you have chosen one.

The Dark mode page explains which inboxes repaint an email, which follow it, and which leave it alone, with illustrations.

Rounding an image's corners

An image can have rounded corners, and all four are set on their own. Open Image corners, directly under Size on the image block's panel. Set one number and the whole image rounds, or unlink the four to round only some.

Image corners is its own line because what it rounds is the image itself. It says what it is set to — None, 8 px or 12 · 12 · 0 · 0 — and opens in place. Unlinked, the top two can round while the bottom two stay square.

The width is asked once. Under Size, choose Full width or A set width; choosing the second puts a pixel box beside it. There is one Width label over the pair, not one over each.

That top-rounded, bottom-square shape is the one most people are after. It is how an image sits flush on a panel of text below it — rounded where it meets the air, square where it meets the block underneath.

The border follows the corners you set. Give the block a border and the line rounds with the image instead of drawing a square around it. A background color on the block rounds the same way. If the block has no padding the line hugs the image; add padding and it becomes a rounded frame with space inside. The frame is drawn at the image's size, so an image narrower than the column gets a border and a background around the image itself, never a rectangle stretched across the space beside it.

Older versions of Outlook show square corners. Everything else in the block is drawn there exactly as you set it; only the rounding is missing. An email built this way still reads correctly in that mailbox.

Where a button or an image points

A button's link, and an image's, is one field asking Where it goes. Type a web address and it stays one; type anything else and the field searches your store for a product, a collection or a page. Renaming that thing in Shopify never breaks the link.

On an image an empty field simply means the image is not a link. Searching your store means a button can point at a product without your ever going to look up its address, and what is stored is which thing you chose, not its address.

A link inside a paragraph has one more option. Put your caret in the link and the row under the writing surface asks Where it goes: the same field, plus The unsubscribe link — which is how the footer sentence is written, and how you write your own. Choosing the unsubscribe link takes the field away, because that address is built for each person when the email goes out and there is nothing for you to type.

A button that already points at the unsubscribe link — one that came in from an imported template, say — says so where the field would be, and offers one way back: point it at a link instead.

The whole of it is on the Where a link goes page — what the search offers, what a grayed row means, what happens to a link whose product or page has left your store, and why pages can be a day behind.

A block showing products from your store points at those products. Which products it shows is set here, on the block's own panel — by hand from your catalog, or by a rule such as your best sellers or what that person left in their checkout. The Products in an email page covers the nine ways to fill one and the catalog picker behind them.

How a product card looks is yours, even though the words are not. A product's name and its price come from your store, but the block's panel gives you a Name, a Price and a Button row — size, alignment, color and typeface for the two lines, and the same controls a button block has for the button under them. Leave them alone and the card is drawn the way it always was, in your email's own colors and face.

A button's own border and shadow

The border on a block is drawn around the block, not around the button inside it. So a button carries its own, under Button border — the same width, kind of line and color, applied to the button itself. A soft drop shadow is the Shadow line on the same Button card.

The box around the block is still there, on the Block card further down the same pane so the two are never mistaken for each other; they are independent, and you can use either, both or neither.

A button can also have a soft drop shadow, and it starts off. It is the Shadow line on the Button card, beside Button background. Switch Shadow from None to Soft and it appears in a soft gray, which you can then change to any color. There is one setting rather than four: the distance and the softness are chosen for you, because a shadow you build by hand is a shadow that looks wrong in a mailbox you cannot preview.

Outlook for Windows shows the button with no shadow, and draws a dashed or dotted button border as a solid line. The button is drawn there exactly as you set it otherwise — its color, its words, the width and color of its border — so what that mailbox loses is the softness and the dashes, never the shape. Both are costs worth knowing about before you build a design that depends on either.

Headings have no shadow, and will not get one. The mailboxes most of your readers use strip a shadow off text and leave the words as they were, so a control for it would be a setting that does nothing where it matters most.

How wide a button is

A button is as wide as its words until you say otherwise. The Button width card offers Fit content or Full width, which stretches it across the column. Full width on mobile, under Fit content, fills the column on mobile only.

The Button width card on the button's panel has two choices, the same two a form's button has: Fit content — the button's own size, its words and the padding around them — and Full width, which stretches it across the whole column with its words in the middle. Placement still decides where a button that fits its content sits.

Full width on mobile is the choice in between. Enable it under Fit content and the button keeps its own size on desktop but fills the column on mobile, where a wide button is easier to tap. Under Full width the switch is not there, because the button is already full width on mobile.

The whole button is the link, not just its words — a reader can tap anywhere on it.

Outlook for Windows shows the button at its own size, whichever you choose. A mail app that shows no mobile layout at all shows a Full width on mobile button at its own size too, the way it was before you enabled the switch.

Dividers

A divider is a line with the same box every other block has. Its Line card sets the line itself, and the Block card under it — Background, Border, Corners, Padding and Margin — works exactly as it does on a paragraph — so a line can sit on its own tinted band, with room around it.

Color or gradient. The choice sits on the Line card's heading row. A color line can be Solid, Dashed or Dotted. A gradient line blends two or three colors along its length and is always solid — a dash cannot be drawn in a blend. Some inboxes draw no gradient and show the line in its first color instead.
Thickness runs from 1 to 12 pixels.
Width, in percent or in pixels. The line is centered in its column — a short rule between two paragraphs reads very differently from one that runs edge to edge. 100 % is full width and is what a new divider starts at.

The line's color and the block's background are separate: a teal line on a cream band is one of each. Padding is the room between the line and the edge of its background; margin is the room between the whole band and its neighbors.

A divider in a design you import keeps its style and its thickness — a dotted 4-pixel line comes in as a dotted 4-pixel line. Two limits: a line thicker than 12 pixels comes in at 12, and a style other than solid, dashed or dotted (a double line, for example) comes in solid. A band of color behind the line comes in as the divider's background.

The discount block

The discount block is the whole offer. It says which discount the email gives away, it carries the words around the code, and it says how long each person has to use it. A campaign, or an email in an automation, gives a discount away by using an email that carries one; take the block out and the offer goes with it.

There is no second step attaching a discount to the campaign, so an email you clone or reuse carries its offer with it. In an automation's email, the discount's own code asks for no days — it works until the discount ends in Shopify — and Discounts says what happens when that discount cannot be used.

Its panel asks, in order:

Which discount. The code discounts you have made in Shopify. There is no discount editor here and there will not be one — your pricing rules belong where the rest of your store's pricing lives. A discount that has ended, or that has not started yet, is still in the list and says which it is, rather than quietly missing. Type in the box to find one by name; the ones used most come first. A discount in a rollout in Shopify is listed but can't be chosen, and says why. One you chose before its rollout began is named on the Checks card, which stops the campaign being made ready to send until you change it — Discounts has the whole of it.
Which code, but only when the discount you chose gives away its own code rather than one per person. Type to find a code; the most used come first. A discount with no codes of its own says so instead of showing you an empty list.
A heading, in your own words, above the code — with its own size, alignment, color and typeface. Leave it empty and no heading line is drawn.
The code itself: how big, where on the line, what color. The code is the subject of the block, and a link besides, so it is usually large and centered.

The rest of the block is two cards. Discount details is what the email says about the offer under the code; Details text — size, alignment, color and typeface — is how it is drawn, for the terms line and the date together, because they are two halves of one sentence. Leave those alone and they are drawn the way they always were, in your email's own text color.

Where the terms line comes from — the Shopify default, exactly as it reads in your store and shown underneath in full so you can read all of it; Your description, which starts from that wording so you are rewriting rather than starting over; or Do not show it. Without a terms line, people write in to ask what the code is for.
Expires — until the discount ends, or a number of days after they receive it. This is always on the card, whether or not the email prints a date, because it is the deadline the code is actually checked against when somebody tries to use it.
Show the expiration date, which is a separate question: whether the email prints that deadline. On, and a short sentence follows — Use by the date — whose first words are yours to change: Use by to begin with, and Valid through or Offer ends if you prefer. The date itself is the one this app enforces, and you cannot type it; press the ⓘ beside the switch for what it is checked against. Disabling the date does not make the discount last longer. If your discount has no end date there is no date to show, and the switch for it appears once you give the block a number of days or the discount an end date in your store.

The code is a link, and so is the button beside it. Either one opens your store with the discount already applied, so nobody has to copy anything. Readers land on your homepage unless you pick a product, collection or page.

The button can be disabled, and what it says is yours to write — it starts at Shop with this code. Where it goes is the same one link field the rest of the editor uses, so a product, a collection or a page of your store is a search away; the Where a link goes page has the whole of it. A destination outside your own store cannot carry a discount code, so readers land on your store's front page with the discount applied instead, and the editor's checks say so before you send.

The button is styled like any other button. Button placement puts it at the left, in the middle or at the right, whatever the alignment of the code above it. Button margin is the space outside the button, on any of its four sides. Set its top to put room between the button and the words above it. In a narrow column, the left and right margins give way before the button gets any smaller. Button margin is separate from the block's own Margin, which is the space around the whole block.

The code is filled in when the email is sent, and never before. The editor and a test send show SAMPLE20-YOURCODE in its place when each person gets their own code — a real-looking code in a screenshot is one somebody types into a checkout. It is as long as the longest code a person can get, so the size you see is about the size they see — letters differ in width, so a real code can be drawn a little smaller or a little larger. The code stays on one line wherever it fits, made smaller only when it would not otherwise fit; in a column too narrow for every person's code, the editor shows it breaking onto a second line after its hyphen, as some people will see it, and its checks say so. When the discount gives away your own code, the editor shows that code, because it is a real string that already exists.

More about discounts. The Discounts help page has the whole story, including an automation's email and what happens when a code is used.

A row of icons, one per network, each one linking to your own page there. Add it from Social links in the Add panel. If you have saved your social links in Settings, a new row arrives as those networks, each using your saved link; if not, it arrives as one Website icon pointing at your storefront.

That single icon works before you have touched it; you change the network and the address from there.

Its panel asks two things.

Icons. One row per icon, in the order they are drawn, with how many the row holds beside the heading ("6 of 8"). Each row shows the icon, its name and one line saying where it goes. Press a row to open it and change it; one row is open at a time. A network's row asks for the network and the address of your page on it — Facebook, Instagram, TikTok, X, Pinterest, YouTube, LinkedIn, Threads, Snapchat, and Website for anything else you want in the band. Addresses must start with https://.

Leave an icon's address empty and it uses your store's link for that network, from Settings — the box shows that link in gray, the row's line says where the icon goes (instagram.com/yourstore), and the open row says:

Empty uses your store’s link.

Change the link in Settings and this email follows — though a campaign that is already scheduled keeps the links and phone number it had when it was scheduled, through to its last email; to pick up a change, Disarm it and schedule it again. Type an address on the icon and this email uses that one instead; Use your store’s Instagram link (named for the icon’s network) puts it back. An icon with no address here and none saved in Settings is not shown — the email never draws an icon that goes nowhere — and the panel and the Checks card say so:

No link yet, so this icon is not shown. Add your Instagram link in Settings → Store, or type one here.

The Website icon is a globe unless your store chose another in Settings → Store: a Shopping bag, a Storefront, or an image of your own. A shopping bag or a storefront is drawn in the row's own style, like every other icon, and the panel says so under the Website row:

This icon shows the shopping bag, chosen in Settings → Store.

If your store chose its own image, every Website icon shows that image instead, at the size of the other icons, and the panel says:

This icon shows your store’s own image, chosen in Settings → Store.

If you have saved no social links at all, the panel says where to:

Save your social links once in Settings → Store, and every email’s icons use them, except a campaign already scheduled.

Only an owner or a manager can save the store’s links, so a marketer reads who can instead:

No link yet, so this icon is not shown. Type one here, or an owner or a manager can add your Instagram link in Settings → Store.

An owner or a manager can save your social links once in Settings → Store, and every email’s icons use them, except a campaign already scheduled.

Your own icons. Use your own icon for an image that goes somewhere of its own, such as a badge; the Website icon is your store's site, the same in every email, set in Settings → Store. Add your own icon puts an icon of your own at the end of the row — a "Made in the USA" badge, a "cruelty free" mark, anything you want in the band beside your networks. Each one asks for an image and a description, and takes a link if you want one:

An image, chosen from your images and media. It is drawn at the size of the other icons, in the same row, without being stretched: a wide badge keeps its shape inside the icon's square. Any shape works; use an image at least 144 pixels on its shorter side — a PNG with a transparent background reads best. A smaller one still works; it just looks soft at the largest icon sizes. An animated image cannot be used.
A link, if you want one — where it goes, chosen exactly as a button's is: a web address, a product, a collection, a page of your store, your cart, or, in an email that gives a discount away, Your discount. Leave it empty and the icon is shown as an image that opens nothing — a row of badges with no links is fine, and the row's line reads "No link". Your own icon never borrows your store's link. An icon whose destination your store no longer has is treated exactly as a button to the same place would be.
A description — a few words that say what the image is. They are read aloud to people who cannot see the image, and they are what the plain-text version prints, beside the link when there is one. Choosing an image fills them with the image's own description, if it has one; change them freely.

Until the image and the description are there the panel says what is missing — the row's own line reads "Needs an image" until you choose one — and the Checks card holds the email back from sending. Your own icons are shown in a dark inbox exactly as you made them, the way any image is, so pick a badge that reads on a dark background too.

The up arrow and the down arrow at the end of each row move any icon one place along the row — a network or one of your own — so the order in the panel is always the order in the email. The first icon's up arrow and the last icon's down arrow are grayed out. The trash can removes an icon.

A row holds eight icons in all, networks and your own together; when it is full, the panel says so in place of the add buttons. You cannot remove the last one — a band with no icons in it is an empty strip nobody can see and nobody can explain — so its trash can is grayed out and says so; take the whole block out instead.

If you put the same network in twice, the Checks card says so. It does not stop you: two accounts on one network is a real thing, and two identical icons beside each other is usually a slip.

How they look. How big each icon is — from 24 to 72 pixels — how much space sits between them, how many go on a line, whether the band is left, center or right, and one of three icon colors.

Per row is how many icons a line holds. On Automatic, the icons stay on one line when they fit across the block. When they do not, they are split evenly over as few lines as they need — eight icons that do not fit on one line are two lines of four, seven are four and three. Choose a number from 1 to 8 for at most that many on a line, split evenly the same way: eight icons at four a line are two lines of four on desktop. On mobile a line may hold fewer, if that many will not fit the screen. The last line can be shorter, and it sits left, center or right with the rest of the band. The space between lines is the Space between you set. When the icons only just fit on a line, the space between them is made smaller — never larger — so they stay on that line. On a mobile screen 360 pixels wide or wider, your icons never make the email wider than the screen.

The three icon colors:

Full color — each network's own colors. This is the one that reads on a light background and on a dark one.
White — one plain white glyph per network, for a dark band.
Black — one plain black glyph per network, for a light band.

The icons are ours, and they come from us. They are not fetched from the networks themselves, so nobody outside this product learns which of your customers opened your email, and an icon cannot vanish from an email already in somebody's inbox because another company moved a file.

Many people read email on a dark background, and a client that turns your band dark will not turn your icons with it — an image is an image. That is why Full color is the default and why it is the one to pick if you are not sure: a black glyph on a band the reader's mail app has darkened is an icon nobody sees.

In the plain-text version of your email — the one a few readers and most spam checks see — the row is written out as Follow us: and then each network with its address on its own line — and each of your own icons by its description, with its address. An icon of your own with no link is printed as its description alone, and a row of nothing but those has no Follow us: above it.

Showing a block to some people

Every section, and nearly every block, has a Show this only when … card at the foot of its panel. Give it a rule over your profiles' own properties or their Shopify tags, and only the people it fits see that part of the email — everybody else gets the same email without it.

A block or section with a rule wears a thin bar down its left edge in the email, and Shown to some on its row. A rule on a block inside a Library element travels with the element to every email that uses it.

The unsubscribe link and your store's address can never carry one. The Show a block to some people page has the rest, including what "doesn't have it" means and how to check a rule for one person.