> For the complete documentation index, see [llms.txt](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/templates/contact-template.md).

# Contact template

## For Customers

## Adding a Section

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/pAMJozuzdy9jl91VoHTo/Untitled.png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/V7FsDDU34Uau6TzhsD1J/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-01_%D0%B2_17.47.49.png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/B1vE9VM3vZe5X4xRZjv5/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-01_%D0%B2_17.48.35.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/ygTQjvXPGxGOytpt6KVx/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-01_%D0%B2_17.49.20.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/UCo0RsrMJcIF85DmzkXD/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-01_%D0%B2_17.50.01.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/onGndVidO6U3dcdM1cEx/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-01_%D0%B2_17.51.47.png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/9TPJo3wjAGi5r7H1WUya/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-01_%D0%B2_17.56.07.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/twUpOnXL0bvl1H9O2uhE/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-01_%D0%B2_17.56.39.png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/9X4hTtH32Y1T4R27mkaG/Untitled%201.png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/8nYnBcWg4dHJrmdDPO1V/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-01_%D0%B2_17.59.08.png" 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="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/GOji9IE5QdVNn3AadUa4/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-01_%D0%B2_18.00.49.png" 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.