# Theme settings

These settings are the Master theme’s general settings for the Shopify store.

## Layout

**Enable scroll animation**- Tick this checkbox to enable the animations on page scroll.

## **Header & footer color**

<table><thead><tr><th width="213"></th><th></th></tr></thead><tbody><tr><td>Header</td><td><p><strong>Background</strong> </p><p>Choose the background color. </p><p></p><p><strong>Text</strong> </p><p>Choose color for the text. </p><p></p><p><strong>Hover</strong> </p><p>Choose the text color on hover.</p></td></tr><tr><td>Image</td><td><p><strong>Background</strong> </p><p>Choose the background color. </p><p></p><p><strong>Overlay background</strong> </p><p>Choose color for the image overlay. </p><p></p><p><strong>Overlay heading</strong></p><p>Choose color for the image overlay heading text.</p></td></tr><tr><td>Submenu/mobile menu</td><td><p><strong>Background</strong> </p><p>Choose the background color. </p><p></p><p><strong>Text</strong> </p><p>Choose color for the text. </p><p></p><p><strong>Hover</strong> </p><p>Choose the text color on hover. </p><p></p><p><strong>Border</strong> </p><p>Choose the border color of submenus for the mobile view.</p></td></tr><tr><td>Footer</td><td><p><strong>Background</strong> </p><p>Choose the background color. </p><p></p><p><strong>Heading</strong> </p><p>Choose color for the heading text. </p><p></p><p><strong>Text</strong> </p><p>Choose color for the text. </p><p></p><p><strong>Link</strong> </p><p>Choose color for the links. </p><p></p><p><strong>Link hover</strong> </p><p>Choose the links color on hover.</p></td></tr><tr><td>Newsletter</td><td><p><strong>Text</strong> </p><p>Choose color for the text. </p><p><br><strong>Input background</strong><br>Choose the input's background color.<br><br><strong>Button background</strong><br>Choose the button background color.<br><br><strong>Button text color</strong><br>Choose the button text color.<br><br><strong>Button border</strong></p><p>Choose the button border color.<br></p><p><strong>Button hover background</strong></p><p>Choose the button hover background color.<br><br><strong>Button hover text color</strong><br>Choose the button hover text color.<br><br>Bu<strong>tton hover border</strong><br>Choose the button hover border color.<br></p><p><strong>Button background</strong> </p><p>Choose the button background color.</p></td></tr></tbody></table>

## Colors

**Color scheme**

<table><thead><tr><th width="220"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Choose the background color. </td></tr><tr><td>Background gradient</td><td>Choose the background gradient color. </td></tr><tr><td>Alternate background</td><td>Choose the alternate background color. </td></tr><tr><td>Card background</td><td>Choose the card background color. </td></tr><tr><td>Card text</td><td>Choose the card text color. </td></tr><tr><td>Border</td><td>Choose the border color. </td></tr><tr><td>Content</td><td><strong>Sub heading</strong><br>Choose the sub heading text color.<br><br><strong>Heading</strong><br>Choose the heading text color.<br><br><strong>Text</strong><br>Choose the text color.<br><br><strong>Link</strong><br>Choose the link color.<br><br><strong>Marquee color</strong><br>Choose the marquee text color.<br><br><strong>Marquee background</strong><br>Choose the marquee background color.<br><br><strong>Highlight background</strong><br>Choose the highlight background color.<br><br><strong>Highlight color</strong><br>Choose the highlight text color.</td></tr><tr><td>Primary &#x26; Secondary button</td><td><strong>Background</strong><br>Choose the button background color.<br><br><strong>Border</strong><br>Choose the button border color.<br><br><strong>Text</strong><br>Choose the button text color.<br><br><strong>Hover background</strong><br>Choose the button hover background color.<br><br><strong>Hover border</strong><br>Choose the button hover border color.<br><br><strong>Hover text</strong><br>Choose the button hover  text color.</td></tr><tr><td>Image</td><td><p><strong>Background</strong> </p><p>Choose the background color. </p><p></p><p><strong>Overlay background</strong> </p><p>Choose color for the image overlay. </p><p></p><p><strong>Overlay heading</strong></p><p>Choose color for the image overlay heading text.</p></td></tr><tr><td>Input</td><td><strong>Text</strong><br>Choose the input text color.<br><br><strong>Background</strong><br>Choose the input background color.<br><br><strong>Border</strong><br>Choose the input border color.</td></tr><tr><td>Slider arrow/dots</td><td><strong>Color</strong><br>Choose the arrow/icon's text color.<br><br><strong>Background</strong><br>Choose the arrow/icon's background color.<br><br><strong>Border</strong><br>Choose the arrow/icon's border color.</td></tr><tr><td>Product card</td><td><strong>Text</strong><br>Choose the product card's text color.<br><br><strong>Background</strong><br>Choose the product card's background color.<br><br><strong>Border</strong><br>Choose the product card's border color.</td></tr></tbody></table>

