Help · Content

Forms

A form is what you put on your storefront to ask somebody for their email address. It can be a popup, a card in the corner, a bar across the bottom, a full-screen panel, or a block that sits inside one of your own pages.

Forms live under Content → Forms.

One card per form, and the card shows what the form looks like. It is an image of the published version, drawn the same way your storefront draws it and kept from then on. A published version never changes, so the image and the form can never disagree.

A card with a plain gray panel instead of an image has nothing published yet. A form you are still building has never been on anybody's storefront, so there is nothing to take an image of. Publish it and the image appears within a few minutes.

The image shows the form on its own, without the page behind it — no dimmed background, no close button, whatever shape the form is. That is so five forms look like five forms rather than five gray rectangles. A shape that runs the full width of a page — a bar, a full-screen panel, an embedded block — is drawn at phone width, because at a card's size its words would otherwise be too small to read.

The form sits at the top of its image, and the image is only as tall as it needs to be. Forms come in shapes a tall frame suits badly — a bar is wide and short, a popup is close to square — so the image area is shallow, and whatever shape your form is it is drawn against the top of it with the name and status directly underneath. That is what lets two rows of forms fit on one screen instead of one.

The whole card is the link. Press the image or the name and you are on that form's page.

Paging. Under the cards you choose how many to show at a time — 25, 50 or 100 per page — and step through with Previous and Next. The line beside them says where you are: Page 3 of 5. Type a number in the box to jump straight to a page. The page you are on is part of the address, so opening a form and coming back puts you back where you were, and the size you choose is remembered the next time you open this screen. Searching or changing the filter takes you back to the first page.

Every card's menu offers the same three things it offers on Templates, and one more that only a form has.

Rename changes the name and nothing else.

Clone makes a copy and takes you to it. A copy is never live. Cloning a form that is on your storefront right now puts nothing extra on your storefront — the copy is a draft, and publishing it is a separate decision you make on purpose. It copies what you are working on, along with the rules about who sees it and when; what it does not copy is the group you may have put the original in to stop two forms showing at once, because a copy quietly joining that group would change what your visitors see.

Pause and Resume are here too, so you never have to open a form to take it off your storefront. A live form is offered Pause, and asks before it does it; a paused form is offered Resume, and puts it straight back. A form you have not published is offered neither — there is nothing running to stop.

Archive puts a form away when you are done with it. A live form cannot be archived — the menu says so and tells you what to do instead: take it off your storefront first, by pausing it, and then archive it. Archiving is not destroying; switch the filter to Archived to find it again.

Delete appears on a form you have never published and nobody has ever used, and only there. That form has no history worth keeping — nothing was ever on your storefront and nobody ever filled it in — so it is deleted outright, and there is no way back. You are asked to confirm first.

On every other form the menu simply has no Delete, and that is deliberate rather than an oversight. The moment a form has been published, what it collected is part of your customers' records, and the dates and consent on those records point back at the form itself. Archive is the act for those: it takes the form out of your way and keeps what it gathered. So the rule is short — if anyone has ever seen it, you archive it; if nobody ever has, you can delete it.

The fact that matters is Status:

A form nobody has ever published says Never published rather than showing a date. A live form whose working copy has moved ahead of it wears Changes not published, which is the one badge on this screen that is news.

Archived forms are their own view. They are not in "All forms" — pick Archived from the filter to see them.

Search by name. Type more than one word and every one of them has to match, wherever each of them falls and in any order.

Your search and your filter live in the address bar, so opening a form and coming back puts you exactly where you were.

Create form asks for two things, in this order: a place to start from, and then a name.

The starting points come first because that is the decision — the name is what you call what you chose, and the field for it appears once you have chosen.

You see the form before you choose it. The starting points run down the left, and the one you pick is drawn on the right — the real form, running the same code your storefront runs, not an image of one. Nothing is chosen when you arrive, so the first thing you do is look.

Under them is Your forms: the ones you have already made, most recently edited first, with See all forms for the rest. They are drawn on the right the same way, so you can look at what you already have before you decide. Edit opens the one you are looking at in the editor. To build on one of your own rather than start again, Clone it from the Forms index — that is what makes the copy. The field at the top narrows both groups by name.

A form is drawn the way it would really appear. Inside a page is drawn as a block the width of the page it would sit in, because that is what an embedded form does — it takes the width of wherever you put it. The others are drawn floating on a page, at the size they would open at, because that is what a popup, a corner card, a bar and a full-screen panel do. Desktop and Mobile above the drawing switch between the two views.

Then you name it and press Create form.

The name is yours, and it is how you find the form again. No visitor is ever shown it on a page — but it is not a private note either. Your theme's Form menu lists your published embedded forms by name, and the theme editor prints the name on the block while you are working in it. Name a form for where it goes.

The starting points are a starting point, not a fixed layout. You can change or throw away every part of every one of them:

They all ask for a first name as well as an email address, and the first name starts out required. That is a starting position, not a rule: make it optional or remove it whenever you like.

On the left you build it. On the right you watch it.

The form on the right is not an image of your form — it is your form, running the same code your storefront will run, changing as you type. What you see there is what a visitor gets.

The left column starts on your panels, one to a row under the heading Panels, and you open one by pressing it. Undo and redo sit at the top of the screen with the rest of this form's controls. Above the form itself sit the name of the panel you are looking at, Test and preview, and the screen switch. On desktop / On mobile changes which screen you are looking at. It is one form either way; what changes between the two is how it is arranged, never what it asks for.

The form is drawn life size wherever there is room for it. Where there is not — a wide form on a narrow screen — it is scaled down to fit and says so underneath: Shown at 82%. That is a note, not a control; there is nothing to set.

Every number you type sits in a box with its unit inside it10 px, 50 % — with a stepper for nudging it wherever the row has room for one. Type a number outside what the field allows and it is corrected when you leave the field, never while you are still typing: that is why you can type 18 into a field whose smallest value is 12.

A number box is never blank. Where you have set nothing, it shows the number your form is actually drawing — 0 px, not an empty box — so you are never left guessing what nothing means. The one exception is a cap that is genuinely optional, like how many times one person may see the form: there, empty means no cap, and it says so.

The left column is three levels — your form, a panel inside it, and a block inside that. You go down a level by pressing a row, and back up with Back. A block's words and the way it looks are the same place, so nothing about the thing you picked sits on a different screen from the rest of it.

Everything that is not the form's own contents is behind Settings — the sprocket in the editor's toolbar. It opens a list of groups with the one you pressed beside it: Format is what shape the form takes on your storefront, and Opens, Where, Shown to, Frequency and Schedule are when it runs and who meets it. The rest of this page is about them.

Test and preview dims the editor and opens your form over it — the real thing, behaving the way it will on your storefront. It is drawn life size where there is room for it, and says Shown at 82% underneath where there is not. Press a button and it moves through the form as a visitor would. Nothing is sent and nobody is signed up, and it says so along the bottom while you work.

The app's own navigation and its header stay where they are — testing a form is something one form is doing, not something the whole app has gone into. You can reach them while you test, with the pointer or with the Tab key; Escape and Stop testing both put the stage away. If you navigate off with changes you have not saved, the editor still asks first.

A small toolbar floats at the top of the dimmed area, headed Testing your form, and carries three controls:

Every panel has one Layout, and you choose it by pressing a drawing of it. Open a panel and the first card in the pane is Layout, with six small drawings in it. Press one and the panel is built that way:

Nothing is thrown away when you change your mind. Your blocks keep their order, their words and their colors — only the arrangement around them changes. The one press that takes something away is choosing a layout with no place for an image while an image is in the panel, and it asks first:

A layout that would not work on this panel stays on screen, grayed, with the reason under it — one that would leave the panel with nothing in it, or crowd more onto one line than a line can hold. A choice that disappeared is a choice you would go looking for.

No image. Everything in one column, top to bottom, in the order the list shows:

Mobile shows the same column, which is what a narrow screen wants anyway.

Image on top. One image across the width of the panel with the words under it:

Let the image touch the edges takes the image out past the panel's own padding, so it meets the corners. It starts on, which is what most people want of an image across the top; turn it off to sit the image inside the panel's padding with everything else. Mobile draws it the same way.

Image on the left. The image and the words side by side, the image first:

How wide the image is is a percentage — the words take the rest — and Space between the image and the words is the gap between the two. On mobile, say what happens instead: Image above the words, Image below the words, or Keep them side by side. The card's own sentence changes with your answer, so it always says what your form does:

Image on the right. The same arrangement, mirrored — the words first and the image beside them, with the same three knobs and the same mobile question. Either side can put its image above the words on mobile, so choosing a side is a choice about the wide screen only.

Image behind the words. The image fills the panel and everything else sits on top of it:

Where the words sitTop, Center or Bottom — places them in it. On mobile, either the words stay over the image or the image becomes a band above them; a panel with several fields in it wants the band, because a photograph's shape is not tall enough to hold a form on mobile.

Everything on one line. This is the embedded form — the one that sits inside a page of your own rather than over it. The fields and the button go on one line; a heading or a paragraph sits above the line and the consent sentence below it, where there is room to read them. On mobile, either the line stacks one block per line or it stays a line, for a bar of two small things.

A layout with an image has one place for it, and the picker for it is on the Layout card, under the drawings:

Under that sits On mobile, use a different image. It is for another crop of the same photograph — a tall one for mobile where the wide one is a landscape:

Leave it empty and mobile shows the same image desktop does.

