# Theme settings

These settings are the **King** theme’s general settings for your **Shopify store.**

### Configure theme settings

Go to **Customize** **theme**.&#x20;

Click on **Theme settings** to access theme-wide settings.&#x20;

Customize the sections by utilizing the settings described below:

### **Favicon**

**Image**: Choose any image for the store library.

### Color schemes

**Default color scheme:** Choose any color scheme to be the default one.&#x20;

<table><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select the background color.</td></tr><tr><td>Background gradient</td><td>Select gradient for the background color.</td></tr><tr><td>Alternate background</td><td>Select an alternate background color.</td></tr><tr><td>Card background</td><td>Select the card background color.</td></tr><tr><td>Edge background</td><td>Select the edges background color.</td></tr><tr><td>Border</td><td>Select color for the border.</td></tr><tr><td>Content</td><td><strong>Heading</strong><br>Select color for the heading text.<br><br><strong>Text</strong><br>Select color for the text.<br><br><strong>Link</strong><br>Select color for the links.<br><br><strong>Highlight text</strong><br>Select color for the highlighted text.<br><br><strong>Highlight background</strong><br>Select color for the highlighted text background.</td></tr><tr><td>Primary button</td><td><strong>Background</strong><br>Select the button background color.<br><br><strong>Text</strong><br>Select the button text color.<br><br><strong>Border</strong><br>Select the button border's color.<br><br><strong>Hover background</strong><br>Select the button's background color on hover.<br><br><strong>Hover text</strong><br>Select the button's text color on hover.<br><br><strong>Hover border</strong><br>Select the button's border color on hover.</td></tr><tr><td>Secondary button</td><td><strong>Background</strong><br>Select the button background color.<br><br><strong>Text</strong><br>Select the button text color.<br><br><strong>Border</strong><br>Select the button border's color.<br><br><strong>Hover background</strong><br>Select the button's background color on hover.<br><br><strong>Hover text</strong><br>Select the button's text color on hover.<br><br><strong>Hover border</strong><br>Select the button's border color on hover.</td></tr><tr><td>Image</td><td><strong>Background</strong><br>Select the image's background color.<br><br><strong>Overlay background</strong><br>Select the image's overlay background color.<br><br><strong>Overlay heading</strong><br>Select the image's overlay heading color.<br><br><strong>Overlay text</strong><br>Select the image's overlay text color.<br><br><em>(Note: The image overlay colors work for the images, which are mandatory for the sections.)</em></td></tr><tr><td>Product card</td><td><strong>Background</strong><br>Select the card's background color.<br><br><strong>Border</strong><br>Select the product's border color.</td></tr><tr><td>Slider arrows/dots</td><td><strong>Background</strong><br>Select the slider arrow's background color.<br><br><strong>Color</strong><br>Select the slider arrow's text color.<br><br><strong>Border</strong><br>Select the slider arrow's border color.</td></tr><tr><td>Forms</td><td><strong>Text</strong><br>Select the input field's text color.<br><br><strong>Background</strong><br>Select the input field's background color.<br><br><strong>Border</strong><br>Select the input field's border color.</td></tr></tbody></table>

**Badges**

<table><thead><tr><th width="232"></th><th></th></tr></thead><tbody><tr><td>Sale badge text</td><td>Select any text color for sale badges.</td></tr><tr><td>Sale background</td><td>Select any background color for sale badges.</td></tr><tr><td>Preorder badge text</td><td>Select any text color for preorder badges.</td></tr><tr><td>Preorder background</td><td>Select any background color for preorder badges.</td></tr><tr><td>Sold out text</td><td>Select any text color for sold out badges.</td></tr><tr><td>Sold out background</td><td>Select any background color for sold out badges.</td></tr><tr><td>Custom badge text</td><td>Select any text color for custom badges.</td></tr><tr><td>Custom badge background</td><td>Select any background color for custom badges.</td></tr><tr><td>Discount text</td><td>Select any text color for discount badges.</td></tr><tr><td>Discount background</td><td>Select any background color for discount badges.</td></tr></tbody></table>

**Success/Error messages**