**Badges**

<table><thead><tr><th width="220"></th><th></th></tr></thead><tbody><tr><td>Sale badge text</td><td>Choose the sale badge text color.</td></tr><tr><td>Sale badge background</td><td>Choose the sale badge background color.</td></tr><tr><td>Sold-out badge text</td><td>Choose the sold-out badge text color.</td></tr><tr><td>Sold-out badge background</td><td>Choose the sold-out badge background color.</td></tr><tr><td>Preorder badge text</td><td>Choose the preorder badge text color.</td></tr><tr><td>Preorder badge background</td><td>Choose the preorder badge background color.</td></tr><tr><td>Custom badge text</td><td>Choose the custom badge text color.</td></tr><tr><td>Custom badge background</td><td>Choose the custom badge background color.</td></tr><tr><td>Product discount text</td><td>Choose the product discount's text color.</td></tr><tr><td>Site overlay</td><td>Overlay<br>Choose the overlay color.</td></tr></tbody></table>

## **Typography**

<table data-header-hidden><thead><tr><th width="218"></th><th></th></tr></thead><tbody><tr><td>Heading</td><td><p><strong>Font</strong> </p><p>Choose the font of the heading text. </p><p></p><p><strong>Font scale</strong> </p><p>Adjust the range bar to set the font size scale. </p><p></p><p><strong>Line height</strong> </p><p>Adjust the line height for headings used in all sections. </p><p></p><p><strong>Letter spacing</strong> </p><p>Choose the letter spacing from the multiple options like -75 to 250.</p></td></tr><tr><td>Body</td><td><p><strong>Font</strong> </p><p>Choose the font of the body text. </p><p></p><p><strong>Font scale</strong> </p><p>Adjust the range bar to set the font size scale. </p><p></p><p><strong>Line height</strong> </p><p>Adjust the line height for body fonts used in all sections. </p><p></p><p><strong>Letter spacing</strong> </p><p>Choose the letter spacing from the multiple options like -75 to 250.</p></td></tr><tr><td>Accents</td><td><p><strong>Font</strong> </p><p>Choose the font of the accents text. </p><p></p><p><strong>Font scale</strong> </p><p>Adjust the range bar to set the font size scale. </p><p></p><p><strong>Line height</strong> </p><p>Adjust the line height for accents used in all sections. </p><p></p><p><strong>Letter spacing</strong> </p><p>Choose the letter spacing from the multiple options like -75 to 250.</p></td></tr></tbody></table>

## **Button**

<table data-header-hidden><thead><tr><th width="221"></th><th></th></tr></thead><tbody><tr><td>Font family</td><td>Choose the font family from the heading or body fonts.</td></tr><tr><td>Text transform</td><td>Choose the text transform options from uppercase or capitalize.</td></tr></tbody></table>

## Radius

<table><thead><tr><th width="229"></th><th></th></tr></thead><tbody><tr><td>Button</td><td>Adjust the range bar to determine the button's radius.</td></tr><tr><td>Input</td><td>Adjust the range bar to determine the input field's radius.</td></tr><tr><td>Card</td><td>Adjust the range bar to determine the card's radius.</td></tr><tr><td>Block</td><td>Adjust the range bar to determine the block's radius.</td></tr><tr><td>Slider arrow</td><td>Adjust the range bar to determine the slider arrow's radius.</td></tr><tr><td>Drawer radius</td><td>Adjust the range bar to determine the drawer's radius.</td></tr></tbody></table>

