Section by Section: 8 tips on using the contact and map sections on your Shopify theme's homepage

Providing an easy way for shoppers to contact you can go a long way toward building confidence in your brand and making it easy for customers to find and get in touch with you with any questions or concerns — and the new contact and map sections in the Turbo Shopify theme make it easier than ever to set this up.

Turbo 2.1 introduces two new sections to the already featured packed theme — a contact form and map.

Parallax 3.3 also includes the contact form section.

Contact form section

This section lets you embed a contact form anywhere on your Shopify theme’s homepage, with a variety of settings and options to make it your own:

• Heading: Draw users’ attention and let them know they can get in touch with you by using a large, easy to see heading. This appears above the form and all of the related content.
• Subheading: Use this to add a heading above the section’s text.
• Text: Add a paragraph or two to give users more information about getting in touch with you.
• Text position: Place your text to the left, above or right of the form fields.
• Text alignment: Controls the alignment of the text; choose from left, center or right.

The contact form used here is the standard Shopify contact form and submissions are sent to your store’s public contact email address just like the forms on contact pages.

When using a contact form, there are many ways to make this section work more effectively for you:

1. Be sure to make it clear that users can use this form to get in touch — and give them as many options as possible
2. Use the text field to add info on other ways you can be reached, including links for users to call or email you directly, if applicable, since some people don’t like filling out contact forms (hint: to make a clickable phone number link that triggers a call on mobile devices, use the URL of “tel:+15555551212” to create one).
3. Consider the placement of the form on the homepage. In general, it shouldn’t be placed too high on the page, but still be placed at a point where, after viewing your page content, users might be in the mindset to contact you.

Map section

If you have a physical location as well (or just want to show what city you’re located in), Turbo’s new map section is a great choice. This feature adds a Google Map of the address of your choice:

• Address: Enter the address you’d like the map to show. This can be either a full city street address, which is ideal for stores, or just a city name. If you’re having trouble getting the map to cooperate, try going to maps.google.com and search your address. In most cases, Google will “reformat” the address to its preferred format. Copy and paste this address into this field.
• Zoom: You can select the zoom level of the map on a scale of 1 to 20. The higher the number, the more “zoomed in” the map will be. This generally also shows more detail of the surrounding area.
• Height: Select the height of the map from a minimum of 250 pixels up to a maximum of 500 pixels.
• Width: Restrict the width of the map or make it full width.

The map section is a great way to give your site a more local feel:

1. If you run a physical, brick and mortar shop, the map is obviously a great way to not only communicate this to shoppers, but help them know where you’re located and, thanks to integration with Google Maps, get directions to the location.
2. If you’re online only, the map can still be a nice way to showcase your general location. You’ll likely want to avoid using a specific street address (so you don’t have shoppers showing up at your house), but giving a city name can be a great way to show your local pride and reinforce your credibility as a merchant, instead of being just a nebulous online brand.
3. Also consider the zoom level of the map. When used in conjunction with the height of the map, the lower the value, the more of the surrounding area will be visible. Stores that serve a wide geographic area or for city-only maps may find it better to use a lower zoom setting, while a higher zoom setting might be more desirable if your business serves a tighter area. This also makes it easier to see nearby cross streets or businesses, landmarks that will be helpful to those looking to visit you in person.
4. The map section feature automatically disables Google Maps’ “draggable” and zoom features to avoid any conflicts with users trying to scroll down on your page.
5. Considering placing your map and contact form near each other, since the information in each typically complements each other.