Once the panel has a layout and an image, the whole card folds to one line. It shows what you chose — the layout's drawing and its name, the image's thumbnail and its name — and one control:

Press it and the card comes back exactly as it was, with the layouts, the image and every knob. It folds again when you leave the panel and come back, because the only reason to open it is to change something. A panel that has no image yet shows the full card, so there is never a step hidden behind a fold. And a panel that cannot go live — one too tall for a mobile screen — opens the card itself and keeps it open, because what caused it is one of these choices.

The knobs are the few numbers the layout leaves you. Every layout has one for the space between one block and the next — Space between blocks, or Space between them on the one-line layout, where the blocks are beside each other. The two side-by-side layouts add How wide the image is and Space between the image and the words; Image on top adds Let the image touch the edges; Image behind the words adds Where the words sit; and every layout that can be arranged two ways on mobile adds On mobile. Choosing a mobile answer switches the preview to mobile, because a choice you cannot see is a choice made blind.

Two buttons side by side are one block. Two buttons sits beside Button in Add to this panel, and pressing it puts a pair on the panel — Sign up and No thanks, until you write your own on them. The list shows the pair as one line, and its moves and deletes both together; press either button in the form for its own words and colors. Its one setting is On mobile: Side by side, or One above the other.

The list under the Layout card is your blocks, in order. A heading, a paragraph, the fields, the consent line, the button — one line each, and no boxes in it, because the layout owns the boxes. The image is not in the list either; it belongs to the layout, and you reach it on the Layout card or by pressing it in the form.

Pressing a line opens that block, where its own words and settings are — the at the end of the line says so. Pressing the block in the form opens the same thing, from wherever you are: press a button inside a pair and you get that button, not the pair. The line and the block are always the same thing.

A heading, a paragraph and the consent sentence are the three you can type straight into the form. Pressing one opens it and leaves the cursor where you put it, so you can keep typing; what you type lands in What it says when you click away.

Each line's ⋮ appears when you point at it, when you reach it with the keyboard, and stays on the line you are on:

The whole list works from the keyboard. Tab reaches it once — once for the list, not once for every line in it — and from there the up and down arrows walk between the lines. Home and End jump to the first line and the last, and Enter opens the line you are on, exactly as pressing it does. The arrows only ever walk; they never move a block. Pressing Down to read the next line and finding you have rearranged your form instead is the reason moving is a named act in the , where it can also say why it cannot.

Drag a block into place. Pick what you want out of Add to this panel — grouped into Content and Fields, each with its own mark — and carry it onto the form. The place you are over turns into a bar saying Put it here. Let go and it lands there. You can drop it in the form itself or in the list of what is on the panel, whichever is nearer, and you can pick up a block already on the form the same way — the at the start of its line carries it. Escape puts it back down, and so does letting go anywhere that is not a place.

Or press it, if a drag is awkward. Pressing a block in Add to this panel — with the mouse, with Enter, or with a tap — puts it at the end of the panel and selects it, and you move it from there with the line's . On mobile, hold the for a moment to start carrying a line; a plain tap scrolls the panel as it always did.

Anything you cannot use on the panel you are on stays where it is, grayed, and tells you why when you point at it — so the list of what a form can hold is the same size every time you look at it.

A trail across the top says where you are, and every step of it is a way back: Panels › Sign up › First name. Press Panels for the panel list, press the panel for its blocks — one press, from any depth, with nothing to unwind. The last step is where you are now. Escape goes up one step at a time.

The line above the form says which panel you are looking at, and it opens the rest of them. Press Panel Sign up and every panel in the form is listed in the order a visitor meets them, the first one marked. Choose one and you land on the same thing in that panel where there is one — editing a button in this panel puts you on that panel's button — and on its list of blocks where there is not. That is how you copy a look from one panel to the next without walking out of the form and back in.

The six layouts are a small vocabulary, and a form is sometimes a shape that is not in it. Advanced layout, under the Layout card, hands you the boxes:

Turn it on and the panel's boxes appear in the list, indented, with everything the box editor has ever offered: the Columns card, wrapping a block in a row or a column or a layer, taking a box away again, Move to…, and a width and a distribution on the boxes themselves. Turning it on and off changes nothing about your form — it changes what you are shown.

A panel whose shape is one of the six opens on the Layout card; anything else opens in Advanced. That is true of every form built before the layouts existed, and of anything you build by hand afterwards. Where a panel cannot be drawn as a layout, the switch is on and cannot be turned off, and it says which part of the shape is in the way:

Rearrange the panel until it matches a layout again and the switch lets go.

The switch is per panel, and it lasts as long as you have the form open. Close the form and open it again and every panel is back on whichever surface matches its shape. Nothing about it is saved into the form, so it can never change what a visitor sees.

Boxes. A box holds things top to bottom (a column), side by side (a row), or on top of each other (a layer) — and boxes go inside boxes, as deep as you need. That is what every layout is made of, and it is what you are editing directly in Advanced. The list is the one thing the preview cannot show you: which boxes are inside which. An image beside a column of words looks like two things side by side and is two levels — which is why moving one of them sometimes moves the other.

Getting a thing inside a box. Dragging always puts a thing beside another one, never inside it — a gesture that means two different things depending on a few pixels is how content ends up somewhere you were not looking. So there are two ways in, and both say what they are doing. Move to… in the line's lists every box on this panel by the same line the list draws for it — Left column — image, Row — two columns — and a box that cannot take this thing is still listed, grayed, with the reason on it. And holding Alt (Option on a Mac) with the up and down arrows moves the line you are on between boxes instead of walking the list: up lifts it out of the box it is in, down puts it into the box beside it. Where there is nowhere for it to go it says so, rather than doing nothing.

Columns. Columns in the Layout group is the quickest way to put things side by side by hand. Press it and it asks one question, drawn rather than written — two halves, three thirds, a wide left or a wide right — and what arrives is a row of empty columns, each one saying Put something here. Press one and add a heading, an image, a field, whatever belongs there. Pick the row itself and its first card is Columns: One, Two or Three (taking a column away moves what is in it into the column beside it, so nothing is thrown away); Column widths, typed as percentages, where you type the left one and the rest is whatever is left over; Gap, the space between them; and On mobile, where you say whether they stack, wrap, or stay side by side. A row that has columns shares itself out between them, so the blocks inside no longer have a Width of their own — the widths on this card are the whole answer.

Turning a form you have already written into columns. Open the on the block where the columns should start and choose Put this and everything below in columns. That block and every block under it in the same box move into the left column, and the right column arrives empty. Then carry one thing across — one drag instead of one per block.

A row in columns holds its columns and nothing else. There is no place between two columns for a block to land, because every column has a width and a block sitting between them would have none. Drop it in a column instead, or use the Add a block row at the end of the one you want.

A form is made of panels, listed one to a row at the top of the left column. Every panel is the same kind of thing: the one that asks for an address and the one that says thank you are both panels, and both can hold an image, a heading, a button, anything. You name each one, and the name is yours — it is what the row says and nothing else. Beside the name, the row says how many things are on that panel and which panel a visitor meets first.

Each row's ⋮ is where everything about that panel lives: add a panel before or after it, rename it, clone it, move it up or down, or delete it. Anything that cannot be done right now stays in the menu, grayed, and tells you why when you point at it — so the menu is the same shape every time. Adding a panel is this menu and nothing else, because before and after are the only two answers worth having: a control that could only ever add one at the end was one more thing to read.

You can delete any panel, including the first one. Delete the first and the one after it becomes what people arrive on, and the menu says so before it happens. The only one you cannot delete is the last one left: a form needs a panel.

You can also drag a row to move it. Panel order is the route through your form, so a move that would break the way people get somewhere is refused, and it says which button is in the way rather than quietly rewiring it.

The panel you have opened is the panel you are editing and the panel in the preview — they are never two different things.

Most forms are one panel that asks and one that thanks, and that is a complete form. A second panel is worth it for a short question before the offer — somebody who has already said yes to something small is far more likely to finish. Ask for a name on the same panel as the email address, never on a panel of its own.

A button carries what it does and where it goes, separately. Pick a button and you choose:

A button can take people to a page of your own — the sale, a collection, the product the form was about. Choose A link, then either paste the address or type a few letters of what you are looking for: the field searches your store's products, collections and pages, and offers your home page and all products beside them. Choose one and the field fills in with its address, which you can still edit by hand. Pressing the button takes the person to that address.

A typed address has to start with https://, which the pages on your store already do; anything else is refused where you type it, because a button that opens something else on your storefront is not a link, it is a hole.

One thing to know about choosing from your store: the address is worked out when you choose it, not every time somebody presses the button. If you rename that collection's or product's address in Shopify later, come back and choose it again.

Pressing it takes them there and the form is over. If the button signs people up first, they are signed up before they go — but they will not see a thank you, and there is nothing left to offer them, so the editor says so before you publish. A panel of your own words with a Shop now button on it does both.

Giving away a code needs no special kind of button. Put a discount code block on your thank-you panel and point a button that signs people up at it. Signing up is what reserves the code, and the block shows it. If no code can be given — the discount ended, or your store could not be reached at that moment — the same block shows its own fallback text instead, which is a line you write on the block and can rewrite in your own words. One thank-you panel, both endings.

That is also the one rule about such a panel: only a button that signs people up may lead to it, because a code is reserved when somebody signs up and at no other moment. If a button that only moves people on is pointed at it, the editor says so and names the button to change.

Because each button answers for itself, two buttons on one panel can go two different places. That is how you ask a question and send the yes and the no to different endings, with nothing else to set up.

