Skip to content
Qivra Help Center

Add Form via Theme Editor

The Theme Editor is the easiest way to add forms to your Shopify store. This guide walks you through adding forms using Shopify’s built-in customization interface.

What is Theme Editor?

Section titled “What is Theme Editor?”

Theme Editor (also called “Customize”) is Shopify’s visual editor that lets you modify your store’s appearance without coding. Qivra Form Builder integrates seamlessly as an App Block that you can add anywhere.

Prerequisites

Section titled “Prerequisites”

Before adding a form to Theme Editor:

  1. Create your form in Qivra Form Builder
  2. Save the form - unsaved forms won’t appear in Theme Editor
  3. Enable the form - make sure the form status is “Enabled”

Opening Theme Editor

Section titled “Opening Theme Editor”

Method 1: From Shopify Admin

Section titled “Method 1: From Shopify Admin”
  1. Go to Online Store > Themes
  2. Find your active theme
  3. Click Customize

Method 2: From Form Builder

Section titled “Method 2: From Form Builder”

Some themes allow direct access:

  1. Open your form in Form Builder
  2. Look for “View on Store” or “Open in Theme Editor” link

Adding the Form Block

Section titled “Adding the Form Block”

Step 1: Navigate to Target Page

Section titled “Step 1: Navigate to Target Page”

In Theme Editor, navigate to where you want the form:

Page TypeHow to Navigate
HomepageDefault landing page
Product pageSelect a product from the dropdown
Collection pageSelect a collection
Cart pageSelect “Cart” from pages
Custom pageSelect from your created pages

Step 2: Add a Section or Block

Section titled “Step 2: Add a Section or Block”

Option A: Add to existing section

  1. Click on an existing section
  2. Click Add block
  3. Look under Apps section

Option B: Add new section

  1. Click Add section
  2. Scroll to Apps category
  3. Find Qivra Form Builder

Step 3: Select Qivra Form Builder

Section titled “Step 3: Select Qivra Form Builder”
  1. Click on Qivra Form Builder block
  2. The block is added to your page

Step 4: Choose Your Form

Section titled “Step 4: Choose Your Form”
  1. In the block settings panel (right side)
  2. Find the Form dropdown
  3. Select the form you want to display

Block Settings

Section titled “Block Settings”

After selecting your form, configure additional settings:

Layout Settings

Section titled “Layout Settings”
SettingDescription
Max WidthMaximum width of the form container
AlignmentLeft, center, or right alignment
PaddingSpace around the form

Visibility Settings

Section titled “Visibility Settings”
SettingOptions
Show on DesktopYes/No
Show on MobileYes/No

Advanced Settings

Section titled “Advanced Settings”
SettingDescription
Custom CSS ClassAdd custom class for styling
Custom IDAdd ID for anchor links

Positioning the Form

Section titled “Positioning the Form”

Within a Section

Section titled “Within a Section”
  1. Click and drag the form block to reorder
  2. Move above or below other blocks
  3. Adjust section layout settings

Full Page Form

Section titled “Full Page Form”

For a form that takes the entire page:

  1. Remove other sections/blocks
  2. Set form block to full width
  3. Adjust padding as needed

Previewing Changes

Section titled “Previewing Changes”

In Theme Editor

Section titled “In Theme Editor”
  • Form shows a preview in the editor
  • Click Preview button for full view
  • Test on desktop and mobile views

Testing Submission

Section titled “Testing Submission”

Note: Form submissions work in preview mode and will create real submissions.

  1. Fill out the form
  2. Click submit
  3. Check your submissions in the app

Saving and Publishing

Section titled “Saving and Publishing”

Save as Draft

Section titled “Save as Draft”
  1. Click Save (not Publish)
  2. Changes are saved but not visible to customers
  3. Useful for testing

Publish Changes

Section titled “Publish Changes”
  1. Click Save to publish immediately
  2. Form is now live on your store
  3. Customers can see and submit the form

Multiple Forms on One Page

Section titled “Multiple Forms on One Page”

You can add multiple forms to a single page:

  1. Add the first form block
  2. Click Add block again
  3. Add another Qivra Form Builder block
  4. Select a different form

Use Cases:

  • Contact form + Newsletter signup
  • Product inquiry + Review form
  • Different forms for different sections

Removing a Form

Section titled “Removing a Form”

To remove a form from Theme Editor:

  1. Click on the form block
  2. Click the Remove or Delete button
  3. Confirm removal
  4. Save changes

Theme Compatibility

Section titled “Theme Compatibility”

Supported Themes

Section titled “Supported Themes”

Qivra Form Builder works with:

  • All Shopify Online Store 2.0 themes
  • Most popular third-party themes
  • Custom themes with App Block support

Troubleshooting Theme Issues

Section titled “Troubleshooting Theme Issues”

Form block not appearing:

  1. Make sure you’re using an OS 2.0 compatible theme
  2. Check if app is properly installed
  3. Try refreshing the Theme Editor

Form looks different than preview:

  1. Theme CSS may override styles
  2. Check for conflicting styles
  3. Use custom CSS to adjust

Best Practices

Section titled “Best Practices”

Placement Tips

Section titled “Placement Tips”
PageRecommended Placement
HomepageBelow hero, above footer
Product pageBelow product details, in tabs
Contact pageMain content area
Cart pageBelow cart items

User Experience

Section titled “User Experience”
  • Don’t place forms above important content
  • Ensure forms are easily accessible
  • Test on mobile devices
  • Keep forms visible without scrolling (when possible)

Video Tutorial

Section titled “Video Tutorial”
Play
Section titled “Related Docs”