Popup, form and spin-to-win sections for Shopify

Contact and sign-up forms, popups, drawers, sticky bars and prize games. Every form submits to Shopify itself, never to a third-party server.

Most form and email-capture apps send what shoppers type through their own servers. Panely’s form sections don’t. Every form posts to your store’s own Shopify contact form, the one your theme’s contact page uses, so submissions reach you through Shopify and Panely never sees them. You choose exactly which fields to ask for, and you can add a consent note under the form.

Choose how the form appears: in the page, a screen at a time, in a popup opened by a button, in a drawer that slides in from the edge, or in a bar pinned to the top or bottom of the screen. Spin to win and the scratch card make the sign-up a small game, with the prize drawn in the shopper’s browser from the weights you set.

Inline form

In page

A form in the page. Define exactly which fields you want.

4 designs: Stacked, Two column, Inline, Boxed. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 61

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Gap between fields Slider, 4–40px phone & desktop
  • Input padding Slider, 4–28px phone & desktop
Submit button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Form fields
  • Form fields A list of fields (up to 24): Label, Name attribute, Type, Placeholder, Dropdown options (separate with |), Required, Width
Form
  • Where the form posts Text
  • Consent note Text
Submit button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Field style
  • Field label font Google Font and weight phone & desktop
  • Field label size Slider, 10–96px phone & desktop
  • Field label color Colour phone & desktop
  • Field label line height Slider, 0.9–2.4 phone & desktop
  • Field label letter spacing Slider, -3–8px phone & desktop
  • Field label alignment Design default · Left · Center · Right phone & desktop
  • Input text font Google Font and weight phone & desktop
  • Input text size Slider, 10–96px phone & desktop
  • Input text color Colour phone & desktop
  • Input text line height Slider, 0.9–2.4 phone & desktop
  • Input text letter spacing Slider, -3–8px phone & desktop
  • Input background Colour phone & desktop
  • Input border color Colour phone & desktop
  • Input corner radius Slider, 0–24px phone & desktop
  • Input text alignment Design default · Left · Center · Right phone & desktop
  • Consent note font Google Font and weight phone & desktop
  • Consent note size Slider, 10–96px phone & desktop
  • Consent note color Colour phone & desktop
  • Consent note line height Slider, 0.9–2.4 phone & desktop
  • Consent note letter spacing Slider, -3–8px phone & desktop
  • Consent note alignment Design default · Left · Center · Right phone & desktop
Submit button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Submit button alignment Design default · Left · Center · Right phone & desktop

Multi step form

In page

The same fields asked a screen at a time, with back and forward controls.

4 designs: Steps, Numbered, Progress, Minimal. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 68

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Gap between fields Slider, 4–40px phone & desktop
  • Input padding Slider, 4–28px phone & desktop
Submit button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Steps
  • Steps A list of steps (up to 8): Step title, Fields (one per line: "Label | name | type")
Form
  • Where the form posts Text
  • Next button label Text
  • Back button label Text
Submit button
  • Button label Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Field style
  • Field label font Google Font and weight phone & desktop
  • Field label size Slider, 10–96px phone & desktop
  • Field label color Colour phone & desktop
  • Field label line height Slider, 0.9–2.4 phone & desktop
  • Field label letter spacing Slider, -3–8px phone & desktop
  • Field label alignment Design default · Left · Center · Right phone & desktop
  • Input text font Google Font and weight phone & desktop
  • Input text size Slider, 10–96px phone & desktop
  • Input text color Colour phone & desktop
  • Input text line height Slider, 0.9–2.4 phone & desktop
  • Input text letter spacing Slider, -3–8px phone & desktop
  • Input background Colour phone & desktop
  • Input border color Colour phone & desktop
  • Input corner radius Slider, 0–24px phone & desktop
  • Input text alignment Design default · Left · Center · Right phone & desktop
Submit button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Submit button alignment Design default · Left · Center · Right phone & desktop
Step style
  • Step title font Google Font and weight phone & desktop
  • Step title size Slider, 10–96px phone & desktop
  • Step title color Colour phone & desktop
  • Step title line height Slider, 0.9–2.4 phone & desktop
  • Step title letter spacing Slider, -3–8px phone & desktop
  • Step title alignment Design default · Left · Center · Right phone & desktop
  • Step counter font Google Font and weight phone & desktop
  • Step counter size Slider, 10–96px phone & desktop
  • Step counter color Colour phone & desktop
  • Step counter line height Slider, 0.9–2.4 phone & desktop
  • Step counter letter spacing Slider, -3–8px phone & desktop
  • Step counter alignment Design default · Left · Center · Right phone & desktop
  • Progress colour Colour phone & desktop

Slide in drawer

Overlay

A panel that slides in from the edge — size guides, care notes, anything that would crowd the page.