<table><thead><tr><th width="232"></th><th></th></tr></thead><tbody><tr><td>Success text</td><td>Select any text color for success text.</td></tr><tr><td>Error text</td><td>Select any text color for error text.</td></tr><tr><td>Warning text</td><td>Select any text color for warning text.</td></tr></tbody></table>

### **Header and footer colors**

<table><thead><tr><th width="243"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select the header's background color.</td></tr><tr><td>Text</td><td>Select the header's text color.</td></tr><tr><td>Hover text</td><td>Select the header's text color on hover.</td></tr><tr><td>Border</td><td>Select the header's border color.</td></tr><tr><td>Icon color</td><td>Select the header's icons color.</td></tr><tr><td>Quick access menus</td><td><strong>Text</strong><br>Select the Quick access menu button's text color.<br><br><strong>Background</strong><br>Select the Quick access menu button's background color.</td></tr><tr><td>Image</td><td><strong>Background</strong><br>Select the image background color.<br><br><strong>Overlay background</strong><br>Select the overlay's background color.<br><br><strong>Overlay heading</strong><br>Select the overlay's heading color.</td></tr><tr><td>Desktop submenus </td><td><strong>Background</strong><br>Select the sub menu's background color.<br><br><strong>Text</strong><br>Select the sub menu's text color.<br><br><strong>Hover text</strong><br>Select the sub menu's text color on hover.<br><br><strong>Border</strong><br>Select the sub menu's border color.</td></tr><tr><td>Mobile menus/submenu</td><td><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.</td></tr></tbody></table>

**Footer**

<table><thead><tr><th width="244"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select any color for the footer background.</td></tr><tr><td>Edges</td><td>Select any color for the footer edges.</td></tr><tr><td>Heading</td><td>Select any color for the footer heading.</td></tr><tr><td>Text</td><td>Select any color for the footer text.</td></tr><tr><td>Link</td><td>Select any color for the footer links.</td></tr><tr><td>Link hover</td><td>Select any color for the footer links hover.</td></tr><tr><td>Forms</td><td><strong>Text</strong><br>Select the form's text color.<br><br><strong>Border</strong><br>Select the sub menu's border color.</td></tr><tr><td>Button </td><td><strong>Text</strong><br>Select the button text color.<br><br><strong>Background</strong><br>Select the button's background color.</td></tr></tbody></table>

### Typography

This setting allows customizing fonts.

<table data-header-hidden><thead><tr><th width="260"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Headings</td><td><p><strong>Font</strong> </p><p>Select the font of the heading text.</p><p> <br><strong>Line height</strong> </p><p>Adjust the line height for headings used in all sections.<br><br><strong>Font size scale</strong> </p><p>Adjust the range bar to set the font size scale.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the available list of options. </p></td><td></td></tr><tr><td>Body</td><td><p><strong>Font</strong> </p><p>Select the font of the body text.</p><p> <br><strong>Line height</strong> </p><p>Adjust the line height for headings used in all sections.<br><br><strong>Font size scale</strong> </p><p>Adjust the range bar to set the font size scale.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the available list of options.</p></td><td></td></tr><tr><td>Accents</td><td><p><strong>Font</strong> </p><p>Select the font of the accents text.</p><p> <br><strong>Line height</strong> </p><p>Adjust the line height for headings used in all sections.<br><br><strong>Font size scale</strong> </p><p>Adjust the range bar to set the font size scale.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the available list of options.</p></td><td></td></tr></tbody></table>

### Layout&#x20;

<table><thead><tr><th width="188"></th><th></th></tr></thead><tbody><tr><td>Container</td><td>Choose the container width from the following options:<br>- Small<br>- Regular<br>- Medium<br>- Edges gap</td></tr><tr><td>Styling</td><td><strong>Card radius</strong><br>Adjust the range bar to select the border radius of cards.</td></tr><tr><td>Form inputs</td><td><strong>Height</strong><br>Choose the form field's height from the following options:<br>- Small<br>- Medium<br>- Large<br><br><strong>Form radius</strong><br>Adjust the range bar to select the border radius of page forms.</td></tr><tr><td>Animations</td><td><strong>Enable heading animations</strong><br>Select this checkbox to enable the animation on headings.<br><br><strong>Heading animation style</strong><br>Choose the animation styles from the following op<strong>tions:</strong><br><strong>-</strong> Curve rise<br>- Falling curve<br>- Flash flick<br>- Reveal<br>- Scatter fly<br>- Slide up<br>- Wave slide up<br><br><strong>Enable card animations</strong><br>Select this checkbox to enable the animation on cards.</td></tr></tbody></table>

