Embedding Forms

NexusForm supports multiple ways to embed forms in your Shopify storefront. Choose the method that best fits your theme and use case.

Method 1 — App Block (recommended)

Works with any Online Store 2.0 theme. This is the easiest approach and requires no code.

1. Open the NexusForm dashboard and go to your form.
2. Click Embed → App Block.
3. Click Go to Theme Editor — the Shopify customizer opens.
4. Navigate to the page or template where you want the form.
5. Click Add block in a section, then select NexusForm.
6. Use the block settings to select which form to display.
7. Click Save.

Supported locations

You can place the app block on:

• Product pages
• Collection pages
• Custom pages
• The homepage
• Blog post templates

Method 2 — Shopify Pages (embed code)

If you want to add a form to a standard Shopify page without the theme editor:

1. In the NexusForm dashboard, open your form and click Embed.
2. Select Embed Code and copy the snippet.
3. In Shopify admin, go to Online Store → Pages.
4. Create or edit a page and switch the editor to HTML mode (<> button).
5. Paste the embed code.
6. Save the page.

The embed code looks like this:

<div id="nexusform-embed" data-form-id="YOUR_FORM_ID"></div>
<script src="https://cdn.nexusform.app/embed.js" defer></script>

Method 3 — Liquid (advanced)

For full control over placement and styling, you can use Liquid in your theme files:

1. In the NexusForm dashboard, copy the Form ID from the form settings.
2. In Shopify admin, go to Online Store → Themes → Edit code.
3. Open the template or section where you want the form.
4. Add the embed snippet:

<div id="nexusform-embed" data-form-id="{{ 'YOUR_FORM_ID' }}"></div>
{{ 'https://cdn.nexusform.app/embed.js' | script_tag }}

Caution

Editing theme Liquid files directly can break your store if done incorrectly. Make a backup of your theme before making changes.

Styling the embedded form

NexusForm’s embed inherits your theme’s base font and color scheme automatically. If you need to adjust styles:

• Use the Theme Editor block settings (Method 1) to toggle borders, padding, and button styles.
• For finer control, add CSS in your theme’s custom.css or via the Additional CSS field in the Shopify theme customizer.

Troubleshooting

Issue	Solution
Form doesn’t appear	Make sure the app embed is enabled: Theme Editor → App embeds → NexusForm toggle on.
Form shows on wrong page	Check that the app block is in the correct template in the theme editor.
Styling looks off	Clear your browser cache. If using a vintage theme, try the embed code method instead.

For more help, see the FAQ.