Troubleshooting the Shopify Theme Extension

Common issues and solutions when using the SupportRetriever Contact Form theme block in Shopify.

Common Issues

Issue 1: Form Block Not Appearing in Theme Editor

Symptoms:

• Can't find "Contact Form" under Apps when adding blocks
• SupportRetriever doesn't appear in app list
• Theme Editor doesn't show the block option

Possible Causes:

1. App not installed on Shopify store
2. Theme doesn't support app blocks (very old themes)
3. Browser cache issue
4. Incorrect section type

Solutions:

Solution 1: Verify App Installation

1. Go to Shopify Admin → Apps
2. Check if SupportRetriever is in your installed apps
3. If not, install the app from Shopify App Store
4. Refresh the Theme Editor

Solution 2: Check Theme Compatibility

1. Ensure you're using a Shopify 2.0 theme (most themes from 2021+)
2. Try adding the block to different section types:
   • Page templates
   • Product templates
   • Custom sections
3. If your theme is very old, consider updating to a newer theme

Solution 3: Clear Browser Cache

1. Clear your browser cache and cookies
2. Log out of Shopify admin
3. Log back in and try again
4. Try a different browser or incognito mode

Solution 4: Use the Deep Link

1. Log into SupportRetriever
2. Go to Settings → Shopify Integration
3. Click "Open Theme Editor" button
4. This automatically navigates to the correct location

---

Issue 2: Form Shows Blank or "Form Not Found"

Symptoms:

• Form block is added but shows blank white space
• "Form not found" error message appears
• 404 error inside the iframe

Possible Causes:

1. Form URL not configured
2. Incorrect form URL (typo)
3. Form was deleted in SupportRetriever
4. RLS (Row Level Security) blocking access

Solutions:

Solution 1: Add Form URL

1. Click on the Contact Form block in Theme Editor
2. Look at settings panel on the right
3. Paste your form URL in the "Form URL" field
4. Get URL from: SupportRetriever → Form Management

Solution 2: Verify Form URL

1. Copy your form URL from SupportRetriever
2. Paste it into a new browser tab
3. Verify the form loads correctly
4. If it doesn't load, the URL is incorrect
5. Expected format: https://supportretriever.com/form/[id]

Solution 3: Check Form Still Exists

1. Log into SupportRetriever
2. Go to Form Management
3. Verify your form is listed
4. If not, you may have deleted it
5. Create a new form and update the URL

Solution 4: RLS Issues (Rare)

If the form loads directly but not in Shopify:

1. Contact SupportRetriever support
2. Provide your form ID
3. Support can check RLS permissions

---

Issue 3: Form is Cut Off (Too Short)

Symptoms:

• Only top portion of form is visible
• Submit button not visible
• Need to scroll within a small area

Cause: Form height setting is too low

Solution:

1. Click on the Contact Form block in Theme Editor
2. Find the "Form Height" slider in settings
3. Drag to increase height (recommend 1000px)
4. Save and check preview

Recommended heights:

• Minimum: 600px
• Comfortable: 800px
• Full form: 1000px

---

Issue 4: Cannot Submit Test Messages

Symptoms:

• Submit button appears inactive
• Messages not going through
• No confirmation after clicking submit

Possible causes:

• Network connectivity issue
• Incorrect form configuration
• Rate limiting (too many test submissions)

Solution:

1. Check your internet connection
2. Verify the Form URL in block settings is correct
3. Wait a few minutes if you've sent multiple test messages (rate limiting)
4. Check your SupportRetriever dashboard to confirm the form is active

To test the form:

1. Open your form URL directly in a new tab
2. Submit a test message
3. Verify it appears in your SupportRetriever inbox

---

Issue 5: Form Submissions Not Working on Live Site

Symptoms:

• Form appears correctly
• Submit button is enabled
• But nothing happens when clicking submit
• Or error message appears

Possible Causes:

1. Turnstile (bot protection) not loading
2. Email limit exceeded
3. Browser blocking submission
4. Form recipient email not verified

Solutions:

Solution 1: Wait for Turnstile

The form includes bot protection that takes a moment to load:

1. Wait 3-5 seconds after page loads
2. Look for a small checkmark or indicator
3. Then submit the form

Solution 2: Check Email Limits

1. Log into SupportRetriever
2. Go to Settings → Account
3. Check your email usage
4. If at limit, upgrade plan or wait for reset

Solution 3: Disable Browser Extensions

Some browser extensions block form submissions:

1. Try in incognito/private mode
2. Disable ad blockers temporarily
3. Check browser console for errors (F12)

Solution 4: Verify Recipient Email

1. Go to SupportRetriever → Settings
2. Check "Recipient Email" field
3. Ensure email is verified (check inbox for verification email)
4. Re-send verification if needed

---

Issue 6: "Powered by SupportRetriever" Footer Not Appearing

Symptoms:

• The form works correctly but doesn't show the "Powered by SupportRetriever" footer

This is Normal:

The SupportRetriever branding footer is automatically hidden when the form is embedded in Shopify stores. The form detects when it's displayed in a Shopify storefront iframe and hides the branding to comply with Shopify's app branding policies.

Where branding appears:

• ✅ When form is accessed directly (not in iframe)
• ✅ When embedded on non-Shopify websites
• ❌ When embedded in Shopify storefronts (hidden automatically via referrer detection)