## **Parallax image**

<table data-header-hidden><thead><tr><th width="229"></th><th></th></tr></thead><tbody><tr><td>Desktop height</td><td>Choose from 500px,600px or 700px to determine the parallax image height on the desktop view.</td></tr><tr><td>Mobile height</td><td>Choose from 400px,500px or 600px to determine the parallax image height on the mobile view.</td></tr></tbody></table>

## **Product**

<table data-header-hidden><thead><tr><th width="233"></th><th></th></tr></thead><tbody><tr><td>Enable preorder</td><td>Tick the checkbox to enable the preorder. Preorder will work when, 'continue selling when out of stock' option is enabled. <img src="https://shopifythemes-amuseds-organizati.gitbook.io/~gitbook/image?url=https%3A%2F%2F463326118-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FANGyEngmbww2xLNCAhAD%252Fuploads%252FSQhApE9xnwR2HHoj6slq%252Fimage.png%3Falt%3Dmedia%26token%3De2f055e8-e173-44f7-bc60-cf7eb4b0f479&#x26;width=300&#x26;dpr=4&#x26;quality=100&#x26;sign=1ea2d9c5&#x26;sv=1" alt=""></td></tr><tr><td>Show saved amount</td><td>Tick the checkbox to show the saved amount i.e. difference between the <strong>Sale</strong> price and <strong>Compare</strong> price.</td></tr></tbody></table>

## **Product card**

<table data-header-hidden><thead><tr><th width="233"></th><th></th></tr></thead><tbody><tr><td>Font type</td><td>Choose the font family from the heading or body fonts.</td></tr><tr><td>Grid image ratio</td><td>Choose the image ratio from the following options: -Auto -Landscape -Portrait -Square</td></tr><tr><td>Enable quick view</td><td>Tick this checkbox to enable the quick view.</td></tr><tr><td>Show quick view on mobile</td><td>Tick this checkbox to show the quick view in the grid on the mobile view. <em>(Note: To show quick view on mobile, it must be enabled from the above setting.)</em></td></tr><tr><td>Enable border</td><td>Tick this checkbox to show border around products.</td></tr><tr><td>Enable card background</td><td>Tick this checkbox to show background products.</td></tr><tr><td>Show second image on hover</td><td>Tick this checkbox to show the second image on product hover.</td></tr><tr><td>Show product vendor</td><td>Tick this checkbox to show the product vendor name in the grid.</td></tr><tr><td>Show price savings</td><td>Tick this checkbox to show the product savings amount in the grid(which is calculated from the product compare and sale price.)</td></tr><tr><td>Show product inventory</td><td>Tick this checkbox to show the product inventory in the grid. <em>Note: To set it up, go to the 'theme Settings > Product Inventory'.</em></td></tr><tr><td>Low inventory threshold</td><td>Adjust the range bar to determine the threshold limit in case of low inventory.</td></tr><tr><td>Style</td><td><strong>In stock</strong><br>Choose a color to show the in stock status of product.<br><br><strong>Low stock</strong><br>Choose a color to show the low stock status of product.<br><br><strong>Out of stock</strong><br>Choose a color to show the out of stock status of product.<br><br><strong>Re stock</strong><br>Choose a color to show the re-stock status of product.</td></tr><tr><td>Enable swatches</td><td>Tick this checkbox to show the product swatches in the product grid.</td></tr></tbody></table>

## **Blogs posts**

<table data-header-hidden><thead><tr><th width="241"></th><th></th></tr></thead><tbody><tr><td>Grid image ratio</td><td>Choose the image ratio from the following options: <br>-Auto <br>-Landscape <br>-Portrait <br>-Square</td></tr></tbody></table>

## **Product badges**

