# Theme settings

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

### Configure theme settings

Go to **Customize** **theme**. 

Click on **Theme settings** to access theme-wide settings. 

Customize the sections by utilizing the settings described below:

### Color schemes

<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>Alternate background</td><td>Select an alternate background color.</td></tr><tr><td>Background gradient</td><td>Select gradient for the background color.</td></tr><tr><td>Heading</td><td>Select color for the heading text.</td></tr><tr><td>Highlight color</td><td>Select color for the highlighted text.</td></tr><tr><td>Text</td><td>Select color for the text.</td></tr><tr><td>Link</td><td>Select color for the links.</td></tr><tr><td>Primary button</td><td><strong>Background</strong><br>Select the button background color.<br><br><strong>Shadow</strong><br>Select the button shadow 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>Shadow</strong><br>Select the button shadow 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>Input</td><td><strong>Background</strong><br>Select the input field's background color.<br><br><strong>Text</strong><br>Select the input field's text color.<br><br><strong>Border</strong><br>Select the input field's border color.</td></tr><tr><td>Others</td><td><strong>Product border</strong><br>Select the product's border color.<br><br><strong>Product media background</strong><br>Select the product's media background color.<br><br><strong>Line/Divider</strong><br>Select the divider's color.<br><br><strong>Ratings</strong><br>Select the rating star's color.</td></tr><tr><td>Slider arrows</td><td><strong>Arrow background</strong><br>Select the slider arrow's background color.<br><br><strong>Arrow color</strong><br>Select the slider arrow's text color.</td></tr><tr><td>Product card</td><td><strong>Background</strong><br>Select the product card's background color.</td></tr></tbody></table>

**Header**

<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>Secondary background</td><td>Select the header's secondary background color.</td></tr><tr><td>Secondary text</td><td>Select the header's secondary text color.</td></tr><tr><td>Secondary hover text</td><td>Select the header's secondary text color on hover.</td></tr><tr><td>Icon color</td><td>Select the header icon's color.</td></tr><tr><td>Cart count background</td><td>Select the cart count background color.</td></tr><tr><td>Cart count text</td><td>Select the cart count text color.</td></tr><tr><td>Search text</td><td>Select the search's text color.</td></tr><tr><td>Search background</td><td>Select the search's background color.</td></tr><tr><td>Transparent header</td><td><strong>Text/icons</strong><br>Select the text color for the transparent header.</td></tr><tr><td>Submenu level 1</td><td><strong>Sub menu background</strong><br>Select the sub menu's background color.<br><br><strong>Sub menu text</strong><br>Select the sub menu's text color.<br><br><strong>Sub menu text hover</strong><br>Select the sub menu's text color on hover.</td></tr><tr><td>Submenu level 2</td><td><strong>Sub menu background</strong><br>Select the sub menu's background color.<br><br><strong>Sub menu text</strong><br>Select the sub menu's text color.<br><br><strong>Sub menu text hover</strong><br>Select the sub menu's text color on hover.</td></tr><tr><td>Mega menu overlay</td><td>Select the mega menu's overlay color.</td></tr><tr><td>Mega menu overlay text</td><td>Select the mega menu's overlay text color.</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>Compact background</td><td>Select any color for the footer compact background.</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>Button background</td><td>Select the button background color.</td></tr><tr><td>Button text</td><td>Select the button text color.</td></tr><tr><td>Button border</td><td>Select the button border's color.</td></tr><tr><td>Button background hover</td><td>Select the button's background color on hover.</td></tr><tr><td>Button text hover</td><td>Select the button's text color on hover.</td></tr><tr><td>Button border hover</td><td>Select the button's border color on hover.</td></tr><tr><td>Divider</td><td>Select the divider's color.</td></tr><tr><td>Input/button shadow</td><td>Select the input/button's shadow color.</td></tr><tr><td>Background overlay</td><td>Select any color for the background overlay.</td></tr><tr><td>Bottom bar</td><td><strong>Text</strong><br>Select any color for the footer text on the bottom bar.<br><br><strong>Link</strong><br>Select any color for the footer links on the bottom bar.<br><br><strong>Link hover</strong><br>Select any hover color for the footer links on the bottom bar.</td></tr></tbody></table>