How it works: The form checks if it's in an iframe and if the parent page is on a .myshopify.com or shopify.com domain. If so, branding is hidden.

No action needed - this is the expected behavior.

---

Issue 7: Form Appears But Has Styling Issues

Symptoms:

• Form colors don't match
• Layout looks broken
• Text is unreadable
• Logo doesn't appear

Possible Causes:

1. Form not customized in SupportRetriever
2. Color contrast issues
3. Logo URL incorrect
4. Browser compatibility

Solutions:

Solution 1: Customize in SupportRetriever

Form appearance is controlled in SupportRetriever, not Shopify:

1. Log into SupportRetriever
2. Go to Form Management
3. Scroll to "Form Appearance"
4. Set background color, button color, text color
5. Add logo URL if desired
6. Save changes

Solution 2: Check Color Contrast

Ensure text is readable:

• Dark text on light background
• Or light text on dark background
• Test with accessibility tools

Solution 3: Fix Logo

If logo doesn't appear:

1. Verify logo URL is correct
2. Ensure logo image is publicly accessible
3. Recommended size: 200px × 60px
4. Use PNG or JPG format

---

Issue 8: Form Works on Desktop But Not Mobile

Symptoms:

• Form displays and works on desktop
• Broken or not visible on mobile devices
• Layout issues on small screens

Possible Causes:

1. Shopify theme section not responsive
2. Height too small on mobile
3. Theme-specific mobile issues

Solutions:

Solution 1: Check Theme Settings

1. Ensure the section containing the form is set to full-width on mobile
2. Check Theme Editor mobile preview
3. Verify no conflicting mobile settings

Solution 2: Adjust Height for Mobile

The form is responsive, but ensure adequate height:

1. On mobile, 600-800px usually works well
2. Test in Theme Editor's mobile preview
3. Adjust if needed

Solution 3: Test on Real Devices

1. Publish changes
2. Visit live site on actual mobile device
3. Test submission
4. Check multiple devices if possible

---

Issue 9: Form Loads Slowly

Symptoms:

• Blank space where form should be
• Form appears after several seconds
• Customers may not wait for it to load

Possible Causes:

1. Network latency
2. Heavy page with many elements
3. Slow Shopify theme
4. Browser extensions

Solutions:

Solution 1: Optimize Page

1. Remove unnecessary apps/scripts from page
2. Optimize images on page
3. Use a faster theme if possible

Solution 2: Add Loading Indicator

Consider adding a loading message above the form block in your page content:

• "Loading contact form..."
• This sets expectations for customers

Solution 3: Test Network Speed

1. Test on different internet connections
2. Check if issue is consistent
3. If slow for everyone, contact SupportRetriever support

---

Issue 10: Can't Edit or Remove Form Block

Symptoms:

• Block appears in Theme Editor but can't be selected
• Can't delete the block
• Settings don't appear

Solutions:

Solution 1: Refresh Theme Editor

1. Save changes
2. Exit Theme Editor
3. Return to Themes page
4. Click Customize again

Solution 2: Edit from Section Level

1. Click the section containing the form
2. Use section controls to manage blocks
3. Delete or rearrange from section view

Solution 3: Clear Browser Cache

1. Clear cache and cookies
2. Restart browser
3. Try again

---

Issue 11: Form URL Changes Unexpectedly

Symptoms:

• Form was working, now shows "Form not found"
• URL in settings looks different than expected

Cause: Form was deleted and recreated, generating a new URL

Solution:

Prevention:

• Don't delete forms unnecessarily
• Update settings instead of recreating

Fix:

1. Log into SupportRetriever
2. Get current form URL from Form Management
3. Update URL in all Shopify theme blocks
4. Save and publish

---

Diagnostic Checklist

Use this checklist to systematically troubleshoot issues:

• Form URL is pasted in block settings
• Form URL is correct (test in browser directly)
• Form exists in SupportRetriever account
• Form height is set to at least 800px
• Recipient email is verified in SupportRetriever
• Not at email usage limit
• Tested in different browser
• Tested with browser extensions disabled
• Theme Editor changes are saved and published
• Tested on live site (not just Theme Editor)

Getting Additional Help

If you've tried the solutions above and still have issues:

Check SupportRetriever Status

1. Visit [SupportRetriever Status Page]
2. Check for any service outages
3. Review recent incidents

Contact Support

Provide this information when contacting support:

• Issue description: What's happening vs. what should happen
• Form URL: Your specific form URL
• Shopify store URL: Your store's .myshopify.com address
• Steps taken: What troubleshooting you've already tried
• Browser/device: What you're using to test
• Screenshots: Show the issue (if visual)

Shopify Support

For Shopify-specific issues (theme, Theme Editor):

1. Contact Shopify Support
2. Mention you're using a theme app extension
3. Provide app name: SupportRetriever

Community Resources

• SupportRetriever documentation
• Shopify Theme App Extension documentation
• Shopify Community forums

Prevention Best Practices

Avoid common issues by following these practices:

1. Don't delete forms: Update settings instead
2. Test before publishing: Use Theme Editor preview
3. Keep URLs handy: Save form URL in secure location
4. Monitor email limits: Check usage regularly
5. Update gradually: Test changes before going live
6. Document setup: Keep notes on your configuration
7. Regular testing: Submit test messages periodically

Related Topics

• Installing the Contact Form theme block
• Getting your form URL
• Customizing the theme block appearance
• Form not receiving submissions
• Email delivery problems