Embed guide
Add a form to Shopify
Add a hootform form to a Shopify store with a Custom Liquid section: in the page, as a popup or slider from a button, or full page.
What works on Shopify
| Way to show a form | On Shopify |
|---|---|
| In the page | ✓ |
| Popup | ✓ |
| Slider | ✓ |
| Full page | ✓ |
Where the snippet goes
Shopify's theme editor takes custom HTML through a Custom Liquid section in themes that support sections everywhere.
- In Shopify admin, open Online Store, then Themes, and choose Customize.
- Open the page where the form should go, add a section, and choose Custom Liquid.
- Paste the snippet from your form's Share menu, on the Embed tab, then save.
For a popup or slider on every page, add the section to a layout area shown on every page, such as the footer group, with the button and the script together.
Useful on a store
- A product quiz, such as the product recommendation quiz, can end by sending shoppers straight to the product that fits, since an ending's redirect moves the whole page.
- Add
data-hootform-forward-queryso your campaign'sutm_parameters are stored with each response.
The snippets
Replace FORM_ID with your form's id, or copy the finished version from the
form's Share menu, on the Embed tab.
In the page
<div data-hootform="FORM_ID"></div>
<script src="https://hootform.com/embed.js" async></script>Popup
<button type="button" data-hootform="FORM_ID" data-hootform-mode="popup">Open form</button>
<script src="https://hootform.com/embed.js" async></script>Slider
<button type="button" data-hootform="FORM_ID" data-hootform-mode="slider">Open form</button>
<script src="https://hootform.com/embed.js" async></script>Full page
<div data-hootform="FORM_ID" data-hootform-mode="fullpage"></div>
<script src="https://hootform.com/embed.js" async></script>Questions people ask
Can a quiz send shoppers to a product page?
Yes. Give each result its own ending with a redirect to the product's page. Embedded with the script, the redirect moves the shopper's whole page, not just the frame.
Does my theme need to support Custom Liquid?
Most current Shopify themes do. In older themes, paste the snippet into a page's HTML view instead.
Can the form take payment?
No. hootform doesn't take payments. Send shoppers to your own product or checkout page from the form's ending.