Customizing the Theme Block Appearance

Learn how to customize the SupportRetriever Contact Form theme block to match your Shopify store's design.

Available Customization Options

The Contact Form theme block offers several settings you can adjust directly in the Shopify Theme Editor:

Block Settings (Shopify Side)

• Form URL: The link to your SupportRetriever form
• Form Height: Height of the form container (400px - 1000px)
• Show Border: Toggle border visibility around the form

Form Settings (SupportRetriever Side)

Additional customization happens in your SupportRetriever dashboard:

• Form title and description
• Background color
• Button color
• Text color
• Logo/branding
• Field labels and placeholders

Customizing in Shopify Theme Editor

Accessing Block Settings

1. Log into your Shopify admin
2. Go to Online Store → Themes → Customize
3. Navigate to the page with your Contact Form block
4. Click on the Contact Form block to select it
5. Settings appear in the right panel

Form Height Settings

The height slider determines how much vertical space the form occupies on your page.

Recommended Heights by Use Case

Height	Best For	Notes
400px	Compact placement	Only shows top of form; requires scrolling
600px	Balanced layout	Shows most form fields; minimal scrolling
800px	Standard placement	Shows all fields comfortably
1000px	Full form display	Shows entire form without scrolling (recommended)

How Height Works

• The form iframe is set to the specified height
• If form content is taller, users scroll within the iframe
• If form content is shorter, extra space appears below
• Mobile devices automatically adjust

Best practice: Start with 1000px to show the full form, then adjust if needed.

Border Settings

The border toggle adds a subtle outline around the form:

Show Border (checked):

• Adds a 1px light gray border
• 8px rounded corners
• Visually separates form from page content
• Good for pages with similar background colors

No Border (unchecked):

• Form blends seamlessly into page
• More integrated appearance
• Good when form background matches page

Customizing in SupportRetriever Dashboard

For deeper customization, adjust settings in your SupportRetriever account:

Form Colors

1. Log into SupportRetriever
2. Go to Form Management (form icon in sidebar)
3. Scroll to "Form Appearance"
4. Customize colors:

Background Color

The background color behind the form:

Tip: Match this to your Shopify page background for seamless integration.

Button Color

The color of the submit button:

Tip: Use your brand's primary color or Shopify theme's button color.

Text Color

The color of form text (labels, descriptions):

Tip: Ensure good contrast with background color for readability.

Logo & Branding

Add your store's logo to the form:

1. In Form Management, find "Logo URL"
2. Enter the URL of your logo image
3. Logo appears at the top of the form
4. Recommended size: 200px wide × 60px tall (max)

Getting your logo URL:

• Upload logo to Shopify: Settings → Files → Upload
• Copy the URL
• Paste into SupportRetriever logo field

Form Title & Description

Customize the text that appears above the form:

Title examples:

• "Contact Us"
• "Get in Touch"
• "Send Us a Message"
• "Customer Support"

Description examples:

• "We'd love to hear from you."
• "Have a question? We're here to help!"
• "Fill out the form and we'll get back to you within 24 hours."

Field Labels & Placeholders

Customize field labels and placeholder text:

Name field:

• Label: "Your Name", "Full Name", "Name"
• Placeholder: "John Doe", "Enter your name"

Email field:

• Label: "Email Address", "Your Email", "Email"
• Placeholder: "you@example.com", "Enter your email"

Message field:

• Label: "Message", "Your Message", "How can we help?"
• Placeholder: "Tell us what's on your mind...", "Describe your inquiry"

Placement & Layout Tips

Full-Width Placement

For a prominent form that spans the full page width:

1. Add the Contact Form block to a full-width section
2. Remove other content from that section
3. Set height to 1000px
4. Disable border for seamless integration

Best for: Dedicated contact pages

Inline Placement

For a form alongside other content:

1. Add the Contact Form block within a multi-column section
2. Place content in adjacent columns
3. Adjust height to match surrounding content
4. Enable border to separate from adjacent content

