Contact Modal is a Shopify theme section in the Section Star library. Display a custom contact form on demand using our powerful modal.
About the Contact Modal 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.
Live demo
Use cases
- Customer Support: Allow customers to easily reach out for support or inquiries by adding a contact modal link to your FAQ or Help pages.
- 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.
- 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.
- Newsletter Sign-Up: Customize the modal to serve as a newsletter sign-up form. Promote special offers and updates by encouraging visitors to subscribe.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Target
Add the below string to any URL to launch the modal. Please keep the #.
| Setting |
Type |
Default |
| Target |
Text |
#contact-modal |
| Change browser url on launch |
Checkbox |
Off |
Font
Set the fonts for your section
| Setting |
Type |
Default |
| Override theme fonts |
Checkbox |
Off |
| Text Font |
Font |
sans-serif |
| Headline Font |
Font |
sans-serif |
Text
Set the text for your section
| Setting |
Type |
Default |
| Text Size |
Range |
15 |
| Text Line Height |
Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) |
inherit |
| Headline Size |
Range |
25 |
| Headline Line Height |
Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) |
inherit |
Colors
Set colors for the section.
| Setting |
Type |
Default |
| Background Color |
Color or gradient |
linear-gradient(164deg, #FFF 0%, #FFF… |
| Headline Color |
Color |
#111111 |
| Text Color |
Color |
#111111 |
| Form Label Color |
Color |
#111111 |
| Button Background Color |
Color or gradient |
linear-gradient(164deg, #111 0%, #333… |
| Button Text Color |
Color |
#fff |
| Divider Color |
Color |
#888 |
| Highlight Color |
Color |
#0D8BF4 |
| Success Background Color |
Color |
#00D815 |
| Error Background Color |
Color |
#D53005 |
Dimensions
Set the section dimensions in pixels.
| Setting |
Type |
Default |
| Padding Top |
Number |
25 |
| Padding Bottom |
Number |
25 |
| Padding Left |
Number |
10 |
| Padding Right |
Number |
10 |
Content
Set image and text for section
| Setting |
Type |
Default |
| Subject (shown only in email) |
Inline rich text |
— |
| Headline Location |
Select (Left, Right) |
left |
| Headline |
Inline rich text |
<b>Get in touch</b> |
| Content |
Inline rich text |
Use this form to get in touch. We usu… |
| Success Message |
Inline rich text |
Thank you for submitting the form! |
| Error Message |
Inline rich text |
There was an error submitting the form. |
| Button Text |
Text |
Submit |
Email block settings
| Setting |
Type |
Default |
| Label (required) |
Text |
Email |
| Required? |
Checkbox |
On |
| Hide Label? |
Checkbox |
Off |
| Placeholder |
Text |
— |
| Span Columns |
Checkbox |
Off |
Name block settings
| Setting |
Type |
Default |
| Label (required) |
Text |
Name |
| Required? |
Checkbox |
On |
| Hide Label? |
Checkbox |
Off |
| Placeholder |
Text |
— |
| Span Columns |
Checkbox |
Off |
Text block settings
| Setting |
Type |
Default |
| ID |
Text |
new-field |
| Label (required) |
Text |
Label |
| Required? |
Checkbox |
On |
| Hide Label? |
Checkbox |
Off |
| Placeholder |
Text |
— |
| Span Columns |
Checkbox |
Off |
Single Select block settings
| Setting |
Type |
Default |
| ID |
Text |
new-field |
| Label (required) |
Text |
Label |
| Hide Label? |
Checkbox |
Off |
| Options (separate by comma) |
Text |
— |
| Span Columns |
Checkbox |
Off |
Multiple Select block settings
| Setting |
Type |
Default |
| ID |
Text |
new-field |
| Label (required) |
Text |
Email |
| Hide Label? |
Checkbox |
Off |
| Options (separate by comma) |
Text |
— |
| Span Columns |
Checkbox |
Off |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Contact Modal”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.