## Swatches

<table><thead><tr><th width="191"></th><th></th></tr></thead><tbody><tr><td>Variant style</td><td>Choose the variant style from the following options:<br>- Variant image<br>- Color swatch</td></tr><tr><td>Color options name</td><td>Enter the option name that holds the colors. E.g., Color, Colour, etc.</td></tr><tr><td>Custom color codes</td><td>Add color codes for the options as per the following details: The left-side options will be the names of the categories that hold the colors (e.g., Color, Material), while the right-side values will be the corresponding color codes, separated by an equals sign. <br><br>For example, if the variant name is "<strong>plaid</strong>" under the "<strong>Color</strong>" category, the color code should be entered as "plaid:#ccc." <br>(<em>Please note that the color option names are case-sensitive</em>.)</td></tr><tr><td>Color swatch type</td><td>Choose the color swatch type from the following options:<br>- Square<br>- Circle</td></tr><tr><td>Size options trigger</td><td>Enter the option name that holds the size option. E.g.: Size,Taille, etc.</td></tr></tbody></table>

## Product

<table><thead><tr><th width="196"></th><th></th></tr></thead><tbody><tr><td>Enable preorder</td><td>Select this checkbox to show <strong>Preorder</strong> button instead of the <strong>Add to cart</strong> button on products, where ' <strong>Continue selling when out of stock</strong> ' is checked.<br><br><img src="https://4251496330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUWveZkoQf4PW5T8WWbcM%2Fuploads%2Foq1sRSY9vtD2c6DoBc1g%2Fimage.png?alt=media&#x26;token=69b760a3-6c41-4de8-95f6-0b00646a11e3" alt="" data-size="original"><br><br><br></td></tr></tbody></table>

### Product cards

<table><thead><tr><th width="215"></th><th></th></tr></thead><tbody><tr><td>Card style</td><td>Choose the card style from the following options:<br>- None<br>- Border only<br>- Background only<br>- Border with background</td></tr><tr><td>Show vendor</td><td>Select the checkbox to show the product vendor name. </td></tr><tr><td>Show price</td><td>Select the checkbox to show the product price in the grids. </td></tr><tr><td>Saving price options</td><td>Select from the options to determine the saving price options:<br>- None<br>- Amount off<br>- Percentage off</td></tr><tr><td>Grid hover style</td><td>Choose the style from below options:<br>- Product options<br>- Second image<br>- Size options only</td></tr><tr><td>Quick view visibility</td><td>Choose the quick view visibility from below options:<br>- Always<br>- On hover<br>- None</td></tr><tr><td>Card radius</td><td>Adjust the range bar to determine the card's radius.</td></tr><tr><td>Card gap</td><td>Adjust the range bar to determine the card's gap in the grids.</td></tr><tr><td>Font size</td><td>Choose the font size from the following options:<br>- X-small<br>- Small<br>- Normal<br>- Medium<br>- Large<br>- X-large</td></tr></tbody></table>

### Product badges

<table><thead><tr><th width="208"></th><th></th></tr></thead><tbody><tr><td>Sale badge</td><td><strong>Show 'Sale' badge</strong><br>Select this checkbox to show the 'Sale' badge based on the conditions selected below.<br><em>Note: The sale badge shows on the products where the compare price is defined from the Shopify product side.</em></td></tr><tr><td>Sold out badge</td><td><strong>Show ' Sold out ' badge</strong><br>Select this checkbox to show the ' Sold out ' badge.</td></tr><tr><td>Show preorder badge</td><td>Select this checkbox to show the preorder badges on the product grids.<br><br>This preorder shows for the products whose ' Continue selling out of stock' is checked from the admin product side.<br><br><img src="https://content.gitbook.com/content/UWveZkoQf4PW5T8WWbcM/blobs/8SbUIjbGwGcxE08DJUuR/image.png" alt="" data-size="original"></td></tr><tr><td>Custom badge</td><td><strong>Product tags</strong><br>Add custom labels in the product tags and then type those in this field. The tags will start showing on the storefront.<br><br><strong>Custom badge text</strong><br>Type the badge text to display.</td></tr></tbody></table>