#### Scroll to top

<table><thead><tr><th width="253"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select any color for the background of the scroll to the top button.</td></tr><tr><td>Color</td><td>Select any color for the icon of the scroll to the top button.</td></tr></tbody></table>

#### Message

<table data-header-hidden><thead><tr><th width="227">Header</th><th></th></tr></thead><tbody><tr><td>Success</td><td>Select any color for the header background.</td></tr><tr><td>Error</td><td>Select any color for the header text.</td></tr></tbody></table>

#### Badge

<table data-header-hidden><thead><tr><th width="228"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Sale background</td><td>Select any sale badge's background color.</td><td></td></tr><tr><td>New background</td><td>Select any new badge's background color.</td><td></td></tr><tr><td>Sold background</td><td>Select any sold badge's background color.</td><td></td></tr><tr><td>Preorder background</td><td>Select any preorder badge's background color.</td><td></td></tr><tr><td>Custom background</td><td>Select any custom badge's background color.</td><td></td></tr></tbody></table>

**Discount**

<table><thead><tr><th width="237"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select the discount's background color.</td></tr><tr><td>Text</td><td>Select the discount's text color.</td></tr></tbody></table>

**Marquee**

<table><thead><tr><th width="239"></th><th></th></tr></thead><tbody><tr><td>Marquee text soild</td><td>Select any color for the marquee solid text.</td></tr><tr><td>Marquee text gradient</td><td>Select any color for the marquee gradient text.</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>Font scale </p><p><strong>Desktop</strong><br>Adjust the range bar to set the font size scale on the desktop.<br><br><strong>Mobile</strong><br>Adjust the range bar to set the font size scale on the mobile.<br> </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>Font scale </p><p><strong>Desktop</strong><br>Adjust the range bar to set the font size scale on the desktop.<br><br><strong>Mobile</strong><br>Adjust the range bar to set the font size scale on the mobile. </p></td><td></td></tr></tbody></table>

### Border radius

<table><thead><tr><th width="188"></th><th></th></tr></thead><tbody><tr><td>Product grid</td><td><strong>Desktop</strong><br>Adjust the range bar to select the border radius of product grids on the desktop view.<br><br><strong>Mobile</strong><br>Adjust the range bar to select the border radius of product grids on the mobile view.</td></tr><tr><td>Images</td><td><strong>Desktop</strong><br>Adjust the range bar to select the border radius of images on the desktop view.<br><br><strong>Mobile</strong><br>Adjust the range bar to select the border radius of images on the mobile view.</td></tr><tr><td>Input</td><td><strong>Desktop</strong><br>Adjust the range bar to select the border radius of input fields on the desktop view.<br><br><strong>Mobile</strong><br>Adjust the range bar to select the border radius of input fields on the mobile view.</td></tr><tr><td>Box grids</td><td><strong>Desktop</strong><br>Adjust the range bar to select the border radius of the box grids on the desktop view.<br><br><strong>Mobile</strong><br>Adjust the range bar to select the border radius of the box grids on the mobile view.</td></tr></tbody></table>

## Input

Enable shadow: Tick this checkbox to show the shadow on input fields.

### Buttons

<table><thead><tr><th width="215"></th><th></th></tr></thead><tbody><tr><td>Enable button shadow</td><td>Tick this checkbox to show the button's shadow throughout the store.</td></tr><tr><td>Enable round button</td><td>Tick this checkbox to show the rounded buttons throughout the store.</td></tr><tr><td>Text transform</td><td>Select from the capitalize or uppercase to determine the button text casing.</td></tr><tr><td>Enable round button</td><td>Select this checkbox to show the rounded button.</td></tr><tr><td>Border radius</td><td><strong>Desktop</strong><br>Adjust the range bar to determine the button border radius on the desktop view.<br><br><strong>Mobile</strong><br>Adjust the range bar to determine the button border radius on the mobile view.</td></tr><tr><td>Hover effect</td><td>Choose from <strong>Normal</strong> or <strong>Glowing</strong> for the button hover effect.</td></tr><tr><td>Arrow>Enable arrow shadow</td><td>Tick this checkbox to show the arrows shadow throughout the store.</td></tr></tbody></table>