Every button looks the same until you change it. What a button does has nothing to do with how it looks — a button that only moves people on is drawn exactly like one that signs them up, and the Style mode is where you make one quieter than the other.

A form only ever moves forward: you can send people on to a later panel, end the form, or send them off to a link — never back. That is what makes it impossible to build a loop somebody cannot get out of.

If a panel has more than one button that signs people up, one of them is the one the Enter key presses, and you say which.

Removing a panel that something leads to says what else will change before it changes it.

Anything that needs fixing appears under the preview by itself — listing anything that would stop the form publishing, any panel nobody can reach, and anything worth knowing that is not an error. You never have to press anything to find out. When there is nothing to fix, nothing is there.

The heading counts the two kinds apart, because they are not the same kind of thing. Something that would stop the form publishing is a thing to fix; something that is only worth a look — a form that closes on somebody the moment they sign up, words that will be hard to read — is a thing worth knowing, and your form publishes with every one of those standing. A form with nothing wrong with it and one thing worth a look says so, and never says you have something to fix.

A panel taller than a mobile screen stops the publish. The editor draws every panel of your form at mobile size — 390 by 664 points, which is what a common handset leaves you once its browser has taken the top and the bottom for itself — and if the whole panel does not fit on that screen it says so, names how many pixels it is over, and names the tallest block on it, which is nearly always the one to change. It is a thing to fix rather than a thing worth knowing, because the person it costs is your visitor: they see a form that looks finished and never learn there is a button below the fold. The preview switched to On mobile shows you the same screen, so you can watch the bottom come back into view as you shorten it.

A form that is never shown on mobile is not held to this. Add a Device rule under Shown to and leave mobile out, and the check stands down — nobody will see the form on mobile, so there is nothing to fit. If that rule is set to show the form when we cannot tell the device, the check stays, because that visitor may be on mobile.

The commonest cause is an image at its own shape. A tall image set to Natural size is as tall as its own proportions make it at the width it is given — on mobile that is the full width of the form, which is often twice the height you expected. Put it back in a frame (Fill the frame or Fit inside) and the frame decides the height instead. See Images, below.

Check the paths before publishing shows every route through your form in plain words, where each one goes, and how each one ends. It is in the in the editor's toolbar, and it is also a link inside the list above whenever that list is on screen. On a form with nothing wrong with it, it opens saying so.

Close it when you are done with it, and it also clears itself the moment you change the form — every route it listed was worked out from the form as it stood when you asked, so a report left standing over an edit would be describing a form you no longer have.

Style is the second half of the editor. Pick anything in the form and it shows what that thing looks like right now — never an empty box where a real value is, and never a word standing in for a number. A field that says 10 and 12 for its padding is a field with ten pixels above and twelve at the side, because that is what your shop is drawing today.

The pane is a stack of named cards, top to bottom, and everything that governs one thing sits in one card under that thing's name: Text · Focus outline · Background · Border · Corners · Shadow · Box · Padding · Margin · Placement, and Hover on a button. A card a block has no use for is simply not there.

Text. Every heading, paragraph, label and button carries a Typeface, a Size, a Text weight, italics, an Alignment, an All capitals switch, a Line height, Letter spacing and a Text color. The first font in the list is your store's own, named for what it is — Helvetica (default) — the one your theme already uses, so a form looks like the shop it opens on, and it costs your page nothing at all.

Under it are the ones we serve ourselves, drawn in themselves so you can see them before you choose: Inter, Montserrat and Nunito for something plain and modern, Playfair Display, Lora and Cormorant Garamond where you want serifs. They come from our servers, not from a font service, so nobody else learns who visited your shop — and a form only fetches the ones it actually uses, while it is waiting to open, so it is already there when it appears.

Sixteen pixels is where a field starts, and going below it is your call. Set a field or a button smaller than that and the editor tells you what happens: on iPhone, Safari zooms the page in when someone taps a field smaller than 16px, your form jumps, and part of it ends up off-screen. Most of the people who visit your store are on mobile. It is a warning and not a wall — you can publish it — but that is the trade you are making.

Background, Border, Corners, Shadow, Box. Behind anything you can put a color, an image or a gradient. A gradient is an angle and two or three colors, each with a place on the line; an image behind a box can fill the frame, fit inside it, or be left at its natural size. Around it goes a Border — a width, which kind of line, and a Border color — and Corners, one number for all four or a different number on each, which is how you round the top of an image and leave the bottom square. Under it goes a Shadow: soft, medium, strong, or the exact numbers if your brand has a particular one. Box is the last of them: Opacity fades the whole thing, and Minimum height is the shortest it may ever be drawn.

Padding and margin. These are the two questions people usually mean when they say "spacing", and this is the difference: Padding is the space inside, between a block's own edge and what it holds, so it moves the words away from the border and the background around them. Margin is the space outside, between that block's edge and whatever is next to it, so it is how you give one row room underneath without moving anything else. Both take one number for all four sides or a number per side, and the small link between them says which sides move together. A third one, Gap, lives on a box and spaces everything inside it evenly — reach for that when it is all of them you want moved, and for Margin when it is one. They are the same two words the email editor uses, and they mean the same two things there.

Placement. Where a box sits in the row or column that holds it (Box alignment), how much of that row it takes (Width), how far apart the things inside it sit (Gap), how those are spread along it (Distribute), and whether it reaches past the form's own edge (Edge to edge). Where an answer cannot change anything — the tallest block in a row cannot be moved up or down, and a row that has already shared its columns out decides their widths itself — the control is still there, switched off, with the reason behind the i beside its name.

Edge to edge. A box — or an image — sitting directly in the form can reach past the form's own padding and run to the edge, and to the top or the bottom when it is the first or the last thing in the form. That is how you get a band of color across the top, a photograph with no gap around it, or a footer strip. It is offered only on things that sit at that level, because that is the only place it can mean anything.

It has its own answer on mobile. Switch the preview to On mobile and turn it on there and it is on for mobile alone — an image beside the words on desktop, a band across the top on mobile, from one form. See An image edge to edge on mobile, below.

Images. An image's frame is landscape or square, and there is no tall one, because a tall image pushes your button off the bottom of a mobile screen. A border and rounded corners are drawn on the image itself, and the corners cut it — so the padding on an image block sits outside that frame, between the image and the block's own edge, with the block's background behind it. Choose whether the image is cropped to fill that frame, fitted inside it, or left at its own shape — and when it is cropped, say which part to keep, so a face is never the bit that gets cut off.

Natural size turns the frame off, so while it is chosen the Aspect ratio control is shown switched off with the reason beside it. An image left at its own shape has no frame to be landscape or square, and a control that looks like a choice while changing nothing is worse than one that says why it cannot.

Words over an image you build by putting an image behind a box and placing your words inside it, or by starting from Image behind the words. The Tint — a color laid over the image, on the image block's own card — is what keeps words readable over a busy photograph.

Fields and buttons. A field carries its own background, border, corners and padding, plus a Placeholder color for the hint inside it. Both a field and a button carry a Focus outline card — the outline that shows where somebody using a keyboard has got to. That outline cannot be turned off — you choose its color and nothing more, because it is the only way somebody using a keyboard can see where they are. A button adds a Hover card — a Button color, a Text color and a Border for when the pointer is over it — and a choice between running the full width of the form and fitting its own words.

Format is four cards. Form is where you say what the form is on your storefront — Popup, Corner card, Bar, Full screen, or Embedded — how wide it is, and how it behaves. It is one question with one answer, and it is not about who sees the form — that is Shown to. Dim behind the form, Close button and Teaser are the three below it.

The dim behind it. A popup and a full-screen form darken the page behind them, which is what makes them read as something to answer rather than something beside the shop. You choose the color and how strong it is: 20 is barely there, 80 is heavy. A corner card, a bar and an embedded form do not dim anything, because they never took the page over.

One height on every panel. A form that grows and shrinks as somebody steps through it is unsettling to fill in, so a popup, a corner card and a bar take the height of whichever panel needs the most room and hold it all the way through. The shorter panels keep their own spacing and the extra room is the form's own background. Extra room says where that room goes: Center the content puts it above and below in equal measure, which is what happens unless you say otherwise, and Below the content leaves it all at the bottom. Leave Height empty and the form is as tall as the panel that needs the most room. Type a number and the form is exactly that tall, whatever is on the panel. Turn Keep one height on every panel off if you would rather each panel be its own size. A full-screen form already fills the screen, and an embedded one is as tall as its content, so neither is asked. And whatever you set, a form is never taller than the screen it opens on — on mobile especially, where being taller than the screen is how a sign-up button ends up somewhere nobody can reach.

Clicking outside closes a popup, and you can turn that off. It is what almost everybody expects, so it is on to start with; switch it off when you want the form closed deliberately rather than by a stray click.

Nobody can be trapped in your form. The close button and the Esc key always work, whatever else you set, and there is no switch anywhere that turns them off. That is not a setting we forgot — a form somebody cannot leave is a cost paid by a shopper who never agreed to bear it. Whichever way somebody closes it, it counts as them saying no, so how long to wait after somebody closes it means what it says.

The close button is yours. Every shape has one except Embedded, which sits in the page rather than over it and so has nothing to close. Give it a color, a background, a border, rounded corners, and a size. Where it sits is two numbers rather than one — From the side and From the top — so you can hold it tight to the top edge and still keep it clear of the side, or the other way round. On a popup and a corner card you can also put it outside — just beyond the top-right corner, over the dim — which is what you want when the form itself is a photograph and a mark on top of it would be lost; the same two numbers place it there. However small you make it, the area somebody can tap stays at least 44 pixels, so it is still easy to hit on mobile.