#### Steps to enable preorder:

This preorder shows for the products whose ' Continue selling out of stock' is checked from the admin product side.

<figure><img src="https://content.gitbook.com/content/UWveZkoQf4PW5T8WWbcM/blobs/ublYPGds0dSqAfDnTM1B/image.png" alt=""><figcaption></figcaption></figure>

#### Steps to set up the color swatches using images:

1. Go to the Shopify dashboard and upload the image in Content -> Files\ <br>

   <figure><img src="https://content.gitbook.com/content/UWveZkoQf4PW5T8WWbcM/blobs/Fye2WXQ6Yc49Mh52j7UG/image.png" alt=""><figcaption></figcaption></figure>
2. Type the product variant name(case-sensitive) on the left side in theme settings> Swatches> Custom color codes, as shown below:\ <br>

   <figure><img src="https://content.gitbook.com/content/UWveZkoQf4PW5T8WWbcM/blobs/Tq4p5hwS6SzigdJrHRpg/image.png" alt=""><figcaption></figcaption></figure>
3. Type the color image name on the right side including the image extension in theme settings> Swatches> Custom color codes, as shown below:\ <br>

   <figure><img src="https://content.gitbook.com/content/UWveZkoQf4PW5T8WWbcM/blobs/mnLOroHctCmn2NTJjmx2/image.png" alt=""><figcaption></figcaption></figure>