## Layout

<table><thead><tr><th width="196"></th><th></th></tr></thead><tbody><tr><td>Container width</td><td>Choose from small, medium or large to determine the container width.</td></tr><tr><td>Background overlay</td><td><strong>Enable blur effect</strong><br>Tick the checkbox to enable the blur effect in the background overlay.<br><br><strong>Color</strong><br>Choose any color.<br><br><strong>Opacity</strong><br>Adjust the range bar to determine the background overlay opacity.</td></tr><tr><td></td><td></td></tr></tbody></table>

## Product card

<table><thead><tr><th width="192"></th><th></th></tr></thead><tbody><tr><td>Enable border</td><td>Tick the checkbox to show the product borders. </td></tr><tr><td>Enable border on hover</td><td>Tick the checkbox to show the product borders on hover only. </td></tr><tr><td>Enable inner padding</td><td>Tick the checkbox to show the inner padding in the product grids.</td></tr><tr><td>Enable background</td><td>Tick the checkbox to show the background color in the product grids.</td></tr><tr><td>Show product price</td><td>Tick the checkbox to show the product price in the grids. </td></tr><tr><td>Show second image on hover</td><td>Tick the checkbox to show the product's second image on hover. </td></tr><tr><td>Show price savings</td><td>Tick the checkbox to show the product's saving price which is the price difference between the compare price and sale price. </td></tr><tr><td>Saved amount type</td><td>Select from percentage off or amount off to determine the saved amount type.</td></tr><tr><td>Title style</td><td>Choose the product title style from <strong>Normal</strong> or <strong>Bold</strong>.</td></tr><tr><td>Enable color swatches</td><td>Tick the checkbox to display the product color swatches in the grid.</td></tr><tr><td>Show video on grid</td><td>Tick the checkbox to autoplay the Shopify-hosted videos in the product grid.</td></tr><tr><td>Show product vendor</td><td>Tick the checkbox to show the product vendor name. </td></tr><tr><td>Show product ratings</td><td>Tick the checkbox to show the product rating stars.</td></tr><tr><td>Show product inventory</td><td>Tick the checkbox to show the product inventory in the grids.</td></tr><tr><td>Show product countdown</td><td>Tick the checkbox to show the product countdown timer in the grids.<br>These countdowns are managed with the meta fields.</td></tr><tr><td>Show marquee text</td><td>Tick the checkbox to show the marquee text on the product grids.<br><em>(Note: Add product-specific meta field with namespace and key- theme.marquee_text and type- text to show the marquee text in the grid.)</em></td></tr><tr><td>Marquee direction</td><td>Choose the product grid marquee direction from the following options:<br>- Left to right<br>- Right to left</td></tr><tr><td>Desktop scrolling speed</td><td>Adjust the range bar to determine the marquee text's scrolling speed on the desktop.</td></tr><tr><td>Mobile scrolling speed</td><td>Adjust the range bar to determine the marquee text's scrolling speed on the mobile.</td></tr><tr><td>Show quick view</td><td>Tick the checkbox to show the quick view on the grids.</td></tr><tr><td>Show quick view on hover</td><td>Tick the checkbox to show the quick view on hover in the product grid.</td></tr><tr><td>Quick view style</td><td>Choose from button or icon to determine the quick view style.</td></tr><tr><td>Show compare</td><td>Tick the checkbox to show the compare icon on the grids. <br><em>(Note: To change the view of the product comparison popup, go to the 'Product comparison' section below the footer group.)</em></td></tr><tr><td>Content alignment</td><td>Choose the content alignment from left or center.</td></tr></tbody></table>

## Steps to set up the product countdown

1. Create a metafield and pin it.<br>

   <figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FtLc47NHDYVjBoguH8Qeo%2Fimage.png?alt=media&#x26;token=dbe94aab-265b-4aad-b32d-8f86decc89ad" alt=""><figcaption></figcaption></figure>
