Embed a Custom Form on Shopify in 2 Easy Steps

Want to improve customer engagement or gather valuable insights for your Shopify store?

Adding custom forms can help you achieve those goals efficiently!

In this guide, we’ll show you how to create a custom page in Shopify to embed a Klaviyo form, including step-by-step instructions for adding HTML and CSS to enhance the form’s appearance.

Step 1: Create a Page in Shopify

First, create a new page in Shopify where you will host the form.

Step 2: Edit the HTML to Add the Embed Code

Once the page is created, switch to HTML view by clicking the ‘Show HTML’ icon and paste the Klaviyo embed code directly into the desired location.

Pro Tip: Place the embed code where you want the form to appear for pages with pre-existing content, ensuring it integrates smoothly with the rest of the page.

Save your page and preview.

Step 3 (Optional): Add Custom HTML for Additional Content

You can add custom HTML and CSS to enhance the page with extra content and styling. This allows you to create a more customized layout with sections for additional information alongside the form.

Below is the HTML and CSS code we used:

<div class="signup-container">
  <div class="signup-section">
    <div class="left-column">
      <h1>{{ page.title }}</h1>
      <p>Sign up to receive exclusive deals and promotions directly to your inbox!</p>
    </div>
    <div class="right-column">
      <div class="klaviyo-form-XXXXXX"></div>
    </div>
  </div>
</div>

<style>
  .signup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
  }

  .signup-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
  }

  .left-column {
    flex: 1 1 40%;
    max-width: 40%;
  }

  .right-column {
    flex: 1 1 55%;
    max-width: 55%;
  }

  @media (max-width: 768px) {
    .signup-container {
      padding: 25px;
    }
    .signup-section {
      gap: 25px;
    }
    .left-column,
    .right-column {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }
</style>

Final Words

With these easy steps, you can quickly create a custom page in Shopify to embed your Klaviyo form.

Start by adding the basic form embed, or take it to the next level by customizing the page layout with extra HTML and CSS for a polished look.

If you need assistance with Shopify customization or creating custom forms, contact Giant for expert support!