Create Google Forms Popups directly on your Shopify Store!

FormPopper & Typeform

There are 3 steps to creating your Typeform popup in FormPopper:

  1. Initial Setup: Create your Typeform form, install FormPopper
  2. Copy your Typeform link
  3. Create your widget
    1. Option 1 - Use an Autowidget
    2. Option 2 - Create a Sitewide Widget
    3. Option 3 - Manually embed a Widget

1. Initial setup

  1. Create your Typeform form: Head over to Typeform, signup if you haven't already and create a form! (See Get started with Typeform if you need help getting started).
  2. Install FormPopper and start your 2 week free trial: Visit the FormPopper App Store page, click add App, then follow the prompts to install & start free trial.

2. Copy your Tyepform link

  1. Open Typeform Editor: Open your Typeform Dashboard and click on the form you would like to add.
  2. Make sure your Typeform is published: Click the "Publish" button (top right hand corner) if it doesn't already state "Published".
  3. Click the "Share" button (top centre of page).
  4. Finally, copy the provided link

3 - Create your Popup Widget

Option 1 - Use the FormPopper's Autowidget feature

If you add a normal Typeform link manually to your Shopify website*, and have FormPopper installed, it will automatically turn it into a popup link. For example, if you were to:

  1. Perform steps 1 and 2 above: install FormPopper, create a Typeform form and copy it's link
  2. Create a normal Typeform link on your Shopify store: For example, using the link you just copied in step 2 above, you could create a link in your main menu using Shopify's instructions here.

Now when a visitor goes to your page, waits for it to finish loading, and clicks the link - A popup will appear!

*Most locations supported, however checkout pages NOT support

Option 2 - Create a Sitewide Widget in FormPopper

  1. Perform steps 1 and 2 above: Install FormPopper, create a Typeform form and copy it's link.
  2. Open the FormPopper Dashboard: From your Shopify Dashboard, click "Apps" in the main menu, find FormPopper, and click on it.
  3. Create a new Widget: On the FormPopper homepage, find the "Add new widget" section. Paste in your Typeform link and click add widget. After a moment, the new widget should appear below.
  4. Enable the Widget Sitewide: Click on the widget you just created to be taken to the widget details page. Click "Enable Sitewide" and the sitewide button will be created!
  5. Adjust Sitewide Widget Settings (Optional): Click "edit sitewide settings" to be taken to the settings page. Adjust to your preferred text, colour and button location and click update settings.

Option 3 - Create an Embedded Link / Button

Please Note: To create an advanced link, you need to be able to paste the full widget code - for most users this will be possible in pages, product descriptions and blog posts. Experienced developers may also feel comfortable pasting directly into the theme code.

If you want advanced features, like hiding the link until the popup is ready, or using a button style instead of a link, then an advanced link is the way to go:

  1. Perform steps 1 and 2 above: Install FormPopper, create a Typeform form and copy it's link.
  2. Open the FormPopper Dashboard: From your Shopify Dashboard, click "Apps" in the main menu, find FormPopper, and click on it.
  3. Create a new Widget: On the FormPopper homepage, find the "Add new widget" section. Paste in your Typeform link and click add widget. After a moment, the new widget should appear below.
  4. Copy the Widget code: Click on the widget you just created to be taken to the widget details page. Find "Manually embedded widget" (at the bottom of the page) and click on it. Choose your preferred style, text, and copy the widget embed code.
  5. Paste the Widget code at the location of your choice: For example, To paste in a page or blog post:
    1. Open your page / blog post
    2. Switch text editor to "HTML view": This is done by clicking the "<>" icon).
    3. Paste your popup link in your preferred location.
    4. Save your changes to the page.