The Contact form section allows your store to easily connect with customers, gather feedback, and build trust. Adding a contact form not only improves customer support but also helps increase conversions by better understanding customer needs.
In this guide, you'll learn how to customize the Contact form section to match your brand and business goals.
You can access a Contact form section by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Contact Form.
You can configure some general options for the Contact Form section below:
Color scheme: Allows you to select a color theme for the video section
Section padding
Top padding: Sets the space between the top of the video section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the video section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels) on mobile devices.
To add a Custom field block, click the Add block button (plus icon ➕) under the Contact Form section > In the Blocks tab, select Custom field.
You can configure some general options for the Custom field block below:
Label: The title or name shown for this input field. This is the label that customers will see on the form.
Type: You can choose the type for input field. Options included
+ Text: Allows you to enter freeform text.
+ Phone number: Lets you create a specifically field for phone number input.
+ Options: Lets you create a set of selectable choices (dropdown or radio buttons).
Required: Toggles whether this field is mandatory. When enabled, users must fill out this field to submit the form.
Text
Only applicable for input of type Text.
Text type: You can choose the display type for the text.
+ Short: A compact input field (suitable for name, email, etc.).
+ Long: A larger input field (used for comments, messages, etc.).
Maximum number of characters: Limits how many characters the user can type in this field.
Options
Only applicable for input of type options.
Option type: You can choose the display type for the option.
+ Drop-down select: Displays a dropdown list of options for the user to choose from.
+ Radio buttons: Displays all available options at once with circular selection buttons. The user simply needs to click on one item from the list.
Options: The list of selectable items. Each option must be placed on a separate line.
You can configure some general options for the Section header below:
Use custom maximun width: Use can enabled/disabled this option to use custom maximum width. When this option enabled, allows you to set a custom maximum width for the section header in pixels. When disabled, the content will use the default width defined by the theme.
Maximum width: When “Use custom maximum width” is enabled, you can use the slider or type a number (e.g., 400 px) to limit the width of the section header content.
Alignment: This option controls the horizontal alignment of Section header. Options included like Left, Center, Right align.
You can edit a Heading block using the following options:
Heading: This box is where you input the main headline. It’s the most prominent text in the slide/banner. You can format the text using bold, italic, link icon, text alignment etc..
Heading size: Sets the size of the heading, H0 > H1 > H2 > H3 > H4 > H5 > H6 (H0 is the largest)
Heading tag: Sets the HTML tag of the heading, which does affect SEO. Ex: use H1 for the main headline of a page (each page should only have one H1).
Uppercase: Toggle this on to automatically convert the heading to ALL UPPERCASE letters. When off, the heading appears as typed.
You can edit a Text block using the following options:
Text: This is where you enter the main message or headline that appears on the slide. You can format the text using bold, italic, link icon, text alignment etc...
Color: Choose between the primary or secondary color styles defined by your theme for the text.
Size: Choose the font size for your text. Options typically include like small, medium, large, extra large, double extra large, four extra large, six extra large.
Hide on the mobile: When enabled, this text will not appear on mobile devices. This can help simplify the mobile layout if space is limited.
You can edit a Subtext block using the following options:
Text: Enter the subtext that appears above the main heading on the slide. This is usually used for a short label or category.
Font: There are two font styles you can choose from: body and heading.
Size: Choose the size of the subtext from small or medium
Color: Select the text color
+ Primary: Uses the theme’s primary color.
+ Secondary: Uses the secondary color style defined in your theme settings.
Uppercase: Toggle this on to automatically convert the subtext to ALL UPPERCASE letters. When off, the text appears as typed.
You can edit a Icon block using the following options:
Icon: Choose a default icon from the built-in icon library (e.g., Box).
Custom image icon: Upload your own custom icon image (e.g., PNG or JPG) by clicking Select, or browse free image libraries.
Custom SVG icon: Paste SVG code here to use your own vector icon. You can find SVG icons at websites like Remixicon or Tabler Icons.
Icon height: Adjust the icon size (in pixels) for desktop devices.
Tablet icon height: Adjust the icon size (in pixels) for tablet devices.
Mobile icon height: Adjust the icon size (in pixels) for mobile devices.
Color: Choose the icon color like Primary or secondary
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
You can edit a Spacer block using the following options:
Space: Adjusts the amount of space (in pixels) on desktop screens.
Table space: Defines the amount of space for tablet devices, ensuring responsive spacing.
Mobile space: Sets the spacing specifically for mobile screens.