2. Go to the product and select the future date.<br>

   <figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FrnYbmaTNvMEYtiwWZ1hH%2Fimage.png?alt=media&#x26;token=267eb042-8112-404f-8664-c5f775708283" alt=""><figcaption></figcaption></figure>
3. The countdown starts showing on the product<br>

   <figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FL2TR94T2POVdCUJA0eCf%2Fimage.png?alt=media&#x26;token=df53e5bd-f325-4f75-9771-bf07e36e35c5" alt=""><figcaption></figcaption></figure>

### Product&#x20;

<table><thead><tr><th width="203"></th><th></th></tr></thead><tbody><tr><td>Enable preorder</td><td>Tick the checkbox to show the preorder button. It shows for the products with enabled 'Continue selling when out of stock.'</td></tr><tr><td>Low inventory threshold</td><td>Adjust the range bar to determine the low inventory threshold.</td></tr><tr><td>Style</td><td><strong>In stock</strong><br>Select the color for the in-stock text color.<br><br><strong>Low stock</strong><br>Select a color for the low-stock text color.<br><br><strong>Out of stock</strong><br>Select a color for the out of stock text color.</td></tr><tr><td>Terms and conditions</td><td><strong>Show terms and conditions checkbox</strong><br>Tick the checkbox to show the terms and conditions text on the product templates.<br><br><strong>Text</strong><br>Enter the text for terms and conditions.</td></tr><tr><td>Add to cart alerts</td><td><strong>Audio alert</strong><br>Choose from the list of options to determine the audios for the alerts by clicking on the add to cart button.<br><br><strong>Haptic feedback</strong><br>Tick this checkbox to enable the haptic feedback.<br>(Note: It does not work on IOS devices.)<br><br><strong>Enable the shake effect</strong><br>Tick this checkbox to enable the shake effect on the click of the add to cart button.</td></tr></tbody></table>

### Product badges

<table><thead><tr><th width="208"></th><th></th></tr></thead><tbody><tr><td>Style</td><td>Choose the product badges style from the following options:<br>- Adjacent <br>- Floating.</td></tr><tr><td>Sale badge</td><td><strong>Show 'Sale' badge</strong><br>Tick 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>Tick this checkbox to show the 'Sold out' badge.</td></tr><tr><td>New badge</td><td><p>New badges can be displayed under various conditions, including:</p><ul><li>For products within the selected collection</li><li>For recently created products, use the days range bar to set the timeframe."<br><br><strong>Show 'New' badge for products in the following collections</strong><br>Tick this checkbox to show the new badge based on the collections selected below.<br><br><strong>'New' collections</strong><br>Select the collections on whose products, the new badge will be displayed.<br>(Note: This has a higher priority than the days range bar-based badges.)<br><br><strong>Show 'New' label for products created within this many days</strong><br>Tick this checkbox to show the new badge based on the product's creation date, as specified below.<br><br><strong>Days ago created</strong><br>Use the range bar to set the number of days.<br>(Note: If set to 5, products created within the last 5 days will be labelled as 'New'.)</li></ul></td></tr><tr><td>Preorder badge</td><td><a href="#steps-to-enable-preorder"><strong>Show 'Preorder' badge</strong><br></a>Tick 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://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FwRwVO4zdxCKfaq7z4wfU%2Fimage.png?alt=media&#x26;token=1abc665e-4345-46ba-b2e6-eff5413e2e8f" alt="" data-size="original"><br></td></tr><tr><td>Custom badge</td><td><strong>Enable badges animation</strong><br>Tick this checkbox to enable the custom badges animation in the product grids.<br><br><strong>Change badge every second</strong><br>Adjust the range bar to determine the seconds for the changing badges.<br><br><strong>Product tag 1-3</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>Badge text 1-3</strong><br>Type the badge text to display.<br><br><strong>Show custom badge on product images</strong><br>Tick this checkbox to show the custom badges above the product images.</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://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FNBNdJVRtx8CPSRKuNY0f%2Fimage.png?alt=media&#x26;token=e5ca3bb3-aa42-417c-947b-1d0161ef8da3" alt=""><figcaption></figcaption></figure>

