# Contact template

## For Customers

## Adding a Section

<figure><img src="/files/IuNDYZ2bklqJvnyUuWv0" alt=""><figcaption></figcaption></figure>

The section is static on a **contact page** template, it was added initially and cannot be removed.

## Section settings

### Banner

<figure><img src="/files/y4FVEfyHK11FabB6Jp7I" alt=""><figcaption></figcaption></figure>

1. **`Image desktop`** - the setting allows you to set the banner image for the **desktop**;
2. **`Image mobile`** - the setting allows you to set the banner image for the mobile;

### General

<figure><img src="/files/zPtLddOGTEihVeDDubzk" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/dz9R00ZDeahvrtlpcrum" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/zvGCq9gboDn1u70iidZu" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/U5tJVZWH4kY5AV0vUbkq" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - the setting allows you to set the title for the contact section;
2. **`Subheading`** - the setting allows you to set the subtitle for the contact section;
3. **`Address heading`** - the setting allows you to set the title for the address info;
4. **`Address icon`** - the setting allows you to set the icon for the address info;
5. **`Address text`** - the setting allows you to set the text for the address info;
6. **`Phone heading`** - the setting allows you to set the title for the phone info;
7. **`Phone icon`** - the setting allows you to set the icon for the phone info;
8. **`Phone text`** - the setting allows you to set the text for the phone info;
9. **`Email heading`** - the setting allows you to set the title for the email info;
10. **`Email icon`** - the setting allows you to set the icon for the email info;
11. **`Email text`** - the setting allows you to set the text for the email info;
12. **`Schedule heading`** - the setting allows you to set the title for the schedule info;
13. **`Schedule icon`** - the setting allows you to set the icon for the schedule info;
14. **`Schedule text`** - the setting allows you to set the text for the schedule info;
15. **`Show socials`** - the setting enables or disables the display of social media;
16. **`Social text`** - the setting allows you to set the text before social media;

### Contact form

<figure><img src="/files/FY44tyHTD7QemoTJ6ZTU" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/zm6j0XWVWaOwnbu2BFde" alt=""><figcaption></figcaption></figure>

1. **`Name label`**- the setting allows you to set the label for the **Name** field;
2. **`Name placeholder`** - the setting allows you to set the placeholder for the **Name** field;
3. **`Email label`**- the setting allows you to set the label for the **`Email`** field;
4. **`Email placeholder`** - the setting allows you to set the placeholder for the **Email** field;
5. **`Phone label`**- the setting allows you to set the label for the **Phone** field;
6. **`Phone placeholder`** - the setting allows you to set the placeholder for the **Phone** field;
7. **`Message label`**- the setting allows you to set the label for the **Message** field;
8. **`Message placeholder`** - the setting allows you to set the placeholder for the **Message** field;
9. **`Button label`** - the setting allows you to set the text for the button.
10. **`Button style`** - the setting allows you to select the button style: primary / secondary / primary with border / secondary with border;

### Map

<figure><img src="/files/9rrgc6X4GsMugABaYyBc" alt=""><figcaption></figcaption></figure>

1. **`Google maps API key`** - the setting allows you to add a **Google Maps API key**. [Learn more](https://developers.google.com/maps/documentation/embed/get-api-key?hl=en) about how to create an API key;
2. **`Map query`** - the setting allows you to add a **query parameter** that is responsible for adding a point on the map. In our case, only the **place mode** has been added. You can add one point to the map in many ways. [Learn more](https://developers.google.com/maps/documentation/embed/embedding-map?hl=en#place_mode) about how to add a query parameter;
3. **`Map url`** - the setting allows you to set a link to the map;
4. **`Map image desktop`** - the setting allows you to set the map image for the **desktop**;
5. **`Map image mobile`** - the setting allows you to set the image for **mobile**.

### Colors

<figure><img src="/files/C7zGyV8v1Sy1onnj3yWd" alt=""><figcaption></figcaption></figure>

1. **`Banner heading color`** - color for the banner heading;
2. **`Banner overlay`** - color for the banner overlay;

### Layout

<figure><img src="/files/ZsXdVZqyBsvxPsH9rTV4" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - a container width of the section. If “Inherit” value is selected then container width based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

## **Additional information**

1. The social media link settings are located in the general theme settings;
2. If the `Map url` or `Map image` fields are not specified in the section settings, the map will not be displayed;
3. The map link opens in a new window.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://utd-bv.gitbook.io/manual-shopify-theme-ultra/templates/contact-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.