4. The names in the theme editor should be like this:\
   The format must be: Variant name: Color-code\
   \
   ![](https://content.gitbook.com/content/UWveZkoQf4PW5T8WWbcM/blobs/rNLHiRNuWZcRHInJAkws/image.png)
5. It will show like this:<br>

   <figure><img src="https://content.gitbook.com/content/UWveZkoQf4PW5T8WWbcM/blobs/f4RgddSMXLqJeVdvMNdt/image.png" alt=""><figcaption></figcaption></figure>

### Search

<table><thead><tr><th width="211"></th><th></th></tr></thead><tbody><tr><td>Style</td><td>Choose the search style from the following options:<br>- Page<br>- Drawer</td></tr><tr><td>Show popular categories</td><td>Select this checkbox to show the most popular categories.</td></tr><tr><td>Heading</td><td>Add text to the heading in the search drawer. E.g., Suggestions.</td></tr><tr><td>Popular categories</td><td>Add any labels to show in the suggestions as pre-defined. Use comma-separated values for multiple queries.</td></tr><tr><td>Suggestions</td><td>Popular products<br><strong>Visibility</strong><br>Choose the popular products visibility from the following options:<br>- Before search<br>- After search, no results<br>- Both<br>- None<br><br><strong>Heading</strong><br>Add text to the heading.<br><br><strong>Products</strong><br>Choose the products.<br><br>Popular collections<br><strong>Visibility</strong><br>Choose the popular collections visibility from the following options:<br>- Before search<br>- After search, no results<br>- Both<br>- None<br><br><strong>Heading</strong><br>Add text to the heading.<br><br><strong>Collections</strong><br>Choose the collections.</td></tr><tr><td>Search results</td><td><strong>Search behavior</strong><br>Choose the search behavior from the following options:<br>- Products only<br>- Products and pages<br>- Products and articles<br>- Products, articles and pages<br>- All content<br><br><strong>Products image ratio</strong><br>Choose from image's ratio from the following options:<br>- Auto<br>- Square<br>- Landscape<br>- Portrait<br><br><strong>Collections image ratio</strong><br>Choose from image's ratio from the following options:<br>- Auto<br>- Square<br>- Landscape<br>- Portrait<br><br><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.</td></tr></tbody></table>

### Buttons

<table><thead><tr><th width="222"></th><th></th></tr></thead><tbody><tr><td>Button style</td><td>Choose the button style from the following options:<br>- Normal<br>- Animated</td></tr><tr><td>Font</td><td>Choose the font from the following options:<br>- Accent<br>- Body<br>- Heading</td></tr><tr><td>Radius</td><td>Adjust the range bar to determine the button radius.</td></tr></tbody></table>

### Popup/drawers

<table><thead><tr><th width="242"></th><th></th></tr></thead><tbody><tr><td>Color scheme</td><td>Select any color scheme defined in the theme settings>Colors>Schemes.</td></tr><tr><td>Overlay background</td><td>Choose any color for the overlay background.</td></tr><tr><td>Overlay opacity</td><td>Adjust the range bar to determine the overlay opacity.</td></tr></tbody></table>

### Account

Account behavior: Choose the account style from the following options: **Drawer** or **Page**.

### Cart

<table><thead><tr><th width="224"></th><th></th></tr></thead><tbody><tr><td>Style</td><td>Choose the cart style from the following options: <strong>Drawer</strong> or <strong>Page</strong>.</td></tr><tr><td>Gift wrap</td><td><strong>Enable gift wrap</strong><br>Tick this checkbox to show the gift wrap in the cart drawer.<br><br><strong>Product</strong><br>Select any product to include in the gift wrap.<br><br><strong>Text</strong><br>Type any text to show with the gift wrapping checkbox.</td></tr><tr><td>Shipping bar</td><td><p><em>(Note: This feature only works with a shipping method. If you're using multiple shipping methods, it might show false values to the customer.)</em><br><br><strong>Enable shipping bar</strong><br>Select this checkbox to enable/disable the shipping bar on the cart drawer.<br><br><strong>Minimum shipping price</strong><br>Type any price for providing free shipping to the customers. After reaching this price, the user will be shown a success message.</p><p><em>(Note: Users must write a number, no letters or special characters.)</em><br><br><strong>Success message</strong><br>Enter text to show the success message after the user has reached the minimum shipping price.<br><br><strong>Message</strong><br>Type any relevant message to notify users about the amount saved in this field.</p><p><em>(Note: Use ||amount|| to display the amount within the message.)</em></p></td></tr><tr><td>Cart drawer</td><td><strong>Show cart notes</strong><br>Select this checkbox to show the cart notes in the cart drawer.<br><br><strong>Show estimate shipping</strong><br>Select this checkbox to show estimate shipping in the cart drawer.<br><br><strong>Enable payment icons</strong><br>Select this checkbox to show the payment icons in the cart drawer.<br><br>Cart recommendations<br><strong>Show in</strong><br>Choose the options to show the recommendations in:<br>- Drawer<br>- None<br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Products</strong><br>Choose the products list.<br><br>Empty cart recommendations<br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Collection list</strong><br>Choose the collections list.<br><br><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.</td></tr></tbody></table>

### Internationalization

<table><thead><tr><th width="226"></th><th></th></tr></thead><tbody><tr><td>Heading</td><td>Enter the heading text.</td></tr><tr><td>Enable country/region selector</td><td>Select this checkbox to show the country/region selector.</td></tr><tr><td>Enable language selector</td><td>Select this checkbox to show the language selector.</td></tr></tbody></table>

### Social media

<table><thead><tr><th width="234"></th><th></th></tr></thead><tbody><tr><td>Sharing options</td><td>These options are useful to share the product, articles on the social networking sites.<br><strong>Share on Facebook</strong><br>Select this checkbox to share on Facebook.<br><br><strong>Tweet on X (formerly Twitter)</strong><br>Select this checkbox to share on X (formerly Twitter).<br><br><strong>Pin on Pinterest</strong><br>Select this checkbox to share on Pinterest.<br><br><strong>Share on Telegram</strong><br>Select this checkbox to share on Telegram.<br><br><strong>Share on Email</strong><br>Select this checkbox to share on Email.</td></tr><tr><td>Social accounts</td><td>These options are to show the merchant's social networking pages.<br><strong>Facebook</strong><br>Enter the Facebook account link.<br><br><strong>Instagram</strong><br>Enter the Instagram account link.<br><br><strong>YouTube</strong><br>Enter the YouTube account link.<br><br><strong>TikTok</strong><br>Enter the TikTok account link.<br><br><strong>X (formerly Twitter)</strong><br>Enter the Twitter account link.<br><br><strong>Snapchat</strong><br>Enter the Snapchat account link.<br><br><strong>Pinterest</strong><br>Enter the Pinterest account link.<br><br><strong>Tumblr</strong><br>Enter the Tumblr account link.<br><br><strong>Vimeo</strong><br>Enter the Vimeo account link.</td></tr></tbody></table>

### Scroll to top

<table><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Enable</td><td>Select this checkbox to enable the scroll to top icon.</td></tr><tr><td>SVG code</td><td>Add the SVG icon code.</td></tr><tr><td>Horizontal position</td><td>Choose the icon position from the following options:<br>- Left<br>- Center<br>- Right</td></tr><tr><td>Vertical position</td><td>Adjust the range bar to determine the vertical position of this icon.</td></tr><tr><td>Colors</td><td><strong>Background</strong><br>Choose any color for the icon background.<br><br><strong>Icon</strong><br>Choose any color for the icon.<br><br><strong>Border</strong><br>Choose any color for the border.</td></tr></tbody></table>

## Google maps

**API** : This setting is for adding the Google maps **API** key for the Maps section to function correctly.

### **Google Maps API key steps**

**Using API keys:**

Google Maps platform products are protected from unauthorized use by limiting **API calls** to people with the proper authentication credentials. These are an **API key -** a unique alphanumeric string that associates **a Google billing account** with the project and the specific **API/SDK.**

This guide displays how to create, restrict, and use your **API Key** for the **“Google Maps platform.”**

**Before you start:**

Before you begin using the **“Maps JavaScript API,”** you need a project with a billing account and the **“Maps JavaScript API”** enabled. To understand more, see [Set up in Cloud Console.](https://developers.google.com/maps/documentation/javascript/cloud-setup)&#x20;

1. Create a new: **“Google cloud project”** in the **Cloud console:**[ Create a new project](https://console.cloud.google.com/projectcreate?pli=1)
2. On the **New project** display, fill in the required details:
   * **Project name:** Accept the default name or enter a customized name. You can change the project name at any time. For more information, see [Identifying projects.](https://cloud.google.com/resource-manager/docs/creating-managing-projects)
   * **Project ID:** Accept the default or click on **“EDIT”** to add a **“Customized ID”** that **“Google APIs”** use as a unique identifier for the project. After users create the project, they cannot change the **“Project ID,”** so select an **ID** you'll be comfortable using for the project's lifetime. Do not include any sensitive information in **“Project ID.”**
   * **Billing account:** Choose a billing account for the project. You won't see this option if you haven't set up a billing account or only have one.
   * Users must be a **“Billing account administrator”** or **“Project billing manager”** to associate a project with the billing account. For more details, refer to [the billing access control documentation.](https://cloud.google.com/billing/docs/how-to/billing-access)
   * **Location:** If users have an organization to link the project to, click **Browse** and select it; otherwise, choose **"No organization."** For more details, check here [Creating and Managing Folders ](https://cloud.google.com/resource-manager/docs/creating-managing-folders)and [Relationships between organizations, projects, and billing accounts.](https://cloud.google.com/billing/docs/how-to/billing-access)
3. Click on the **Create button.**<br>

   **Creating API keys:**&#x20;

   The **API key** is a **UID** (unique identifier), which authenticates all requests associated with the project for usage and the billing purposes. Users must have at least one **API key** associated with the project.

   To create an **API key:**

   * Open **“Google Maps platform > Credentials page.** For more details, refer to [Go to the Credentials](https://console.cloud.google.com/projectselector2/google/maps-apis/credentials?_ga=2.232575647.1812279178.1657180950-105875005.1657180950) page.
   * On the **Credentials** page, click on **Create credentials > API key.** The **API key-created** dialog displays your newly created **API key.**
   * Click on the **Close button.**
