How to Add a Flodesk Form to Your Website

Flodesk has taken the creative community by storm with their email campaign platform proving to be the perfect mix of design capabilities and backend sequence building.

While this post isn’t meant to get into the deep dive details on the amazing features of the platform (there may be a post coming up later on that!), I can say I’ve switched from straddling MailChimp & Convertkit, and could not possibly be happier!

I know so many of you have the made switch as well and I wanted to hop in and make that process just a little easier for you, especially with adding those beautiful custom forms to your website.

Embedding the forms means diving into code – which can be a bit scary if you’ve never done it! So, today I’m breaking down exactly how to embed them on your website with step-by-step written instructions AND screenshare videos so you can get them up and on your website and bringing you leads!

And as a special bonus, if you’re still on the free trial of Flodesk, grab 50% your plan with code KRISTENFULCHI to bring you down to $19 a month!

How to Embed a Flodesk form on Your Shopify Homepage

  1. Login to Flodesk
  2. Create your “ribbon banner” form
  3. After completing your form, on the “embed” section, click the first “copy code” button
  4. Login to Shopify
  5. Click “online store”
  6. Click the “actions” dropdown
  7. Click “edit code”
  8. Click “theme.liquid”
  9. Find line that says “</head>”
  10. Paste the copied code right above that line
  11. Click “save”
  12. Go back to Flodesk
  13. Click the second “copy code” button
  14. Go back to Shopify
  15. Click “online store”
  16. Click “customize”
  17. Scroll to the bottom on the left hand side and click “add a section”
  18. Scroll to the bottom and click “custom content”
  19. Click “add”
  20. Remove the additional content (image and welcome) by clicking on them and then clicking “remove content”
  21. Click “add content”
  22. Click “custom html”
  23. Paste in the copied code
  24. Click “save”
  25. If the width is at 50%, click 50% and change it to 100%
  26. Click “save:
  27. Click the “<” arrow at the top left hand corner of the page
  28. Click and drag custom content to where you want it on your homepage
  29. Click “save”
  30. Congrats! You’ve got your newsletter sign up for on your website!

How to Link a Flodesk form to Your Shopify Announcement Bar

  1. Login to Flodesk
  2. Create your “full page with image” form
  3. After completing your form, on the “publish” section, click the two squares to copy the link to your clipboard
  4. Login to Shopify
  5. Click “apps”
  6. Click “visit the shopify app store”
  7. Search for “quick announcement bar”
  8. Click the app
  9. Click “add app”
  10. Follow the steps to add it to your store and return to the apps section in your Shopify store
  11. Click on the Quick Announcement Bar app
  12. Click “create new bar”
  13. Click a basic template on the left to get started (these are all free!)
  14. Begin customizing your announcement bar
  15. Paste the copied link under “link url”
  16. Check off “open the link in a NEW tab when clicked”
  17. Finish customizing your form and decide where you want it to show on your site
  18. Click “save” at the bottom
  19. Congrats! You’ve got your newsletter sign up for on your website!

Ready to upgrade your free trial of Flodesk to a paid plan? Grab 50% off with code KRISTENFULCHI or just click here!

Tags: Shopify Web