Marking required fields with a star is on by default, and you can turn it off. It only changes the star: a field that has to be filled in still has to be filled in either way, and anybody using a screen reader is told so regardless.

If somebody leaves a required field empty and presses the button, your form says so itself — a short line in your form's own error color, under the field it is about, using the label you gave it: "Please add your first name."

Somebody who closes your form can be given a small button in the corner of that page — a teaser — and pressing it brings the form back exactly where they left it: the same panel, and whatever they had already typed. Leave a teaser that reopens the form is the switch, on the Teaser card under Format — and it is the only teaser setting there. A popup, a corner card and a full-screen form can leave one. A bar is already on the page and an embedded form sits in the page rather than over it, so neither is asked — and changing Form type to either one asks you first, because the teaser would go with it. Changing between the other three keeps it.

Everything about how it looks is on the Teaser row, above your panels — Design it on the Teaser row, under the switch, takes you straight there. Open it and the first card, Shape and position, sets its shape, where on the screen it sits, its width and whether it has a close button of its own; below that are its words and its blocks, and its look — background, corners, shadow — the same way every other part of your form is edited. It starts out looking like your form's own button, and it is yours from there. The preview shows the teaser, not the form, while that row is open, so every change is in front of you.

Shape is asked twice, once for desktop and once for mobile, so a wide tab on a desktop can be a slim handle on the edge of a mobile screen — or nothing at all there, if you would rather. Position is one answer for both: the teaser sits in the same place on every screen. Rectangle tab is a small labeled rectangle; round its corners and you have a bubble. Corner ribbon is a band drawn on the diagonal across the corner you chose, running off both edges of the screen with your words centered on it. It is pinned to its corner, so it takes no distances and no width, and it only sits in one of the four corners. Its words are on the diagonal, so it holds 24 characters at most — with longer words it cannot be chosen until you shorten them, and if the words grow past 24 after you chose it, your changes still save but the form will not publish until they are shorter. Corner triangle fills the corner you chose with your background color, its long side facing into the page and your words centered in the middle of it. Pick it over the ribbon when your words need two lines: it holds one block of words of up to two lines — press Enter where you want the second line to start, or let the words wrap on their own. The Line height on the words' Text style sets how close the two lines sit. Like the ribbon it is pinned to one of the four corners and takes no distances and no width. Instead it has a Size for desktop and one for mobile: the length of each of its two edges along the screen, from 110 to 260 pixels, with 120, 140 and 160 offered beside the box. It starts at 140 on desktop and 120 on mobile. If your words look as though they may not fit the size you chose, the Teaser row says so and so does the list of things worth knowing before you publish — but the form still publishes: the preview shows exactly what your shoppers will see, so check it there, and if they do not fit, shorten them, make the triangle larger or make the text smaller. Edge handle is a slim tab hugging the left or right edge, and it is what mobile gets unless you say otherwise. Icon bubble is a round button with an image in it — put one on it, or your words are drawn in the circle instead, and the checks say so before you publish.

A teaser needs a name. If it is only an image, give the image a description in Images & media or put words on it — a teaser with neither is never shown, so the form will not publish until it has one. The same goes for mobile: if you leave its words out on mobile, something with a name has to be left there. Once the form is live, that image cannot be marked decorative in Images & media until the teaser has words of its own.

Six places, and the middle of the top and bottom edges is not one of them: a thing in the middle of the bottom edge is a bar, which is a shape of its own. Each place takes a distance from the edges it sits against, in pixels or as a share of the screen, so you can move the teaser clear of a chat button or a cart tab your theme already put there. A corner ribbon and a corner triangle are the exceptions: each sits in one of the four corners and nowhere else, pinned to the corner itself.

Leave Width empty and the teaser is as wide as its own words. A corner ribbon has no width to set: its band is as long as the corner needs. You can also give it a close button of its own, which it does not have unless you ask for one; if you do, the area somebody can tap stays at least 44 pixels however small you draw it. Once you ask for one, you style it with the same controls as your form's own close button — its X color, background, border, corners, size and two distances — whatever the teaser's shape. On a corner ribbon the close button sits in the corner itself, below the band. On a corner triangle it is a small circle, black with a white border and a white X until you change them, at the triangle's tip along the edge of the screen, just touching it and clear of your words; its two distances move it from there toward the page.

Closing your form is still an answer. Leaving a teaser does not change that, and it does not change Frequency: if your form waits 30 days after somebody closes it, it still waits 30 days, and the form itself will not open again until then. What the teaser gives them is a quiet way back in the meantime — on that page and on the next one — which they have to press. Somebody who signs up gets no teaser at all, and neither does anybody your form was not going to be shown to in the first place. Somebody who closes the teaser itself has closed it until your form is free to ask them again — the same wait Frequency sets.

Switch the preview to On mobile and the appearance controls change with it: you are now setting the mobile values. Anything you do not change there stays the same as it is on desktop, and a value you have changed offers to go back. That is how one form covers both screens instead of becoming two designs that drift apart.

Zero is a value on mobile. Setting a mobile margin to 0 does not mean "the same as on desktop" — it means no space at all, on mobile, whatever desktop says. Use Use the desktop value when you want the desktop number back.

An image edge to edge is one switch. Choose the Image on top layout and the Layout card offers Let the image touch the edges:

It starts on, and it is one answer for both screens — the image runs the full width of the form, and to the top as well, on desktop and on mobile alike. That is the whole of it on the layouts, and it is what most forms want.

Edge to edge on mobile only is a job for Advanced layout, because it is a value set on a box while you are looking at mobile. Three steps, and the third is the only one that touches mobile:

The image then runs the full width of the form on mobile — while desktop keeps whatever it had. It is one way only: mobile can turn edge to edge on where desktop does not have it, and cannot turn it off where desktop does. If the row you took edge to edge also holds your words, they come out to the edge with it; give the column holding them some Padding to bring them back in.

You can leave a line of copy out on mobile where it is genuinely too long. You cannot leave out a field, the consent line, a button or a discount code — what a form asks for and what it gives are the same on every device — and hiding an image is never the way to make a mobile layout work. If it does not fit, change how the panel is arranged.

Put an image inside a layer and leave it where it is — behind everything else — and it becomes the layer's ground: the image fills the whole box, and whatever else is in that layer sits on top of it at one of nine positions.

The image decides how tall the form is. A layer with an image behind it takes that image's own proportions, so the space is reserved before a single byte of the image has arrived and nothing on the page jumps as it loads. Put more words in it than the image has room for and the box grows to hold them — nothing is ever cut off — but the image is then cropped to the taller shape, so short copy is what this arrangement is for.

Words on an image are hard to read, and we say so. We look at the part of the image each block of words sits over and compare it with the color of those words. If they are too close, the check under the preview says which words and which way round it is — and the same sentence appears under the Tint itself, so what is wrong and the control that answers it are in one place. It is never a refusal: a quiet caption over a photograph is a real design, and this is your call.

Tint is the answer that takes one press. It lays a color over the image, under the words: pick the color, then the strength. Pick the image block in your form and you will find it on that block's own card, under Content — beside the image it is over, which is what it acts on.

0% leaves your image exactly as it is, and that is what a new form starts with — your photograph, untouched. 45% black is the strength that makes white words readable over any photograph, and it is one of the quick presses under the slider along with 0, 25 and 60. A light tint at the same strength does the opposite job: it lifts a dark photograph so dark words can be read on it.

The tint is one answer for the whole layer, at every width — there is no separate mobile setting for it. The other two answers to hard-to-read words are a background behind the words, or a different image.

On mobile, choose what happens to the image. Pick the layer and answer On mobile:

If you choose Image above the words, look at your text colors on mobile. White words written for a dark photograph are white words on a white panel once the image moves out from behind them. Switch the preview to On mobile, pick each block, and set a color that works there; the value you set applies on mobile only, and desktop keeps its own.

Anything that sits side by side has to say what it does on mobile. On the Layout card that is the On mobile answer under the drawings, and each layout offers the two or three answers that make sense for it — an image above the words or below them, the words over the image or under it, a line that stacks or stays a line. Answering switches the preview to mobile so you can see what you just chose; switch it back whenever you like.

In Advanced layout, a row you drew yourself asks the same question, in its own On mobile control: Stack top to bottom, Wrap, or Stay side by side. There is no default there, deliberately — a row that has not decided is a row that will surprise you on the device most of your visitors are using.

Lining things up inside a row is a top-to-bottom question. Pick something in a row and the Style pane's Box alignment offers Top, Middle, Bottom or Stretch. It moves whatever is shorter than the row: a button beside fields with labels is the usual case, and it starts at the bottom, level with the boxes. On the tallest thing in the row there is nowhere to move it to, and the pane says so instead of offering four answers that would all be the same one.

A form that is too narrow cannot put things side by side. Below about 440 pixels wide, a row folds into a column on every screen — so if you make a row in a narrow form, the editor either widens the form for you or tells you plainly that it cannot. A corner card is always narrow; if you want two columns, use a popup.

A button beside a field sits level with the box, not with the label. A field in a row is a label with a box under it, so a button next to it starts lower than you would expect and ends level with where somebody types. That is what it does on its own, and you can say otherwise: pick the button, and Style offers Box alignmentTop, Middle, Bottom or Stretch.

