# Theme settings

These settings are the **King** 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:

### **Favicon**

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

### Color schemes

**Default color scheme:** Choose any color scheme to be the default one. 

<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="/files/CaIhRGMZhl8VZl8VSrpk" 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="/files/Mq5UU6V3Gbkvi7w3Hxf6" 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="/files/K3SF2554IsxKYgKifFuq" 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="/files/eBZSNw2J7d375YOAoSr6" 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="/files/qFJiHCtnjPNTymMBC0CH" 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="/files/nv9edNIvxqKrLNLEaYVp" alt=""><figcaption></figcaption></figure>
4. The names in the theme editor should be like this:\
   The format must be: Variant name: Color-code\
   \
   ![](/files/KPQI3hilxaoqUnfEjHfn)
5. It will show like this:<br>

   <figure><img src="/files/HETFDDbLh7DGDYHmwqX1" 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.**


---

# 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://shinedezign.gitbook.io/king/overview/theme-settings.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.