4 designs: Right, Left, Bottom sheet, Wide. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 55

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Drawer width Slider, 260–800px phone & desktop
Trigger button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop
Layout
  • Padding Slider, 12–72px phone & desktop

Content

Trigger button
  • Button label Text
Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Drawer
  • Body Text, several lines
  • Rows A list of rows (up to 30): Label, Value

Style

Section
  • Backdrop color Colour phone & desktop
Trigger button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Trigger button alignment Design default · Left · Center · Right phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Drawer style
  • Drawer background Colour phone & desktop
  • Drawer background image Image phone & desktop
  • Body font Google Font and weight phone & desktop
  • Body size Slider, 10–96px phone & desktop
  • Body color Colour phone & desktop
  • Body line height Slider, 0.9–2.4 phone & desktop
  • Body letter spacing Slider, -3–8px phone & desktop
  • Body alignment Design default · Left · Center · Right phone & desktop
  • Row label font Google Font and weight phone & desktop
  • Row label size Slider, 10–96px phone & desktop
  • Row label color Colour phone & desktop
  • Row label line height Slider, 0.9–2.4 phone & desktop
  • Row label letter spacing Slider, -3–8px phone & desktop
  • Row label alignment Design default · Left · Center · Right phone & desktop
  • Row value font Google Font and weight phone & desktop
  • Row value size Slider, 10–96px phone & desktop
  • Row value color Colour phone & desktop
  • Row value line height Slider, 0.9–2.4 phone & desktop
  • Row value letter spacing Slider, -3–8px phone & desktop
  • Row value alignment Design default · Left · Center · Right phone & desktop
  • Row divider Colour phone & desktop

Spin to win

Overlay

A prize wheel that spins to a weighted winner and reveals its discount code.

3 designs: Wheel, Wheel with prize list, Wheel beside the text. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 68

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Layout
  • Ask for an email first On / off
  • Wheel size Slider, 160–520px phone & desktop
  • Gap between fields Slider, 4–40px
  • Input padding Slider, 4–28px phone & desktop
Spin button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Prizes
  • Prizes A list of prizes (up to 12): Prize, Discount code, How often it comes up, Segment colour
Layout
  • Email placeholder Text
  • Terms Text
Spin button
  • Button label Text
  • Button link Link

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Field style
  • Field label font Google Font and weight
  • Field label size Slider, 10–96px
  • Field label color Colour
  • Field label line height Slider, 0.9–2.4
  • Field label letter spacing Slider, -3–8px
  • Input text font Google Font and weight phone & desktop
  • Input text size Slider, 10–96px phone & desktop
  • Input text color Colour phone & desktop
  • Input text line height Slider, 0.9–2.4 phone & desktop
  • Input text letter spacing Slider, -3–8px phone & desktop
  • Input background Colour phone & desktop
  • Input border color Colour phone & desktop
  • Input corner radius Slider, 0–24px phone & desktop
  • Input text alignment Design default · Left · Center · Right phone & desktop
Spin button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Spin button alignment Design default · Left · Center · Right phone & desktop
Prize style
  • Prize label font Google Font and weight phone & desktop
  • Prize label size Slider, 10–96px phone & desktop
  • Prize label color Colour phone & desktop
  • Prize label line height Slider, 0.9–2.4 phone & desktop
  • Prize label letter spacing Slider, -3–8px phone & desktop
  • Prize label alignment Design default · Left · Center · Right phone & desktop
  • Terms font Google Font and weight phone & desktop
  • Terms size Slider, 10–96px phone & desktop
  • Terms color Colour phone & desktop
  • Terms line height Slider, 0.9–2.4 phone & desktop
  • Terms letter spacing Slider, -3–8px phone & desktop
  • Terms alignment Design default · Left · Center · Right phone & desktop

Scratch card

Overlay

A covered prize card: one weighted draw, revealed when a shopper scratches it.

3 designs: Card, Ticket, Panel. Pick one in the app, then fine-tune it with the settings below.

Settings you can change 75

Grouped as they appear in the Panely editor. Settings marked phone & desktop can take a different value on phones.

Layout

Section
  • Padding top Slider, 0–200px phone & desktop
  • Padding bottom Slider, 0–200px phone & desktop
  • Max width Slider, 480–1600px phone & desktop
Card
  • Show what can be won On / off
  • Card width Slider, 200–600px phone & desktop
  • Card height Slider, 80–400px phone & desktop
Layout
  • Ask for an email first On / off
  • Input padding Slider, 4–28px phone & desktop
Reveal button
  • Button padding (vertical) Slider, 4–32px phone & desktop
  • Button padding (horizontal) Slider, 8–72px phone & desktop

Content

Heading
  • Kicker Text
  • Heading Text
  • Intro text Text, several lines
Prizes
  • Prizes A list of prizes (up to 12): Prize, Discount code, How often it comes up, Dot colour