Box alignment and Distribute answer in the direction they act. Box alignment is where a box sits inside the one around it; Distribute is how the things inside a box are spread along it. Both name the direction they actually move something, so a row offers Left, Center and Right and a column offers Top, Middle and Bottom — and a row you told to stack on mobile offers the up-and-down words while you are looking at mobile, because on mobile that row is a column. A stack of things one on top of another has no direction to spread along, so it is not offered Distribute at all; position each thing in it instead.

Your images are shown in a landscape or a square frame, and never a tall one. An image that does not fit is cropped rather than allowed to stretch the form, because a tall image pushes your button off the bottom of a mobile screen. Say which part of it to keep in Style and the crop keeps that part.

A field needs a label, placeholder text, or both. The label is the words above the box. The placeholder is the words inside it, which disappear the moment somebody types — so it is a hint, never a substitute for a label, and a field carrying only a placeholder is asking somebody to remember what was asked while they answer it. Leave the label empty if you want the tidier look; the placeholder then names the field for anybody using a screen reader. A field with neither will not publish, and the editor says so under the two boxes while you are still there.

Every image needs a description. It is read aloud to anyone who cannot see it — say what is in the image. An image with no description will not save, and the editor says so while you are still looking at it rather than when you press Save.

The consent line stays. A form that asks for an email address has to say what signing up means, so that block cannot be removed: Delete in its is grayed and says why. The words are yours — write them however your shop sounds.

Your policy pages are linked for you. Where the consent line says "Privacy Policy" (or "Privacy Statement" or "Privacy Notice") or "Terms of Service" (or "Terms and Conditions", "Terms & Conditions" or "Terms of Use"), your shoppers see it as a link to your store's own policy page, the one Shopify publishes from Settings → Policies. Capital letters don't matter. Only the first mention of each is linked, and it opens in a new tab so nobody loses what they typed into the form. There are no addresses to type, and the links stay right if your domain changes. A policy you have not published stays plain words, so nobody lands on a missing page. The consent line's card in the editor tells you which of your words will link.

A mobile-number field needs text messages turned on. The switch is in Settings → Text messages, and with it on your form publishes like any other. With it off the form will not publish, and the editor says which panel is asking for a number and names the switch to turn on — or take the field out instead. Turning the switch on collects numbers and records what each person agreed to; nothing is ever texted to anybody until a carrier has approved a number of your own, which is a separate step on that same screen and usually takes a few days, sometimes a week or more. The Text messages help page is the whole story.

Opens, Where and Shown to are three questions, on three cards behind Settings. They are saved the way the rest of the editor is saved: they write themselves as you work, and nothing you change there reaches anybody until you publish. Who sees your form and what your form says go live together, in one act.

The three are read together, never one at a time, and two of the cards say so at the top:

A form kept to your sale pages, shown only to people you have not met, opening after a scroll, is met by the visitors who are all three of those things — and by nobody else.

Opens is the list of ways your form can open. A new form has one of them:

A selector you have not finished typing holds that one field, the way a blank page address holds a rule:

Clear the field to type a new selector and nothing is saved meanwhile — your form keeps opening on the one it already had. Empty is not a thing a form can open on, so it is never written down.

A form can have more than one way to open. Add another way it opens puts a second row under the first, and a control appears above them asking whether you mean any of them or all of them:

All of these is how you ask for your most engaged visitors — thirty seconds and half the page — rather than a mistake. There is a ceiling, and the control says what it is when you reach it:

Opening as soon as the page loads is the one that cannot join a list. A form that opens immediately has nothing left to wait for, so the control will not act and says why where you are pressing:

Leaving a page is something you can only see on desktop with a mouse, and most people who visit your store are on mobile — so a form that opens on the way out also carries a backup, and the backup is not optional. On a form with one way to open you choose it under Format, beside the preview; on a form with several, it sits on the exit row itself. The row says which:

Where is about the page, not about the person on it. A form that names nothing here can appear anywhere, and the card says so rather than sitting blank:

Two lists, because that is how you would say it out loud. Only on these pages and Never on these pages. Each row is a way of matching plus an address you type:

The three ways of matching are is exactly, starts with and contains. Starts with is the one you usually mean — a collection, a blog, a whole section of the store — and it is what a new row arrives set to. There is no does not contain, because that is contains in the second list: one idea instead of two.

The address is the part after your domain, and the card says how it is read:

A trailing slash is ignored too, so /pages/about and /pages/about/ are one page. The question mark is the part worth knowing: it is what keeps a rule working when an ad or a campaign link adds tracking to the address, which is exactly the traffic you paid for.

Markets and second languages are already taken care of, and this is the part that would otherwise bite you quietly. A store selling into several markets serves the same collection at /collections/sale and at /en-gb/collections/sale, and a rule written one way would have matched one market and missed the other — so an exclusion you wrote to keep a form off your sale pages would have kept working at home and stopped working abroad. Write the address the way you write it for your main market. We take the market off the front before the rule is read, so one address covers all of them.

Because of that, an address with a market prefix in it is refused: a rule written as /en-gb/collections/sale would be read as /collections/sale and match every market, which is the opposite of what typing it says. Take the /en-gb off the front and the rule covers Britain along with everywhere else.

One address a rule can miss while your theme is catching up: a market's own home page. Your main market's home page is /, and every other market's is read as its own address — /en-gb, say — until your theme has the current version of our block. If you want a rule about home pages in every market before then, name each one.

Both lists empty means anywhere. Name pages in both and the card tells you which wins:

Never is asked first, and nothing in the other list can out-vote it — otherwise you would be left with a rule you believe is working.

Only on these kinds of page is the other way to narrow it, and it is a row of toggles rather than an address: Home, Product, Collection, All collections, Blog, Article, Page, Cart, Search. They are Shopify's own kinds of page, in your store's words.

A kind and an address narrow each other; they do not add up. Collection turned on, and contains /sale, is one rule about collection pages whose address contains /sale — not two chances for the form to appear.

A row you have not finished typing holds the whole rule back, and the card says so while it waits:

An address matching nothing would be a rule meaning nothing, so the editor holds it rather than refusing to save your form. It is worth finishing before you publish, though: a rule being held is a rule narrowing nothing, and a form that shows up more widely than you meant is the surprise that costs you.

We do not always know which page somebody is on. The forms code that runs on your storefront is part of your theme, and a store still serving an older copy of it does not tell us the page at all. So this card asks the question the consent and location rules ask — When we cannot tell — with its own reason underneath:

Do not show the form is where it starts, and it is the careful answer: until your theme catches up, a page rule shows the form nowhere rather than everywhere. The updated code reaches your store on its own; there is nothing for you to do.

A page rule reads the address and ignores everything after a ?, so a tracking tag on an ad can never break it. When the tag is exactly what you want to aim at — a form only for people who clicked one ad, or one email — add a link rule at the foot of the Where card:

Take the name and the value from the link itself. In a link like yourstore.com/?utm_ID=testing, utm_ID is the name and testing is the value. You can paste the whole utm_ID=testing into the first box and it is split for you. Capitals do not matter, and leaving the value empty matches the name with any value — every link carrying a utm_source, say, whatever it says.

Not when turns it round: everybody except the people who arrived on that link, which is how you keep a signup form away from people who came from your own newsletter.

Use your own link names, such as utm_source or utm_campaign, not an ad network's click ID. Some browsers — Safari among them — remove click IDs such as gclid and fbclid from the link before your store ever sees it, so a rule on one of those will not match those visitors. The utm_ names are left alone.

Only the link of the page someone is on counts. Nothing on your storefront remembers it, so somebody who lands from your ad and then clicks through to another page no longer carries the tag, and the rule no longer matches them there. If the form should catch them, let it open on the page they land on.

A value cannot be an email address. Addresses in a link are never read, and the card says so rather than saving a rule that could never match. Nothing a link carries is kept, either: it is read to answer this one question and then dropped.

Like the page, the link is not always known — a store still serving an older copy of the forms code does not tell us — so the card has its own When we cannot tell, starting at Do not show the form.

A new form starts with one rule already on it: it is hidden from people who are already subscribed, and everybody else sees it. That is not a law, it is a rule like any other. It sits on a Consent card, and you can turn it around, point it at a different consent state, or remove it so the form shows to everyone who visits your store.

Add a rule about is a row of compact + buttons: Location, Consent, New or returning, Segment and Device. Each rule you add appears as a card headed by its subject, with a trash at its top right; a kind your form already has is grayed, because a form only ever asks each of these once.

A consent rule is one sentence, and it is the sentence a new form is born carrying:

It has two directions. Show means only people in that consent state see the form. Do not show means everybody except them does. The words between the controls stay the same whichever way you set it, so the rule reads as one thing rather than two.

And it asks about one channel at a time. The middle control is Email or Text messages, so a form whose whole purpose is to collect telephone numbers can say do not show it to people who already hear from us by text without caring what their email consent says — and the other way round. A new form starts on Email; change it and the rest of the sentence keeps its meaning exactly.

Somebody you have never met is neither subscribed nor anything else — most people on a storefront are exactly that — so this rule shows them the form. If you would rather it did not, When we cannot tell, at the bottom of the same card, is where you say so.

A location rule is one sentence, and you finish it:

It has two directions, and they are the two choices in that first control. Show means only the countries you name see the form. Do not show means everybody except them does — the shorter way to say "everywhere but the United States", and the only way that does not involve listing every other country on earth. It is one list either way. Changing the direction never changes which countries are in it, and never loses your answer.