<table data-header-hidden><thead><tr><th width="237"></th><th></th></tr></thead><tbody><tr><td>Sale badge</td><td><p><strong>Show 'Sale' badge</strong> </p><p>Tick this checkbox to show the 'Sale' badge on product grids.</p></td></tr><tr><td>Sold out badge</td><td><p><strong>Show 'Sold out' badge</strong> </p><p>Tick this checkbox to show the 'Sold out' badge.</p></td></tr><tr><td>Preorder badge</td><td><p><strong>Show 'Preorder' badge</strong> </p><p>Tick this checkbox to show the preorder badge on the grids for products having preorder enabled from the theme settings.</p></td></tr><tr><td>Custom badge</td><td><p><strong>Show custom badge</strong> </p><p>Tick this checkbox to show the custom badge based on the product tags added below. </p><p><br><strong>Badge text</strong> </p><p>Add the custom badge text.<br></p><p><strong>Product tag</strong> </p><p>Add the product tags added in the products to show custom badge.  </p></td></tr></tbody></table>

## **Swatches**

<table data-header-hidden><thead><tr><th width="233"></th><th></th></tr></thead><tbody><tr><td>Show variant image as color</td><td>Check this checkbox to show variant image instead of the color swatches.</td></tr><tr><td>Color options name</td><td>Add the product option name that holds the colors. E.g.: Color, Colour, Material, etc.</td></tr><tr><td>Custom color codes/images</td><td><p>Enter the custom color codes of the swatches using the hex colors. </p><p></p><p><strong>To add a color code with the option name:</strong> <br><em>For example:</em> Chilli: #ff0000 <br><em>Here the 'Chilli' is the variant name.</em> <br>For hex color codes, refer to <a href="https://htmlcolorcodes.com/">codes.</a> </p></td></tr><tr><td>Size options name</td><td>Add the product option name that that holds the size. E.g.: Size, Taille, etc.</td></tr></tbody></table>

## **Cart**

<table data-header-hidden><thead><tr><th width="236"></th><th></th></tr></thead><tbody><tr><td>Enable cart drawer</td><td>Tick this checkbox to enable the cart drawer.</td></tr><tr><td>Enable cart notes</td><td>Tick this checkbox to show the cart notes in the cart drawer.</td></tr><tr><td>Gift wrap</td><td><p><strong>Enable gift wrap</strong> </p><p>Tick this checkbox to enable the gift wrap feature in the cart. </p><p></p><p><strong>Product</strong> </p><p>Choose any product to add as a gift wrap in the cart. </p><p></p><p><strong>Text</strong> </p><p>Type any text to show with the gift wrap checkbox.</p></td></tr><tr><td>Shipping bar</td><td><p><strong>Enable shipping bar</strong> </p><p>Tick 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><p></p><p><strong>Minimum shipping price</strong> </p><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><p></p><p><strong>Message</strong> </p><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><p></p><p><strong>Success message</strong> </p><p>Enter text to show the success message after the user has reached the minimum shipping price.</p></td></tr><tr><td>Cart recommendations</td><td><strong>Enable cart recommendations</strong><br>Select this checkbox to enable the cart recommendations in the cart drawer.<br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Products</strong><br>Choose the products list.</td></tr></tbody></table>

## **Search drawer**

<table data-header-hidden><thead><tr><th width="235"></th><th></th></tr></thead><tbody><tr><td>Enable search drawer</td><td>Tick this checkbox to enable the search drawer on click of search icons.</td></tr><tr><td>Enable recent search</td><td>Tick this checkbox to enable the recent searches view in the search drawer.</td></tr><tr><td>Enable related queries</td><td>Tick this checkbox to enable the related queries view in the search drawer.</td></tr><tr><td>Enable collections</td><td>Tick this checkbox to enable the collections search in the search drawer.</td></tr><tr><td>Enable articles</td><td>Tick this checkbox to enable the articles search in the search drawer.</td></tr><tr><td>Enable pages</td><td>Tick this checkbox to enable the page search in the search drawer.</td></tr><tr><td>Grid image ratio</td><td>Choose the image ratio from the following options: -Auto -Landscape -Portrait -Square</td></tr><tr><td>Popular categories</td><td><p>Enable popular categories<br><br><strong>Heading</strong> </p><p>Type heading text of the popular categories in the search drawer. </p><p></p><p><strong>Collections</strong></p><p>Choose collections list to show as popular categories in the search drawer.</p></td></tr><tr><td>Suggestions</td><td><p><strong>Enable suggestions</strong> </p><p>Tick this checkbox to enable the suggestions view in the search drawer. </p><p></p><p><strong>Heading</strong> </p><p>Type heading text of the suggestions in the search drawer. </p><p></p><p><strong>Product</strong> </p><p>Choose products to show as suggestions in the search drawer.</p></td></tr></tbody></table>

