Installing the Contact Form Theme Block

Add a professional contact form to your Shopify store in minutes using the SupportRetriever theme app extension.

What is a Theme App Extension?

A theme app extension lets you add custom functionality to your Shopify store without editing theme code. The SupportRetriever Contact Form block can be placed on any page, giving customers an easy way to reach you.

Benefits

• No code required: Drag and drop the block into your theme
• Clean installation: No theme file editing needed
• Theme-safe: Survives theme updates and changes
• Mobile responsive: Works perfectly on all devices
• Professional appearance: Customizable to match your brand
• Clean storefront: SupportRetriever branding is automatically hidden when embedded in your Shopify store (compliant with Shopify's app branding policies)

Prerequisites

Before you begin:

• You need a Shopify store (any plan works)
• You must be logged into your Shopify admin
• You need a SupportRetriever account with a form created

Installation Methods

Method 1: One-Click Deep Link (Recommended)

The fastest way to install the Contact Form block is using the deep link from your SupportRetriever dashboard.

Step 1: Connect Your Shopify Store

1. Log into your SupportRetriever account
2. Go to Settings (⚙️ icon in the sidebar)
3. Scroll to the "Shopify Integration" section
4. Enter your shop URL: yourstore.myshopify.com
5. Click Connect Shopify
6. Authorize the connection when prompted

Step 2: Open Theme Editor with Deep Link

1. In the Shopify Integration section, you'll see an Open Theme Editor button
2. Click the button - it will open your Shopify Theme Editor
3. The Contact Form block will be ready to add

Step 3: Add the Block to Your Page

1. In the Theme Editor, you'll see the page editor
2. Click Add block or Add section where you want the form
3. Select Apps from the menu
4. Choose Contact Form (SupportRetriever)
5. The block will be added to your page

Step 4: Configure the Block

1. With the Contact Form block selected, look at the settings panel on the right
2. Form URL: Paste your SupportRetriever form URL
   • Get this from your SupportRetriever dashboard
   • Format: https://supportretriever.com/form/your-form-id
3. Form Height: Adjust the height (recommend 1000px for full forms)
4. Show Border: Toggle border visibility (optional)

Step 5: Save and Publish

1. Click Save in the top right of the Theme Editor
2. Click Publish to make the form live on your store
3. Visit your page to see the form in action!

Method 2: Manual Installation

If you prefer to add the block manually without the deep link:

Step 1: Access Your Theme Editor

1. Log into your Shopify admin
2. Go to Online Store → Themes
3. Click Customize on your live theme

Step 2: Navigate to Your Page

1. At the top of the Theme Editor, select the page where you want the form
2. Common choices:
   • Contact page (most common)
   • About page
   • Custom pages
   • Product pages (for product-specific inquiries)

Step 3: Add a New Section or Block

1. Click Add section (for a full-width form) or Add block (to add within an existing section)
2. Scroll to Apps
3. Select Contact Form (you'll see "SupportRetriever" or the extension name)

Step 4: Configure the Block Settings

Same as Method 1, Step 4 above - add your form URL and adjust settings.

Getting Your Form URL

To find your SupportRetriever form URL:

1. Log into SupportRetriever
2. Go to your Admin Dashboard
3. Click on Form Management (the form icon in the sidebar)
4. Your form URL is displayed at the top: https://supportretriever.com/form/[your-form-id]
5. Click the Copy button to copy it to your clipboard

See also: Getting your form URL for detailed instructions.

Common Placement Options

Contact Page (Most Popular)

1. Create or edit your Contact page
2. Remove default content (or keep your existing content above/below the form)
3. Add the Contact Form block
4. Save and publish

Product Pages

Add the form to specific products for product-specific inquiries:

1. Open the Theme Editor
2. Select Products → Default product
3. Add the Contact Form block to the product template
4. Configure settings

Multiple Pages

You can add the Contact Form block to multiple pages:

• Contact page for general inquiries
• About page for business inquiries
• Custom "Support" page for customer service
• Product pages for product questions

Each instance can use the same form URL or different form URLs (if you have multiple forms in SupportRetriever).

Customization Tips

Height Settings

The height setting determines how much space the form takes:

• 600px: Suitable if you have other content above/below
• 800px: Good balance for most forms
• 1000px: Shows the full form without scrolling (recommended)

The form will scroll within the iframe if the content is taller than the height setting.

Border Toggle

• Show Border: Adds a subtle border around the form (good for separation)
• No Border: Seamless integration with your page (more native appearance)

Mobile Responsiveness

The Contact Form block is automatically mobile-responsive:

• Form adjusts to screen width
• Fields stack vertically on mobile
• Touch-friendly input fields
• Optimized for iPhone and Android

Troubleshooting

"Form URL" field is empty or shows placeholder

Solution: You need to paste your SupportRetriever form URL into the settings. Copy it from your SupportRetriever dashboard.

Form doesn't appear or shows "Form not found"

Possible causes:

• Incorrect form URL (check for typos)
• Form doesn't exist or was deleted
• RLS permissions issue (contact support)

Solution: Double-check the URL, ensure it starts with https://supportretriever.com/form/

Form is cut off (too short or too tall)

Solution: Adjust the Form Height slider in the block settings. Increase to 1000px to show the full form.

Form appears but submissions don't work

Possible causes:

• Turnstile (bot protection) loading issue
• Email limits exceeded
• Browser blocking submission

Solution: Check your SupportRetriever dashboard for delivery issues. See Troubleshooting the theme extension

Form not loading or showing errors

Possible causes:

• Incorrect Form URL
• Turnstile (bot protection) loading issue
• Network connectivity issues

Solution: Double-check your Form URL in the block settings and ensure it matches exactly what's shown in your SupportRetriever dashboard. See Troubleshooting the theme extension for more details.

Best Practices

For Store Owners

• Use a dedicated Contact page: Creates a clear place for customer inquiries
• Set height to 1000px: Ensures full form is visible without scrolling
• Test on mobile: Preview the form on mobile devices before publishing
• Link from navigation: Add a "Contact" link to your main menu pointing to the page with the form

For Support Teams

• Monitor form submissions: Check SupportRetriever regularly for new messages
• Use saved replies: Set up common responses in SupportRetriever for faster replies
• Enable Shopify integration: Connect your Shopify store to see customer order data in conversations

For Multiple Stores

If you manage multiple Shopify stores:

• Use one SupportRetriever account for all stores
• Create separate forms for each store (optional)
• Use different recipient emails per store (optional)
• Add store name to form metadata for easy filtering

Next Steps

After installing the Contact Form:

1. Test it: Submit a test message to verify it works
2. Customize appearance: Adjust colors and branding in SupportRetriever settings
3. Set up team members: Add your support team to SupportRetriever
4. Create saved replies: Set up common responses for faster support

Related Topics

• Getting your form URL
• Customizing the theme block appearance
• Troubleshooting the theme extension
• Connecting Shopify integration