You search for a country by name, never by a code. Type "United Kingdom" or just "UK"; you never see a two-letter code anywhere. Each one you pick becomes a chip in the sentence, with an × for taking it off again. The search puts itself away as soon as you pick one, so the rule you are writing is never hidden behind a list of countries — + Add a country brings it back with the cursor already in it, and Escape or a click anywhere else closes it too.

Three countries show at a time, and the rest sit behind and 4 more. Press it and they all open in place; press it again and they fold back up. The number counts what is hidden, so three chips and and 9 more is twelve countries. A country you have just picked is always on screen.

Nothing is saved until you choose the first country, and the card says so while it waits. A rule with no countries in it would not mean anything, so the editor holds it for you rather than refusing to save your form. Taking the last country back off does the same thing — it is not an error, and nothing else you have done is at risk.

Some countries can be narrowed further. Under the sentence, each of them gets its own line:

The countries this works for today are the United States (the fifty states and the District of Columbia), Canada (provinces and territories), Australia (states and territories) and the United Kingdom (England, Scotland, Wales and Northern Ireland). Every other country offers no line at all, and the rule covers the whole of it.

Every line starts at Everywhere, which means the whole country and stores nothing. The other two answers are:

Regions work exactly like countries: you search by name, each one becomes a chip with an ×, the search puts itself away as soon as you pick one, three show at a time, and nothing is saved until you name the first region. Switching between Only in and Except keeps the regions you have named and changes what they mean.

The direction at the top of the sentence still decides. Do not show the form to people in United States · In United States: Except Texas is shown in Texas, and everywhere outside the United States — the line says who the rule is about, and the first control says what being named does.

Two forms, one store, which is the shape most people want:

Between them, everybody in the United States sees exactly one of the two, and nobody sees both.

Where the region comes from, and what happens when there isn't one. The platform tells us the state or province from the visitor's connection, the same way it tells us the country. It cannot always — some connections, some phone networks and some company networks say nothing about it, and it goes missing more often than the country does. When it cannot tell, the form is not shown, unless you say otherwise in When we cannot tell on the same card. That one answer covers both: the country and the region.

Every rule that can be unanswerable asks you one more question: what happens when we cannot tell. Most people on a storefront are people you have never met, so this decides far more often than it sounds like it will. "Do not show the form" is the careful answer; "show it anyway" is the right one when the whole point of the rule is to reach somebody new. It works the same way in both directions of a location rule: the careful answer always means fewer people see the form.

Segment is one of the tiles under Add a rule about, and the rule it adds is one sentence:

The first control is the direction — people in it, or people not in it. The second is which of your segments it is about.

A segment rule can only answer for somebody whose identity your store has verified, and most people on a storefront are not:

Verified is the word the profile screen uses, and it means the same thing here: their address reached you through your store's own records — an order, a customer account, a checkout your store completed — rather than through a form somebody typed an address into. Somebody who has only ever typed an address is not verified, and this rule cannot answer for them either.

So this is the rule where When we cannot tell decides most of the time. Set it deliberately rather than leaving it: on this one card it is closer to the main question than to an edge case.

Choosing a segment here is what lets your storefront ask about it at all. Nothing else grants that — not a form that mentions the segment, not a campaign that uses it. Until you pick it in this row your storefront cannot ask whether anybody is in it, and once you have, it can ask about that segment and no other.

The segment's name never leaves this app. What your form carries is a meaningless id. Segment names describe your business, and everything a storefront sends is readable by anyone who cares to look.

A row with nothing chosen holds the rule, the way a blank address does:

If you have not built one yet, the row says where to:

And a rule pointing at a segment you have since deleted names it as A segment that is no longer in your store, rather than drawing an empty menu. The rule is still narrowing your form, so the row says it is there.

A rule about a segment that is gone shows the form to no one, and When we cannot tell does not change that. That setting is your answer to "what if I cannot tell whether this person is one of mine" — and with the segment deleted there is nobody to be unsure about, so there is no question for it to answer. The same holds the other way round: anyone not in this segment stops matching too, because that sentence is about a segment as well. Take the row off and the rule stops narrowing your form.

If we could not look your segments up at all, the row says that instead — A segment we could not look up just now — because a segment that is gone and a lookup that failed are two different things to do something about. A failed lookup is not read as a deleted segment: nothing is guessed, and your form holds where it is until the lookup works.

Removing the row takes the permission back. Your storefront could ask about that one segment because you chose it here; take the rule off and it cannot ask any more.

Device is three toggles — Desktop, Mobile and Tablet — and one of them is always on. A rule you have just added has all three on, which narrows nothing until you take one off.

That is the part worth reading twice. A tablet is neither of the other two, so Desktop on its own does not reach one, and neither does Mobile on its own.

The device comes from the screen, not from what the browser calls itself. That is the honest reading and it is right nearly every time, but the edges are real and have no better answer anywhere: a desktop screen you only ever touch can read as a tablet, and a mobile with a keyboard and mouse attached can read as a desktop.

This rule has the blind spot the page rule has. A store still serving an older copy of the forms code does not tell us the device either, so until your theme catches up a device rule cannot be answered for anybody — including a rule with all three turned on. When we cannot tell, on the same card, is what decides meanwhile, and left where it starts it means the form is not shown.

Frequency is a cap, a window, and two waits: one after somebody signs up, one after somebody closes the form. A new form waits 30 days after either. Both are yours: type a different number, or clear the box and the form will not wait at all.

Signing up and closing are both answers, and asking again the next morning is how a popup becomes the reason somebody leaves. The wait after a signup is the one that matters most — somebody who has just given you their address has already done the thing the form asks for.

Schedule is one of the groups behind Settings — the sprocket in the editor's toolbar — and it is a different question from who sees the form. A form that is live but outside its schedule is still live — it simply is not shown until its window comes round. Pausing is still yours, and still a separate act.

Start and End are a date and a time. Set a start of August 19, 9:00 am and the form appears at nine that morning; set an end of August 19, 5:00 pm and it goes quiet at five. Leave either one empty — it says No start or No end — and there is no bound on that side.

Only on these days is a row of seven. Every day is on unless you turn one off.

Only between these hours is a window in the day. An end time earlier than the start time runs overnight: 9:00 pm until 6:00 am belongs to the day it starts on — so if you have also chosen days, that window runs on Saturday night and into Sunday morning only when Saturday is one of the days you chose.

Every time here is your store's own clock, the one Shopify holds for your store, and the group names it under Start and End. It is never the visitor's: a 9-to-5 window is your shop's morning, not the morning of somebody reading in another country.

Like every other rule, this one waits for Publish and is kept in the version history with everything else.

Publish puts your working copy on your storefront. It is the only thing that changes what visitors see.

You can publish from either screen. There is a Publish button at the top of the editor, beside your form's name, and another on the form's own page. They do the same thing: whichever you press, the same check runs and the same version goes live.

In the editor it waits for your work to save first. The editor saves itself a second after you stop typing, so Publish is grayed for that second and says so — it comes back the moment your change is safely stored. It is also grayed when there is nothing new to publish, when a save was refused, and when something about the form still has to change; hover it or tab to it and it tells you which. Everything that has to change is listed under the preview at the same time.

After it goes, the editor says what visitors have — the moment it was published, and which version — in your store's own time zone.

Your working copy is allowed to be unfinished. A panel nothing leads to yet, a field whose label you have just emptied so you can type a placeholder instead, a question with no button to send it — all of that is saved and kept, because it is what the middle of a piece of work looks like. Nobody sees it: what your visitors get is the version you published, and it does not move until you publish again. Publishing is where the form has to be finished, and everything still to do is listed under the preview long before you press it.

Pause stops the form appearing straight away. Nothing is lost — Resume puts it back exactly as it was.

Publishing a paused form does not start it again. If you paused a form and then publish an edit, you are saying "when this runs again, this is what it shows". Resume it when you are ready.

Archive takes a form out of your way. Everything it collected stays on the people it collected it from.

Publishing a form is not the last step. Your theme has to be told to run Carpe Messaging forms at all, and that is a switch in Shopify's theme editor, not in this app. There is no way for an app to flip it for you — Shopify keeps that decision with you, which is the right place for it.

You only do this once per theme.

They all ride one switch, called an app embed.

That is it. Nothing is saved until you click Save, so leaving without saving changes nothing.

App embeds work on every kind of Shopify theme, old or new.

A form set to Embedded works differently: it does not float over your storefront, it sits inside a page where you put it. So instead of a switch, you add a block.

"Embedded form" is ours; "app embed" is Shopify's. An embedded form is a block you place inside a page. The app embed is the single theme switch that makes popups, corner cards, bars and full-screen panels appear at all. They are different things in different parts of the theme editor, and one does not turn the other on.

The block picks the form. You add the block where you want the form, and then, in that block's own settings, you choose which of your forms it shows. A block with nothing chosen shows nothing on your store — so a form appears where you put it and nowhere else.

An embedded form is as wide as the block it sits in, unless you give it a width of its own — leave Width on the Format pane blank and it fills the block, or type a number and it is never wider than that. The block has its own Limit the width and Alignment settings in the theme editor, and they still apply around it: the block's width is how much room the form is given, and the alignment decides which edge a narrower form keeps to.

In the form's editor, open Format and choose Embedded. One control stands under the Where it appears card: Place in your theme. Press it and it offers the places your theme actually has.

The pages you can choose are Home, Product, Collection, Page, Blog and Article.

Whichever you choose, Shopify's theme editor opens with the block already added and nothing saved.