### Swatches

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Show variant image as color</td><td>Tick the checkbox to show variant image as color.</td><td></td></tr><tr><td>Show label with swatch</td><td>Tick the checkbox to show the product option labels above the swatches.</td><td></td></tr><tr><td>Color options name</td><td>Enter the option name that holds the colors. E.g., Color, Colour, etc.</td><td></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><td></td></tr><tr><td>Size options name</td><td>Enter the option name that holds the size. E.g.: Size,Taille, etc.</td><td></td></tr></tbody></table>

### 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://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FHnlbhjdnOQ82QRtNvz4Y%2Fimage.png?alt=media&#x26;token=b3cbdcf0-d63a-4c90-babd-861f3476d241" 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://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FNpfVUuey6aYUeAjIJ22V%2Fimage.png?alt=media&#x26;token=180e9bd1-9afd-4436-8f54-7de2a474e536" 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://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FgNWNnS2JwzNDoOkv3Qz5%2Fimage.png?alt=media&#x26;token=532d4f14-c376-4160-a8f3-961281fa548f" alt=""><figcaption></figcaption></figure>
4. The names in the theme editor should be like this:\
   The format must be: Variant name: Color-code\
   \
   ![](https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FoNHcAfxYfMhPOhCSLksK%2Fimage.png?alt=media\&token=d8ec55db-5ecc-4653-b09e-1c00f9f42007)
5. It will show like this:<br>

   <figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FvdZVp2aAqFtVH7rH1nww%2Fimage.png?alt=media&#x26;token=c46edae1-f352-4ca0-b282-538ad9117cb9" alt=""><figcaption></figcaption></figure>

## Google maps

