Ctrlk
Install themeContact support
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Contact Form & Newsletter

Add a contact page with a two-column contact form, and grow your mailing list with a full-width newsletter signup banner in the Avante Shopify theme.

Both of these sections exist to get something back from a visitor — a question, or an email address. Contact Form is where you send people who need help, and it doubles as the page that proves there are humans behind the store. Newsletter is the quieter one: a single field over an editorial image that builds the list you'll sell to next season.

Pick the one that fits your goal:

  • Contact Form — a two-column contact page: the form on one side, your address, opening hours, and social profiles on the other.

  • Newsletter — a full-width image banner with an email signup on top of it.

Both are template sections, so they're added to a page, not to the header or footer areas. For settings shared across most sections (width, color scheme, content position, paddings), see Common section settings. For image dimensions, see Image & video size recommendations.

Contact Form

The contact page is where hesitant shoppers go before they buy and where unhappy ones go after — so it's worth more than a bare input field. This section splits the page in two: Shopify's contact form on one side, and on the other, whatever reassures people that a message won't disappear — your address, hours, a phone number, social profiles, a line about how fast you reply.

In the Theme Editor this section is listed as Contact form, and everything in the left-hand column is a block — adding the section preloads Subheading, Heading, Text, and Contact info. See Overview for how sections and blocks work in general.

sparkles

Good to know

  • The blocks are the second column. The form always takes one half of the section; the blocks build the other half. Swap form position flips which side the form sits on. Add no blocks at all and the text column disappears entirely — the form is centered and capped to a narrow measure, which is the layout the editor hint means by "Centered if no blocks are added." So an empty block list is a deliberate design, not a broken one.

  • There is no recipient field — Shopify decides where messages land. This is Shopify's standard contact form, so submissions go to the store contact email configured in your Shopify admin settings, not to anything typed in the Theme Editor. If messages aren't arriving, that setting is the first thing to check.

  • Only Email is compulsory. Show phone number and Show message remove those two fields altogether if you don't want them, and name and email stay. Fewer fields, more replies — but strip the message box only if you genuinely don't need context.

  • The checkbox needs text to appear. Enable checkbox on its own isn't enough: the Text field has to be filled too. Make it required then blocks the form until it's ticked, and the ticked value arrives in your notification email as its own line. As Shopify notes in the editor itself, adding a checkbox does not by itself make a store GDPR compliant.

  • Placeholders are empty out of the box. Each field shows only its label until you fill in Name, Email, Phone number, or Message placeholder. Use them for format hints — a phone number pattern, or "Order number, if you have one" — and you'll cut a round of follow-up emails.

  • Two separate width controls. Show content container draws the card behind the form; Narrow content width pulls the whole section into a tighter measure, which suits a dedicated contact page where a full-bleed layout just looks empty.

  • Curly brackets switch the font. Wrap a word of the Heading in {curly brackets} to render it in the Secondary heading font — Get {in touch}. See Typography.

Best practices

  • Ask for as little as you can live with. Every extra field costs you messages — turn Show phone number off unless someone will actually call back.

  • Fill the second column with real contact details. The Contact info block holds two items (email, phone, or address) plus a line of text, and the Social media block pulls your profiles straight from Theme settings. People who won't fill in a form still need a way to reach you.

  • Send yourself a test submission after launch, and again any time the store's contact email changes. A silently misrouted contact form is the most expensive thing on the page.

  • Set expectations in a Text block — response time, working hours, what to include. It turns "did you get my message?" follow-ups into patience.

  • Keep Heading tag at H2. The page title is already the H1, and a second one muddies the outline.

  • Don't put a Newsletter section directly under the contact form. Two forms in one screen and people fill in neither.

Newsletter

One field, one image, one promise. This section is the list-building workhorse: a full-width photo with an email input over it, sized anywhere from a modest strip to a full-screen moment. It converts because it asks for the smallest possible thing at a point where someone already likes what they're looking at.

In the Theme Editor this section is listed as Newsletter, and the input itself is a block: Newsletter form, one per section. Adding the section preloads Heading, Text, and Newsletter form.

sparkles

Good to know

  • A signup creates a customer, tagged newsletter. The section posts to Shopify's customer form and attaches the newsletter tag automatically, so subscribers appear under Customers in your admin and can be segmented — or synced to Klaviyo, Mailchimp, or Shopify Email — by that tag.

  • The button label and the success message aren't section settings. The Newsletter form block has no field for either: Subscribe and Thanks for subscribing come from the theme's language file. Change them in Edit default theme content, not in the section.

  • Height mode decides what drives the banner's height. Percents ties it to the viewport — a 70% banner fills 70% of the screen. Pixels fixes it regardless of screen size. Adapt to image lets the uploaded image's own proportions set the height. Desktop and mobile keep their own value in every mode.

  • Two images, two shapes. The desktop Image wants landscape (3:2) or wide (16:9); the Mobile → Image wants portrait (4:5) or square (1:1). Leave mobile empty and the desktop file is reused — and a wide crop rarely survives a phone screen with its subject intact.

  • Fill content container off means no card. With it on, the text and form sit on a padded, colored card; with it off, they sit straight on the photo. Cleaner — but only if Image overlay opacity is giving you enough contrast to read the label. Separately, Fill the entire section paints the chosen color across the whole section strip, paddings included, instead of just behind the content.

  • On mobile you can stop overlaying altogether. Show content under image turns the photo into a block of its own height and stacks the heading, text, and form beneath it. It's the right call whenever the mobile photo is busy enough that the overlay is eating it.

  • This section also carries Promo code and Countdown timer blocks. Handy for a timed incentive next to the input — "10% off your first order, ends Sunday." The Countdown timer runs on your store's primary timezone and is capped at a 99-day range.

  • Curly brackets switch the font. Wrap a word of a Heading block in {curly brackets} to render it in the Secondary heading font — Join the {list}. See Typography.

Best practices

  • Make a promise, not a request. Use the Caption in the Newsletter form block, or a Text block, to say what subscribers get and how often — "first look at new drops, twice a month" beats "sign up for our newsletter" every time.

  • Judge contrast on the real photo at full size, not on the editor thumbnail. If the label is hard to read, raise Image overlay opacity before you start recoloring text.

  • Compress the image before uploading. This is usually the heaviest file on the page, and it sits between the shopper and everything below it.

  • Position the content against the photo, not by taste. Vertical and Horizontal content position exist so the form lands on empty space rather than across someone's face.

  • Keep Center text and Horizontal content position in agreement — centered text pushed to the left edge reads as a mistake.

  • Give it room. Percents at 60–70% is a banner; at 100% it's a full-screen interruption, and that's a decision, not a default.

Related

Last updated

Was this helpful?