Card
  • Cover text Text
  • Text before the draw Text Hidden under the cover until a shopper reveals it.
Layout
  • Email placeholder Text
  • Terms Text
Reveal button
  • Button label Text

Style

Section
  • Background color Colour phone & desktop
  • Background image Image phone & desktop
Heading
  • Kicker font Google Font and weight phone & desktop
  • Kicker size Slider, 10–96px phone & desktop
  • Kicker color Colour phone & desktop
  • Kicker line height Slider, 0.9–2.4 phone & desktop
  • Kicker letter spacing Slider, -3–8px phone & desktop
  • Kicker alignment Design default · Left · Center · Right phone & desktop
  • Heading font Google Font and weight phone & desktop
  • Heading size Slider, 10–96px phone & desktop
  • Heading color Colour phone & desktop
  • Heading line height Slider, 0.9–2.4 phone & desktop
  • Heading letter spacing Slider, -3–8px phone & desktop
  • Heading alignment Design default · Left · Center · Right phone & desktop
  • Intro text font Google Font and weight phone & desktop
  • Intro text size Slider, 10–96px phone & desktop
  • Intro text color Colour phone & desktop
  • Intro text line height Slider, 0.9–2.4 phone & desktop
  • Intro text letter spacing Slider, -3–8px phone & desktop
  • Intro text alignment Design default · Left · Center · Right phone & desktop
Card
  • Card corner radius Slider, 0–40px phone & desktop
  • Card background Colour phone & desktop
  • Cover colour Colour phone & desktop
  • Cover text colour Colour phone & desktop
Field style
  • Input text font Google Font and weight phone & desktop
  • Input text size Slider, 10–96px phone & desktop
  • Input text color Colour phone & desktop
  • Input text line height Slider, 0.9–2.4 phone & desktop
  • Input text letter spacing Slider, -3–8px phone & desktop
  • Input background Colour phone & desktop
  • Input border color Colour phone & desktop
  • Input corner radius Slider, 0–24px phone & desktop
  • Input text alignment Design default · Left · Center · Right phone & desktop
Reveal button
  • Button text size Slider, 11–28px phone & desktop
  • Button background Colour phone & desktop
  • Button text color Colour phone & desktop
  • Button corner radius Slider, 0–40px phone & desktop
  • Reveal button alignment Design default · Left · Center · Right phone & desktop
Prize style
  • Prize font Google Font and weight phone & desktop
  • Prize size Slider, 10–96px phone & desktop
  • Prize color Colour phone & desktop
  • Prize line height Slider, 0.9–2.4 phone & desktop
  • Prize letter spacing Slider, -3–8px phone & desktop
  • Prize alignment Design default · Left · Center · Right phone & desktop
  • Prize list font Google Font and weight phone & desktop
  • Prize list size Slider, 10–96px phone & desktop
  • Prize list color Colour phone & desktop
  • Prize list line height Slider, 0.9–2.4 phone & desktop
  • Prize list letter spacing Slider, -3–8px phone & desktop
  • Prize list alignment Design default · Left · Center · Right phone & desktop
  • Terms font Google Font and weight phone & desktop
  • Terms size Slider, 10–96px phone & desktop
  • Terms color Colour phone & desktop
  • Terms line height Slider, 0.9–2.4 phone & desktop
  • Terms letter spacing Slider, -3–8px phone & desktop
  • Terms alignment Design default · Left · Center · Right phone & desktop

How to add a Panely section to your Shopify store

  1. Install Panely from the Shopify App Store. It works with Online Store 2.0 themes, and your theme files are never edited.
  2. Pick a section and press Add. Choose a design, and change the settings in the editor with a live preview beside them. You get a short section code.
  3. Place it once. In the theme editor, add the Panely block where you want the section, and paste the code into its Section code field.
  4. Edit any time. Change the section in Panely and save. Your store shows the change on its next page load, with nothing to paste again.

Each Add is its own copy with its own settings, so you can use the same section on as many pages as you like. Panely must stay installed for its sections to show. If you uninstall, they disappear, and your theme is left exactly as it was.

Questions about forms & capture sections

Where do form submissions go?

To your store’s Shopify contact form, exactly like your theme’s own contact page. Panely never receives or stores what shoppers type.

Will the popup interrupt shoppers when the page loads?

No. Panely’s popup opens only when a shopper presses its button. If you want something always visible, use the sticky bar instead.

How does spin to win pick a prize?

You list the prizes, each with a discount code and a weight. The wheel draws a winner by those weights in the shopper’s browser and reveals the code. Create the discount codes in Shopify first, so the code the shopper sees works at checkout.

Add these sections to your store

Install Panely from the Shopify App Store, pick a section and place it in your theme in a couple of minutes. A free plan is available.