Enter the Google maps **API** key.\
\
**Map ID:** enter the Map ID. For more info, please go through [Google docs.](https://developers.google.com/maps/documentation/get-map-id)\
\&#xNAN;***(Note: Google maps API key and Map ID are mandatory to show the maps.)***\
\
Google maps **API** key: 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.**

### Social media

Use this setting to link your Shopify store to your social media handles.

|           |                                        |
| --------- | -------------------------------------- |
| Facebook  | Add Link to your **Facebook** Handle.  |
| Twitter   | Add Link to your **Twitter** Handle.   |
| Instagram | Add Link to your **Instagram** Handle. |
| Pinterest | Add Link to your **Pinterest** Handle. |
| Snapchat  | Add Link to your **Snapchat** Handle.  |
| LinkedIn  | Add Link to your **LinkedIn** Handle.  |
| TikTok    | Add Link to your **TikTok** Handle.    |
| YouTube   | Add Link to your **You Tube** Handle.  |

### Cart&#x20;

<table><thead><tr><th width="301">Cart drawer</th><th></th></tr></thead><tbody><tr><td>Cart type</td><td>Select from <strong>Drawer</strong> or <strong>Page</strong> to show the cart type.</td></tr><tr><td>Enable notes</td><td>Select this checkbox to show the cart notes in the cart drawer.</td></tr><tr><td>Gift wrap>Enable gift wrap</td><td>Tick this checkbox to show the gift wrap in the cart drawer.</td></tr><tr><td>Gift wrap>Product</td><td>Select any product to include in the gift wrap.</td></tr><tr><td>Gift wrap>Text</td><td>Type any text to show with the gift wrapping checkbox.</td></tr><tr><td>Enable shipping bar</td><td><p>Select this checkbox to enable/disable the shipping bar on the cart drawer.</p><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></p></td></tr><tr><td>Enable confetti effect</td><td>Select this checkbox to enable the confetti effect when the minimum spend is reached.</td></tr><tr><td>Minimum shipping price</td><td><p>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></p></td></tr><tr><td>Message</td><td><p>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>Success message</td><td>Enter text to show the success message after the user has reached the minimum shipping price.</td></tr><tr><td>Terms and conditions</td><td><strong>Show terms and conditions checkbox</strong><br>Tick the checkbox to show the terms and conditions text on the product templates.<br><br><strong>Text</strong><br>Enter the text for terms and conditions.</td></tr></tbody></table>

## Cart recommendation

<table><thead><tr><th width="302"></th><th></th></tr></thead><tbody><tr><td>Enable on desktop</td><td>Select this checkbox to enable cart recommendations on the desktop.</td></tr><tr><td>Heading</td><td>Enter the heading text.</td></tr><tr><td>Choose products</td><td>Select products to show the recommendations.</td></tr><tr><td>Button</td><td><p><strong>Text</strong> </p><p>Add text to the highlight button.  <br> </p><p><strong>Link</strong> </p><p>Add a link to your button.  <br><em>Note: If the button text is blank, then the link will be applied to the whole image.</em> <br><br><strong>Show button as link</strong><br>Tick this checkbox to make the button as a link.<br><br><strong>Size</strong><br>Select from the various options to determine the button size.</p></td></tr><tr><td>Banner 1-4</td><td><strong>Image</strong><br>Choose an image from the library.<br><br><strong>Subheading</strong><br>Enter the subheading.<br><br><strong>Heading</strong><br>Enter the heading.</td></tr></tbody></table>

### Gift card

<table><thead><tr><th width="286"></th><th></th></tr></thead><tbody><tr><td>Logo image</td><td>Select an image to add a logo on the gift card page.</td></tr><tr><td>Custom logo width</td><td>Adjust the slider to select the logo width.</td></tr><tr><td>Logo alignment</td><td>Select from left or center to determine the logo alignment.</td></tr></tbody></table>

### Search

Use this setting for adding search suggestions.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Search style</td><td>Choose the search style from the following options:<br>- Full width<br>- Side drawer<br><strong>(Note: This setting is applicable to search drawer using '</strong><em><strong>Logo with inline menus</strong></em><strong>' and '</strong><em><strong>Hamburger menus</strong></em><strong>' header styles only.)</strong></td><td></td></tr><tr><td>Suggestions</td><td><p><strong>Enable suggestions</strong><br>Tick this checkbox to show the search suggestions.<br><br><strong>Heading</strong><br>Add text to the heading in the search drawer. E.g., Suggestions.<br><br><strong>Queries</strong><br>Add any labels to show in the suggestions as pre-defined. Use comma-separated values for multiple queries.<br><br>Product suggestions<br><strong>Heading</strong><br>Add text to the heading.<br><br><strong>Product</strong><br>Select products to show them under suggestions in the search drawer. <br><br><strong>Image ratio</strong><br>Select the image ratio from the given options: </p><p>-Auto </p><p>-Landscape </p><p>-Portrait </p><p>-Square</p></td><td></td></tr><tr><td>Search results<br><br><br></td><td><p><strong>Show articles</strong>  <br>Tick this checkbox to show the articles in search results.<br><br><strong>Show pages</strong><br>Tick this checkbox to show the pages in search results.<br><br><strong>Product image ratio</strong> </p><p>Select product image ratio from the given options:</p><p>-Auto </p><p>-Landscape </p><p>-Portrait </p><p>-Square <br><br><strong>Article image ratio</strong> </p><p>Select the article's image ratio from the given options:</p><p>-Auto </p><p>-Landscape </p><p>-Portrait </p><p>-Square </p><p> <br><strong>Collection image ratio</strong> </p><p>Select the collection's image ratio from the given options:</p><p>-Auto </p><p>-Landscape </p><p>-Portrait </p><p>-Square </p></td><td></td></tr><tr><td>Colors</td><td><strong>Color scheme</strong><br>Select the color scheme.<br><br><strong>Enable gradient</strong> <br>Select this check box to enable the gradient color specified in the color scheme assigned above.</td><td></td></tr></tbody></table>

## SEO

Disable microdata schema: Check this checkbox to disable the microdata schema in case you use any app to manage the SEO.\
\
Microdata schema: Starlite comes equipped with integrated microdata schema, a feature that significantly benefits Google and other major search engines. This structured data provides direct access to information on your web pages, enhancing the relevance of results for users. Our themes provide essential schema details, including information about the store (organization), breadcrumb navigation, and product details such as name, URL, variants, and images. If you need more control, or additional information, or prefer an alternative solution for these snippets, our themes offer the flexibility to disable the default microdata schema, allowing you to implement a custom solution according to your preferences.

## Drawer/popup

<table><thead><tr><th width="285"></th><th></th></tr></thead><tbody><tr><td>Drawer</td><td><strong>Color scheme</strong><br>Select the color scheme.<br><br><strong>Enable gradient</strong> <br>Select this check box to enable the gradient color specified in the color scheme assigned above.</td></tr><tr><td>Popup</td><td><strong>Color scheme</strong><br>Select the color scheme.<br><br><strong>Enable gradient</strong> <br>Select this check box to enable the gradient color specified in the color scheme assigned above.</td></tr></tbody></table>

### Advanced

<table><thead><tr><th width="284"></th><th></th></tr></thead><tbody><tr><td>Enable dark/light mode toggle</td><td>Tick this checkbox to show the toggle button in the header.<br><br><strong>Style</strong><br>Select the dark/light button style from <strong>Toggle</strong> or <strong>Button</strong>.<br><br><strong>Colors</strong><br>Select the colors for the dark/light mode toggle button's colors.</td></tr><tr><td>Tab attention</td><td><strong>Show attention messages when the browser tab loses focus</strong><br>Tick this checkbox to show the messages on the browser tab whenever the storefront users lose focus.<br><em>This feature is useful to grab the attention of storefront users.</em><br><br><strong>Message 1</strong><br>Type message one here.<br><br><strong>Message 2</strong><br>Type message two here.<br>(Note: <em>Messages one and two keep on interchanging to grab the storefront user's attention.)</em><br><br><strong>Message delay</strong><br>Adjust the range bar to determine the delay between the interchange of messages on the browser tab.</td></tr></tbody></table>