Best for: About pages, product pages

Above/Below Content

For a form with introductory text:

1. Add a text section above the form
2. Include heading and description
3. Add Contact Form block below
4. Set appropriate height

Example structure:

[Text Section]
  Heading: "Contact Our Team"
  Description: "We're here to help with any questions."

[Contact Form Block]
  Height: 1000px
  Border: No

Mobile Responsiveness

The Contact Form automatically adapts to mobile devices:

Desktop (> 768px)

• Full width within container
• All fields visible
• Comfortable spacing

Tablet (768px - 1024px)

• Slightly condensed layout
• Fields remain horizontal where possible
• Touch-friendly targets

Mobile (< 768px)

• Stacked layout
• Full-width fields
• Larger touch targets
• Optimized keyboard experience

Testing: Always preview your form on mobile devices before publishing.

Mobile-Specific Tips

• Height: Mobile users are used to scrolling; 600-800px works well
• Border: Consider removing border on mobile for more screen space
• Placement: Full-width placement works best on mobile

Advanced Customization

CSS Customization (Advanced Users)

The form iframe has limited CSS customization from outside. However, you can:

1. Adjust the iframe container in Shopify theme
2. Add padding/margin around the block
3. Customize the section background

Note: You cannot customize CSS inside the form itself (it's in an iframe for security).

Multiple Forms

If you need different appearances for different pages:

1. Create multiple forms in SupportRetriever (Pro plan)
2. Customize each form differently
3. Use different form URLs in different theme blocks

Example use cases:

• Sales form with green button
• Support form with blue button
• General contact with purple button

Matching Your Theme

To make the form blend with your Shopify theme:

1. Background: Match your page background color
2. Button: Match your theme's primary button color
3. Text: Match your theme's text color
4. Border: Disable if your page has minimal borders
5. Logo: Use your store's logo

Testing Your Customization

Before publishing:

1. Preview in Theme Editor: Check desktop view
2. Test on mobile: Use Theme Editor mobile preview
3. Submit test message: Verify everything works
4. Check multiple browsers: Safari, Chrome, Firefox
5. Verify colors: Ensure good contrast and readability

Common Customization Scenarios

Scenario 1: Minimalist Contact Page

Goal: Clean, simple form that blends into page

Settings:

• background: var(--color-bg-primary);(#ffffff)
• Button: Black (#000000)
• Text: Dark gray (#4a4a6a)
• Border: No
• Height: 1000px
• Logo: None (or small logo)

Scenario 2: Branded Product Support

Goal: Prominent form with strong brand colors

Settings:

• Background: Brand light color
• Button: Brand primary color
• Text: Brand dark color
• Border: Yes
• Height: 800px
• Logo: Brand logo

Scenario 3: Inline Contact Section

Goal: Form alongside text content

Settings:

• Background: Match page background
• Button: Theme button color
• Text: Theme text color
• Border: Yes (to separate from text)
• Height: 600px
• Logo: None

Troubleshooting Appearance Issues

Form looks cut off

Solution: Increase the Form Height in Shopify Theme Editor settings.

Colors don't match my theme

Solution: Update colors in SupportRetriever Form Management, not in Shopify.

Border is too prominent

Solution: Disable "Show Border" in Shopify Theme Editor settings.

Logo is too large

Solution: Resize your logo image to 200px × 60px or smaller before uploading.

Form doesn't fit on mobile

Solution: The form is automatically responsive. Check that your Shopify theme section is set to full-width on mobile.

Best Practices

1. Keep it simple: Don't over-customize; clean designs work best
2. Match your brand: Use your store's colors and fonts
3. Test thoroughly: Check on multiple devices before publishing
4. Consider accessibility: Ensure good color contrast for readability
5. Update consistently: If you rebrand, update the form to match

Related Topics

• Installing the Contact Form theme block
• Getting your form URL
• Customizing form appearance
• Troubleshooting the theme extension