Shopify Contact Modal Section

Description of the Section

The Contact Modal section is designed to provide an interactive pop-up form for customers to get in touch with your store. When triggered, the modal displays a customizable form where visitors can enter their contact details and messages. The modal can be styled to match your store’s design, ensuring a seamless user experience. This section includes options to override store fonts, customize text sizes, select colors, and set various form elements.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Contact Modal"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Customer Support: Allow customers to easily reach out for support or inquiries by adding a contact modal link to your FAQ or Help pages.
2. Sales Inquiries: Embed the contact modal link on product pages to handle sales inquiries. Customers can quickly ask questions about products and receive personalized responses.
3. Feedback Collection: Use the contact modal to gather customer feedback about their shopping experience. Place the link on the order confirmation page to capture post-purchase feedback.
4. Newsletter Sign-Up: Customize the modal to serve as a newsletter sign-up form. Promote special offers and updates by encouraging visitors to subscribe.

Overview of the Configuration Settings

• Target Settings:

  • Target: Set a URL identifier (e.g., #contact-modal) to trigger the modal.

• Font Settings:

  • Override theme fonts: Option to use custom fonts instead of theme defaults.
  • Text Font: Choose from various fonts for the modal text.
  • Headline Font: Choose from various fonts for the modal headline.

• Text Settings:

  • Text Size: Adjust the size of the modal text.
  • Text Line Height: Set the line height for the modal text.
  • Headline Size: Adjust the size of the modal headline.
  • Headline Line Height: Set the line height for the modal headline.

• Color Settings:

  • Background Color: Choose a background color or gradient for the modal.
  • Headline Color: Set the headline text color.
  • Text Color: Set the text color.
  • Form Label Color: Set the color for form labels.
  • Button Background Color: Choose a background color or gradient for the submit button.
  • Button Text Color: Set the color for the button text.
  • Divider Color: Set a color for dividers within the modal.
  • Highlight Color: Choose a color for text and input highlights.
  • Success Background Color: Set the background color for success messages.
  • Error Background Color: Set the background color for error messages.

• Dimensions Settings:

  • Padding Top: Adjust top padding inside the modal.
  • Padding Bottom: Adjust bottom padding inside the modal.
  • Padding Left: Adjust left padding inside the modal.
  • Padding Right: Adjust right padding inside the modal.

• Content Settings:

  • Subject: Set a subject line for emails sent via the modal form.
  • Headline Location: Choose the headline alignment (left or right).
  • Headline: Customize the headline text for the modal.
  • Content: Set custom content text for the modal.
  • Success Message: Customize the message displayed after successful form submission.
  • Error Message: Customize the message displayed when there is an error submitting the form.
  • Button Text: Set the text for the submit button.

• Form Blocks:

  • Email: Add an email input field with customizable label, placeholder, visibility, and column span options.
  • Name: Add a name input field with customizable label, placeholder, visibility, and column span options.
  • Text: Add a text input field with customizable ID, label, placeholder, visibility, and column span options.
  • Single Select: Add a dropdown menu with customizable ID, label, options, visibility, and column span options.
  • Multiple Select: Add a list of checkboxes with customizable ID, label, options, visibility, and column span options.