### Scroll to top

This setting enables/disables and shows/hides the text.&#x20;

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Enable</td><td>Select this checkbox to enable the scroll to top icon.</td><td></td></tr><tr><td>SVG code</td><td>Add custom SVG code.<br><em>Not: SVG should have width and height attributes.</em></td><td></td></tr><tr><td>Horizontal position</td><td><p>Users can adjust the position from the given options :</p><p>-Left </p><p>-Center </p><p>-Right</p></td><td></td></tr><tr><td>Vertical position</td><td>Adjust the range bar to set the vertical position of icon.</td><td></td></tr></tbody></table>

### Favicon

<table><thead><tr><th width="293"></th><th></th></tr></thead><tbody><tr><td>Icon</td><td>Select any icon to appear as a favicon.</td></tr></tbody></table>

### Checkout

With these settings, you can change the look and feel of the checkout page.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Banner</td><td><p><strong>Background image</strong> </p><p>Upload a background image for the checkout banner section.  </p></td><td></td></tr><tr><td>Logo</td><td>Add your brand’s logo to the banner section.</td><td></td></tr><tr><td>Position</td><td>Select any required position from <strong>Left, Center &#x26; Right</strong></td><td></td></tr><tr><td>Logo size</td><td><p>- Select the logo size from the given options; </p><p>-Small </p><p>-Medium </p><p>-Large </p></td><td></td></tr><tr><td>Main content area</td><td><p><strong>Background image</strong> </p><p>Upload a background image for the main content area. </p><p><br><strong>Background color</strong> </p><p>Select any color for background. <br> <br><strong>Form fields</strong> </p><p>Select form field for the given options; </p><p>-White </p><p>-Transparent </p></td><td></td></tr></tbody></table>

#### Order summary

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background image</td><td>Add background image for the order summary.</td><td></td></tr><tr><td>Background color</td><td>Select any background color.</td><td></td></tr></tbody></table>

#### Typography

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Heading</td><td>Select the suitable font for headings.</td><td></td></tr><tr><td>Body</td><td>Select the suitable font for body.</td><td></td></tr></tbody></table>

#### Colors

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Accents</td><td>Select the suitable colors for accents on the checkout page</td><td></td></tr><tr><td>Buttons</td><td>Select the suitable colors for buttons.</td><td></td></tr><tr><td>Errors</td><td>Select the suitable colors for errors.</td><td></td></tr></tbody></table>