You may not see all four. The menu is built from your own theme, so a place your theme does not have is not offered — that is deliberate, and it is the alternative to sending you to a theme editor that refuses. Two things decide it:

If the menu shows only two places and says to approve a permission, your store has not yet approved the permission that lets us read your theme. Open the app from your Shopify admin and approve the updated permissions, and the other places appear. Nothing is broken in the meantime — the footer and the end of a page work exactly as they always have.

And a place can be missing because we could not read your theme just now. The read happens when the screen loads and it can fail — a slow moment at Shopify's end is enough — and rather than guess we offer only the two places that need no reading at all. Reload the page and look again.

If there is no control at all, the screen says why — and there are three reasons. Read the line where the button would be:

Then pick the form. With the block selected in the theme editor, open its settings and choose your form from the Form menu. The menu lists your store's published embedded forms by the name you gave them, so name a form for where it goes — Footer signup, Blog capture — and it is easy to find. Click Save to finish. Closing the tab without saving changes nothing.

Only published forms are in the menu. You can only choose something that can actually be shown, so a form you have never published is not there. Publish it, then reload the theme editor.

How wide it is depends on where you put it. In your footer or below your header, the form takes the full width of that section group; at the top or end of a page, it takes the full width of the block it sits in. If you want it narrower wherever it lands, turn on Limit the width in the block's settings, set the Maximum width, and choose with Alignment whether it keeps to the left, the center or the right of the block. Where the block itself sits among the section's other blocks is the theme editor's job: drag it.

The form remembers where you sent it. The Where it appears card carries one line per place, showing the last time you sent the form there — Sent to your footer · Sep 11 — above what your storefront has actually reported. That note is your own history, not proof the form is showing: you still have to pick the form in the block and press Save, and if you closed the tab instead, the note stays and the card below it still says no block is showing this form. Both are true at once, and that pairing is usually the answer to "why is nothing on my store".

Archiving a form keeps its notes, and archiving does not take the block out of your theme — you remove the block in the theme editor when you want to. Nothing you can press in here removes the notes.

If you had an embedded form before this changed, pick it again. The block used to be pointed at a form by a word you typed in two places. It has a menu now, and a menu starts empty — so a block you set up earlier is showing nothing until you open it in the theme editor, choose the form, and save. Nothing about the form itself has changed, and you only do this once per block.

One trip adds one block. That is Shopify's rule, not ours — so if you want an embedded form on two pages, use Place in your theme twice, once for each, and pick the form in each.

The same form can go in more than one block. Pick it in your footer and at the end of your articles and it appears in both.

You cannot drag the block into a section that is already there. The theme editor only lets you move the whole new Apps section up or down. If you want the form inside an existing section, add the block in your theme by hand rather than from here.

Blocks only work on newer Shopify themes (the ones with drag-and-drop sections). If your theme does not offer them, use one of the other shapes instead.

How wide it is, is your theme's answer. An embedded form is as wide as the block it sits in. Put it in a footer column and it fills that column; put it in a full-width section and it fills the page. It never reaches past the block you gave it, so a layout you built stays the layout you built.

In the theme editor you see a dashed box. Before you have picked a form it says Pick a form; once you have, it names the form you chose with Your live form shows here underneath. It is there so you can see at a glance that the block landed where you meant it to; your real form replaces it a moment later, and nobody shopping your store ever sees it. Add the block, move it, or drag it somewhere else and the form follows — you do not have to reload the preview.

Where it appears. The Format pane tells you what your storefront has actually shown: Shown on your store, or the step that is still missing. There is nothing to choose here — you choose in the theme editor — so this is a fact rather than a setting. The places you sent the form to are listed above it, and they are a different kind of thing: what you did, not what your store reports.

It reads more than the sightings, because a block can only show a form the theme editor is offering it. Before you publish, the card says so and asks you to publish first: an unpublished form is not in the list yet, so there is nothing to pick. A paused form keeps its place in the list and shows nobody, so the card says that too rather than calling the block empty. And if your storefront has not rendered the block in a week — you changed themes, most likely — that is a third answer, not the same as never having set it up.

Underneath it, if your theme cannot see a form yet, this card says why. The most likely reason is that the app asked your store for a new permission and nobody has approved it yet: open the app from your Shopify admin and approve it. You do not have to publish the form again — we put it back in your theme's list by ourselves the next time you open the app.

We do not read your theme, and we never ask Shopify for permission to. Instead, your storefront tells us: every time one of your pages renders a Carpe Messaging form block, that block says hello.

On Content → Forms, the card is about the app embed, because that is what its button switches on:

Adding a block does not switch the embed on, so if you have only placed a block, this card stays until you switch the embed on as well — which is right, because until you do, popups, corner cards, bars and full-screen panels have nothing to appear through. The card says so in those words when it can see that your store is showing blocks: your forms are appearing, and the four floating shapes are the ones waiting on the switch.

On a form's own page the same card asks a narrower question: is the block this form needs actually running? A form set to Embedded is judged on that block, not on your store in general — and it is pointed at the block, not at the app embed, because the block is what is missing. A form that is running says so in one quiet line with the time we last heard from it.

Three things follow from this that are worth knowing.

A quiet store is not a broken one. If nobody visits your storefront for a week, we stop hearing from it, and the card comes back. Visit your own store and it goes away again.

A block your theme has never shown us before appears as soon as somebody loads the page it is on. After that we only write it down about once a minute per store, so the time beside "Running on your store" catches up within a minute rather than the instant a page loads.

We are told nothing about the person who loaded the page. What your storefront sends is which kind of block rendered and which form it is set to show — the same for every visitor on that page, and nothing else.

We will say so, and we will let you publish anyway. A note appears beside Publish: Your store has not shown this yet, with the link to fix it. A form set to Embedded whose block your theme has never reported gets the same note about the block. Either way it is a warning and never a refusal — you may well be turning the theme on next, or publishing today for a launch on Friday.

The note is about what you are about to publish, not about what is live now. If you take a form that is running happily and point it at a block your theme does not have, that note appears — which is the moment you want to hear it, rather than after the form has quietly stopped appearing.

A form fills blanks. It does not overwrite what you already know.

The reason is one sentence. A form can be filled in by anybody, about anybody — they type an address and press a button — so what a form is trusted to tell you is what you did not already know, and never something different about somebody you do. Consent is the one exception, and it is deliberate: the most recent thing a person said about hearing from you is the thing that counts, so typing their address into your form is treated as their answer, whatever was recorded before. Consent sets out where that stops.

Some email domains are set up to accept mail sent to anything at all — a made-up name at that company is answered exactly like a real person's address. Those are catch-all domains, and because the mail server says yes to everything, nobody outside that company can tell which mailboxes actually exist. Work addresses are the common case, so this is not a rare corner: a good share of the people who sign up with a business address are on one.

When somebody submits your form, their address is checked at that moment — see Verified identity. On a catch-all domain that check has nothing useful to say, so what happens next turns on one question: was this person actually on your store?

By default, somebody who browsed your store and then signed up is accepted, and you can email them straight away. Their pages loaded, your form appeared in front of them, they typed their address into it. That is a person, and their company's mail settings are not their doing.

It is recorded for what it is. The profile says it was accepted because the person browsed your store — not that a mailbox answered. Those are two different facts and the app never lets one stand in for the other, so a mailbox that really did answer still means exactly what it always meant.

Browsing means browsing. Pages of your store opening in somebody's browser, products being looked at, something going into a cart, your form appearing in front of them. A checkout on its own is not browsing — an address that turns up at checkout with no visit behind it is the shape automated traffic takes, and it is not accepted on this rule. Without a visit, the profile is not confirmed yet: their consent is recorded, they are thanked like everybody else, and no email you send reaches them until an order confirms them.

In Settings → Store, one switch, on when you start:

Turn it off and these signups are treated like any other address the check could not confirm — consent recorded, the person thanked, and not emailed until an order confirms them. The line under the switch changes with it, so what you read there always describes the store you are actually looking at. An owner or a manager can change it; a marketer and a viewer can read it.

The trade. Some email domains accept mail to any name@ (a catch-all), so a mailbox on them can’t be validated. With this setting on, someone who browses your store and signs up with a catch-all address is accepted, and you can email them; a few of those addresses may turn out not to exist, and an email to one may bounce. A bounced address is marked “Do not email” and is not emailed again.

Under the switch, the app keeps count for you:

The first number is what the rule won you: profiles you have that would otherwise be sitting unconfirmed. The second is what it cost: how many of those addresses turned out to be nobody.

Read them as a pair. While the second stays a small share of the first, the rule is doing the job it was put there for. If it ever grows into a real share, turn the switch off — the profiles you already have keep everything they have, and only new signups change.

Open a form from the index and you land on its own page. It answers one question: what is on your storefront right now, and what would change it.

On your storefront is the big half. It draws the version that is live, whole, at the size a visitor meets it, inside a light hint of where the form sits on a page — a bar against the top, a popup in the middle, a corner card in its corner — because with the page gone entirely a bar and a popup draw identically. On desktop / On mobile switches which screen it is arranged for. Under the drawing sit the short facts: which version, when you published it, where it shows, and how many signups your forms have taken.

When you click a version on the right, the drawing swaps to it and the line above says so — Showing Holiday 2025. This is not what visitors see. Show what is live puts it back. The page never draws one version while offering to publish another.

If your store has never shown a Carpe Messaging form, a line at the top says so and offers to turn it on. Nothing in this product reaches a visitor until that is on, so it is the loudest thing on the page until it is done.