## Drawer/popup

<table data-header-hidden><thead><tr><th width="238"></th><th></th></tr></thead><tbody><tr><td>Drawer</td><td><p><strong>Color scheme</strong> </p><p>Select the color scheme.</p><p><em>Note: These can be managed from Theme settings> Color schemes.</em></p></td></tr><tr><td>Popup</td><td><p><strong>Color scheme</strong> </p><p>Select the color scheme.</p><p><em>Note: These can be managed from Theme settings> Color schemes.</em></p></td></tr></tbody></table>

## **Social media**

<table data-header-hidden><thead><tr><th width="237"></th><th></th></tr></thead><tbody><tr><td>X (formerly Twitter)</td><td>Add link to your <strong>Twitter</strong> handle</td></tr><tr><td>Facebook</td><td>Add link to your <strong>Facebook</strong> handle.</td></tr><tr><td>Pinterest</td><td>Add link to your <strong>Pinterest</strong> handle.</td></tr><tr><td>Instagram</td><td>Add link to your <strong>Instagram</strong> handle.</td></tr><tr><td>TikTok</td><td>Add link to your <strong>TikTok</strong> handle.</td></tr><tr><td>Tumblr</td><td>Add link to your <strong>Tumblr</strong> handle.</td></tr><tr><td>Snapchat</td><td>Add link to your <strong>Snapchat</strong> handle.</td></tr><tr><td>YouTube</td><td>Add link to your <strong>YouTube</strong> handle.</td></tr><tr><td>Vimeo</td><td>Add link to your <strong>Vimeo</strong> handle.</td></tr></tbody></table>

## **Newsletter popup**

<table data-header-hidden><thead><tr><th width="238"></th><th></th></tr></thead><tbody><tr><td>Enable newsletter popup</td><td>Choose the checkbox to display a newsletter pop-up on the storefront.</td></tr><tr><td>Image</td><td>Choose an image for your newsletter section.</td></tr><tr><td>Heading</td><td>Type text to display as a title on the “Newsletter pop-up” section.</td></tr><tr><td>Description</td><td>Type text to display as a brief about the newsletter section.</td></tr><tr><td>Set cookie for newsletter popup (days)</td><td>Set the time (days) for which you want the cookies to expire. For example, if you set the time as two days, and the user closes the newsletter popup or submits their email for subscription, after two days, the popup will reappear on the storefront for that user.</td></tr></tbody></table>

## **Scroll to top**

<table data-header-hidden><thead><tr><th width="251"></th><th></th></tr></thead><tbody><tr><td>Enable scroll to top</td><td>Select this checkbox to enable the scroll to top icon.</td></tr><tr><td>Position</td><td><p>Users can adjust the position from the given options :</p><p>-Left</p><p>-Center</p><p>-Right</p></td></tr><tr><td>Position bottom</td><td>Adjust the range bar to determine the icon's space gap from the bottom.</td></tr><tr><td>Colors</td><td><strong>Background</strong> <br>Choose any background color.<br><br><strong>Icon</strong> <br>Choose any icon's color.</td></tr></tbody></table>

## Google map

Google maps API key: Enter the Google maps **API** key.

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)

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.**

   **Creating API keys:**

   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.**

## **Favicon**

<table data-header-hidden><thead><tr><th width="272"></th><th></th></tr></thead><tbody><tr><td>Icon</td><td>Choose any image for the favicon.</td></tr></tbody></table>