Embedding your Magic Form into your Shopify website is easy! Below are step by step instructions on how to complete this implementation.
Add a Custom Liquid Section to your Shopify Site
The first thing you'll need to do is add a section onto your Shopify site for the Magic Form.
To edit your Shopify site, go to Online Store > Themes. You should see a list of your Shopify sites. Click the Customize button on the one you want to add Magic Forms to.
Next, add a new Custom Liquid section to your site. This is how where we're going to add the Magic Form Code.
Grab the Magic Form code
You can grab the Magic Form embed code from the Magic Form Sidebar. First click on the Magic Form Block in your Loop.
Next, click Start Setup.
Copy the code by clicking Copy Code.
Add Magic Form Code to Shopify Site
Now that you have the Magic Form code, go back to the Shopify site editor.
Go back to the Custom Liquid section you previously created. Paste the Magic Form code in the Liquid Code input field in the right sidebar.
Click Save to commit your changes to your site.
Adjusting the width of Custom Liquid Section
By default, Custom Liquid sections in Shopify will stretch to the full width of the page. If you'd like to reduce the width of the Magic Form, you can do so by adding and adjusting the padding value.
Verify Magic Form implementation
The final step is to complete setup is to verify the implementation. Click the "I've added this code into my website" button to complete verification.
If successful, you will see a green checkmark and the URL of your Shopify website.