You have changes nobody has seen appears underneath, and only when it is true. It says when you last edited and which version publishing would replace, and it carries everything you can do about that: Publish changes, Preview them — which points the drawing above at your working copy — and Discard changes since last publish. If anything is stopping the publish, the reasons are listed right there, beside the button they refuse. On a form you have never published the same card says Not on your storefront yet and carries the one Publish.

Pause, Resume, Clone and Archive live in the beside Edit form. They are the same four the index offers on every card, in the same words.

Every publish keeps the version it replaced, exactly as it was. Nothing is ever overwritten, so there is always a way back. The list on the right holds the versions you have published — your working copy is not one of them, because it has never been anywhere.

Click any version to see it in the drawing on the left. Each row carries a with everything you can do to that version.

A version starts out as a number. Give it a word instead — Holiday 2025, Everyday signup, The one that worked — and you will find it again in March. The name is yours: nobody visiting your store ever sees it, and naming a version changes nothing about what it shows.

Underneath the name there is room for a note — what you changed, or why you kept this one. Cut the second question — signups doubled. A name tells you which version this is; a note tells you what happened, which is the part nobody remembers three months later. It appears under the name in the list, and like the name it is yours alone: no visitor to your store ever sees it.

You can name and note any published version, and your working copy too — its name lives on its own card, under Name this version. Clearing the name brings the number back; clearing the note removes it.

They are different acts, and the difference is whether anything reaches your storefront.

Make this live puts that version back on your storefront, exactly as it was. Visitors see precisely what they saw then, nothing is rewritten, and your working copy is left alone — so whatever you were in the middle of is still there when you go back to it. It works on any version you have published, not just the last one: edit your form for a holiday, publish it, and when the holiday is over put the everyday one back in one click.

Edit from this version copies that version into your working copy so you can carry on from it — and publishes nothing. Your storefront does not change until you press Publish. This is the one to reach for when the form is paused, or has never been live, or when you have made a mess of the working copy and want to start again from something that worked. It replaces what is in your working copy now, so the app asks first.

You can only use either one on a version that was published once. A working copy was never shown to anybody, so there is nothing to go back to.

A form can ask for a telephone number beside the email address, or on a step after it. Phone number is in the Add list, under Fields, next to Email address. It takes the label and the placeholder you write, and whether it is required is yours to say — a form that asks for both usually wants one of them optional. One panel asks for a number once: a panel that already has the block is offered it grayed out, with the reason beside it.

A panel that asks for a number needs a consent sentence on that panel, the same way a panel asking for an address does, and it should be about text messages rather than email. The words are yours. The two-step starting point Email, then phone number ships one worth starting from.

Text messages have to be turned on first. Until they are, a form carrying a Phone number block will not publish. The editor says so under the preview, before you press Publish, and it names the panel and where the switch is.

The block is still offered while they are off, and that is deliberate: the evidence a carrier asks for when they approve your number is a published form asking for one, so you have to be able to build the form before you have the number. The switch is under Settings → Text messages.

Once a carrier has approved your own number, a telephone number on a form is confirmed before the sign-up finishes: we text a six-digit code, the form shows a box, and the person types it back on the same page. On an iPhone the code is usually offered above the keyboard; everywhere else it is six digits to type. Only then do they see the thank-you panel and get the discount code, if your form hands one out.

There is nothing to set up and nothing to switch off. Wherever your forms can show the code box, this is how a telephone number is collected, and it is what lets you text the people who give you one — a theme still drawing an older version of our form blocks collects the number without the code. There is more about it under Text messages.

Before your number is approved, the same form still collects numbers and still writes down that the person agreed — there is just no code, because there is no number to send one from. Those people show as Awaiting confirmation on their profile and are left out of every marketing text until they confirm.

A form can hand a discount code to whoever signs up through it. You say so in the form itself: add a Discount code block to a panel, open it, and choose what it gives away.

It goes on a panel people reach after signing up, never the first one. The first panel is where somebody is still deciding; a code there would be a code for nothing. So the entry panel will not take a Discount code block at all — not even one that names no discount, because somebody who adds one there is about to name one, and meeting that at publish is worse than meeting it now. The Add list will not let you, and says why:

It also refuses a button that is not a Sign up button leading to a panel that carries a discount block giving something away.

A form may give a different discount away on each thank-you panel, and one person only ever reaches one of them. If your form asks a question and sends one answer to one thank-you and another answer to another, each of those panels can carry its own block and its own discount. Whichever panel the person you are looking at actually arrived on is the one whose code they get. One panel, one discount: a panel that tried to give two away is refused.

A form with no discount block hands nothing out, and its thank-you panel says whatever you wrote on it. The app adds no sentence of its own.

Nobody has to copy it. The moment the code appears on the panel, it is already on that person's cart — the cart page shows the discount line, the totals come down, and there is nothing to paste at checkout. It stays there if they close the form, and it is remembered in their browser, so a code they read today still works when they come back tomorrow.

The code itself is not a link, and nothing about it is pressable. It is there to be read — and copied, if they want it for later. The way on into your store is a button, which looks like one.

A line under the code says so, in your own words. It reads Applied to your cart automatically. until you write something else in Words after the code is applied, on the block, just under Words before the date. It is one short sentence; leave the box empty and the standard one is used.

You choose the words. You do not choose when they appear. The line is drawn only after the cart has answered that it really has the code. If your store will not take it — it ended, it ran out, the cart does not meet its conditions — or if the cart cannot be reached at all, no line is drawn: not a blank space, no line at all, and nothing on the panel ever claims a discount that is not really there. The code stays on screen either way.

And a button can put them in your store with it. On a panel that gives a code away, Where it goes offers Your store, with the code applied, and a field for which page — leave it empty for your front page, or pick a collection to send them straight to the things the discount is for. It has to be a page of your own store. This is also the way out for somebody whose cart would not take the code: the button works whatever the cart said.

While you are building, the line is always on screen. The preview has no cart to check with, so it shows you the sentence you wrote — which is the only way to see what you are writing. On a real storefront it waits for the cart.

What the block asks, in order.

The first three are the Which discount and Each person gets cards; the last three are Discount details. The email editor's discount block asks the same questions in the same three cards, so a merchant who has set one up has set both up.

A unique code for each person. Each person gets a code made just for them. It works once, it can have its own expiry date, and when it is used you can see who used it.

The same shared code for everyone. Everyone gets CARPE15, the code you set up in Shopify. It expires when the discount does, and an order that uses it cannot be traced to any one person. The block names your own shared code where this page says CARPE15.

Unique codes are a setting on the discount, not on the form. If a discount does not give each person their own code, that option is closed here and the block says so: turn unique codes on from the discount itself — a marketer, manager or owner can do that — and then this form can give each person their own. The same holds the other way: a discount that mints per person cannot be handed out as one shared code.

Nothing you choose here takes effect until you publish the form. The block is part of your working copy, exactly like the words and the images beside it, so you can set an offer up on Tuesday and put it live on Friday. Taking the block out and publishing is how you stop giving it away — and codes already handed out keep working, because they are real codes at Shopify and nothing here withdraws one.

The two lines under the code. A thank-you panel can say more than the code itself. Discount details draws a line of terms under it: the Shopify default, exactly as it reads in your store, which is the answer most people want because it already matches what you set up there. Choose Your description to rewrite it, and it starts from that wording rather than from an empty box. Choose Do not show it and no line is drawn. Without a terms line, people write in to ask what the code is for.

Show the expiration date draws the day this person's own code stops working, in your store's clock, with the Words before the date you choose — "Use by" until you change it. Turning it off changes what the panel prints and nothing else: the code still stops working on the day Expires names. It is the person's own day, not the discount's: two people who sign up a week apart read two different dates off the same block.

You can style both lines together. The Details text card under the code's own Text card sets their size, weight, color and alignment — one setting for the pair, because they read as one piece of small print. They keep the code's typeface, and until you change anything they are drawn small, in the code's own color and alignment.

Both lines are drawn only when a code is actually handed over. If no code could be given, the panel shows the words you wrote for that case and nothing under them — terms below a sentence that is not a code would describe an offer nobody received.

"Expires: 3 days" counts from the moment a person receives the code. A code handed out on September 6 with a 3-day window works until the end of September 9 in your store's clock — for the person who signed up on the 6th, and for nobody else. It has nothing to do with the day you saved the form or the day you published it, and it is the same day the "Use by" line on their thank-you panel names.

If the discount itself ends sooner, the code ends with it. A 30-day window on a discount that closes on Friday gives everybody a code that stops working on Friday — the window can never outlive the discount it comes from.

Some things cannot be settled while you are typing and are refused at the publish, in a sentence naming what to change: a discount that has ended, one that is no longer in your store, a window that would outlive the discount, a code for each person with no deadline anywhere to be found, the shared code with no code chosen, and a code that is no longer on the discount. If two panels are both wrong you are told about both, and nothing is published until they are fixed. There is more about all of it under Discounts.

Anyone on your team except a viewer can create, edit and publish forms — and that includes saying what a form gives away, because the block only ever names a discount that already exists. A viewer can look.

The discount itself is made in Shopify, by somebody with a Shopify login that may manage discounts. And turning unique codes on for a discount is done from the discount, by a marketer, manager or owner.

Publishing a form is a different permission from sending a campaign, and that is deliberate: a form goes on your own storefront, comes off again in one click, and everybody it collects arrives by their own act. Sending email cannot be undone.