# Theme settings

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

### RTL

**Enable RTL:** Select this checkbox to enable the RTL. Enabling this RTL changes the whole store to the RTL. This feature is helpful with languages like Arabic, Hebrew etc.\
\
**Languages support RTL**: Enter the language code.\
\&#xNAN;*(Note: Enter ISO language code, separate these by a comma. Leave this blank to enable for all languages* [*Check ISO language code*](https://www.loc.gov/standards/iso639-2/php/code_list.php)*.)*

### Global color scheme

You can use the following settings to change the colors of the header, footer, scroll to the top, and badges.

#### Header

<table data-header-hidden><thead><tr><th width="281">Header</th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select any color for the header background.</td></tr><tr><td>Text</td><td>Select any color for the header text.</td></tr><tr><td>Hover</td><td>Select any color that appears on hover of header items.</td></tr><tr><td>Divider</td><td>Select any color for the dividers on the header.</td></tr><tr><td>Icon</td><td>Select any color for the header icons.</td></tr><tr><td>Icon background</td><td>Select any color for the header icons background.</td></tr></tbody></table>

#### Submenu

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color for the submenus background.</td><td></td></tr><tr><td>Text</td><td>Select any color for the submenus text.</td><td></td></tr><tr><td>Hover</td><td>Select any color that appears on hover of submenus.</td><td></td></tr></tbody></table>

#### Footer

<table><thead><tr><th width="286"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select any color for the footer background.</td></tr><tr><td>Text</td><td>Select any color for the footer text.</td></tr><tr><td>Hover</td><td>Select any color that appears on hover of footer items.</td></tr><tr><td>Divider</td><td>Select any color for the dividers on the footer.</td></tr><tr><td>Form background</td><td>Select any color for the form bakground on the footer.</td></tr><tr><td>Form text</td><td>Select any color for the form text on the footer.</td></tr><tr><td>Form border</td><td>Select any color for the form border on the footer.</td></tr></tbody></table>

#### Scroll to top

|            |                                                                      |
| ---------- | -------------------------------------------------------------------- |
| Background | Select any color for the background of the scroll to the top button. |
| Color      | Select any color for the icon of the scroll to the top button.       |

#### Badges

These settings are for the sold-out badges.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color for background of badge.</td><td></td></tr><tr><td>Text</td><td>Select any text color of the badge.</td><td></td></tr></tbody></table>

**Preorder badge**

<table><thead><tr><th width="289"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select any color for background of badge.</td></tr><tr><td>Text</td><td>Select any text color of the badge.</td></tr></tbody></table>

**Custom badge**

<table><thead><tr><th width="291"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select any color for background of badge.</td></tr><tr><td>Text</td><td>Select any text color of the badge.</td></tr></tbody></table>

### Primary color scheme

This section is to set the primary color scheme.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Alternate Background</td><td>Select any color of the alternate background.</td><td></td></tr><tr><td>Gradient</td><td>Select any gradient of the background.</td><td></td></tr><tr><td>Heading</td><td>Select any color of the heading.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text.</td><td></td></tr><tr><td>Link Text</td><td> Select any color of the link text.</td><td></td></tr><tr><td>Hover</td><td>Select any color on the hover.</td><td></td></tr></tbody></table>

**Main button**

This section is to set the color of the button throughout the theme.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the button.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text. </td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr><tr><td>Hover background   </td><td>Select any hover color for the button background.    </td><td></td></tr><tr><td>Hover text</td><td>Select any hover color for the button text.  </td><td></td></tr><tr><td>Hover border</td><td>Select any hover color for the button border.</td><td></td></tr></tbody></table>

**Alternate button**

This section sets the color of the alternate button throughout the theme.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text. </td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr><tr><td>Hover background   </td><td>Select any hover color for the button background.    </td><td></td></tr><tr><td>Hover text</td><td>Select any hover color for the button text.  </td><td></td></tr><tr><td>Hover border</td><td>Select any hover color for the button border.</td><td></td></tr></tbody></table>

#### Product&#x20;

This section is to set the color of the product border.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Border</td><td>Select any color to set the color of the product border.</td><td></td></tr></tbody></table>

#### Discount

This section is to set the color of the discount.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the discount background.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text.</td><td></td></tr></tbody></table>

#### Form Input

This section is to set color of the form inputs.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr></tbody></table>

#### Slider arrows

This section is to set color of the slider arrows.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Icon</td><td>Select any of the icon.</td><td></td></tr></tbody></table>

#### Others

This section is to set color for other section like divider, image background and more.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Divider</td><td>Select any color of the divider.</td><td></td></tr><tr><td>Image background</td><td>Select any color of the image background.</td><td></td></tr><tr><td>Highlight text</td><td>Select any color of the highlight text.</td><td></td></tr></tbody></table>

### Secondary color scheme

This section is to set a secondary color scheme throughout the store.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Alternate Background</td><td>Select any color of the alternate background.</td><td></td></tr><tr><td>Gradient </td><td>Select any gradient of the background.</td><td></td></tr><tr><td>Heading</td><td>Select any color of the <strong>Heading.</strong> </td><td></td></tr><tr><td>Text  </td><td>Select any color of the <strong>Text.</strong></td><td></td></tr><tr><td>Link text</td><td> Select any color of the link text.</td><td></td></tr><tr><td>Hover</td><td>Select any color of the <strong>Hover.</strong></td><td></td></tr></tbody></table>

**Main button**

This section is to set the color of the button throughout the theme.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text  </td><td>Select any color of the Text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr><tr><td>Hover background   </td><td>Select any hover color for the button background.    </td><td></td></tr><tr><td>Hover text</td><td>Select any hover color for the button text.  </td><td></td></tr><tr><td>Hover border</td><td>Select any hover color for the button border.</td><td></td></tr></tbody></table>

**Alternate button**

These settings are to set the color of the alternate button throughout the theme.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text  </td><td>Select any color of the Text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr><tr><td>Hover background   </td><td>Select any hover color for the button background.    </td><td></td></tr><tr><td>Hover text</td><td>Select any hover color for the button text.  </td><td></td></tr><tr><td>Hover border</td><td>Select any hover color for the button border.</td><td></td></tr></tbody></table>

#### Product

This section is to set the color of the product border.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr></tbody></table>

#### Discount

This section is to set the color of the discount.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text.</td><td></td></tr></tbody></table>

#### Form Input

This section is to set the color of the form input.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr></tbody></table>

#### Slider arrows

This section is to set the color of the slider arrows.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Icon</td><td>Select any of the icon.</td><td></td></tr></tbody></table>

#### Others

This section sets color for others like divider, image background, and more.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Divider</td><td>Select any color of the divider.</td><td></td></tr><tr><td>Image background</td><td>Select any color of the image background.</td><td></td></tr><tr><td>Highlight text</td><td>Select any color of the highlight text.</td><td></td></tr></tbody></table>

### Tertiary color scheme

This section is to set the tertiary color scheme throughout the store.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Alternate Background</td><td>Select any color of the alternate background.</td><td></td></tr><tr><td>Gradient </td><td>Select any gradient of the background.</td><td></td></tr><tr><td>Heading</td><td>Select any color of the <strong>Heading.</strong> </td><td></td></tr><tr><td>Text  </td><td>Select any color of the <strong>Text.</strong></td><td></td></tr><tr><td>Link Text</td><td> Select any color of the link text.</td><td></td></tr><tr><td>Hover</td><td>Select any color of the <strong>Hover.</strong></td><td></td></tr></tbody></table>

**Main button**

This section is to set the color of the button throughout the theme.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text  </td><td>Select any color of the Text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr><tr><td>Hover background   </td><td>Select any hover color for the button background.    </td><td></td></tr><tr><td>Hover text</td><td>Select any hover color for the button text.  </td><td></td></tr><tr><td>Hover border</td><td>Select any hover color for the button border.</td><td></td></tr></tbody></table>

**Alternate button**

This section sets the color of the alternate button throughout the store.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text  </td><td>Select any color of the Text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr><tr><td>Hover background   </td><td>Select any hover color for the button background.    </td><td></td></tr><tr><td>Hover text</td><td>Select any hover color for the button text.  </td><td></td></tr><tr><td>Hover border</td><td>Select any hover color for the button border.</td><td></td></tr></tbody></table>

#### Product

This section is to set the color of the product border.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr></tbody></table>

#### Discount

This section is to set the color of the discount.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text.</td><td></td></tr></tbody></table>

#### Form Input

This section is to set the color of the form input.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr></tbody></table>

#### Slider arrows

This section is to set the color of the slider arrows.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Icon</td><td>Select any of the icon.</td><td></td></tr></tbody></table>

#### Others

This section sets the color for others like a divider, image background, and more.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Divider</td><td>Select any color of the divider.</td><td></td></tr><tr><td>Image Background</td><td>Select any color of the image background.</td><td></td></tr><tr><td>Highlight text</td><td>Select any color of the highlight text.</td><td></td></tr></tbody></table>

### Quaternary color scheme

This section sets the color of the quaternary color scheme throughout the store.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Alternate Background</td><td>Select any color of the alternate background.</td><td></td></tr><tr><td>Gradient</td><td>Select any gradient of the background.</td><td></td></tr><tr><td>Heading</td><td>Select any color of the <strong>Heading.</strong> </td><td></td></tr><tr><td>Text  </td><td>Select any color of the <strong>Text.</strong></td><td></td></tr><tr><td>Link text</td><td> Select any color of the link text.</td><td></td></tr><tr><td>Hover</td><td>Select any color of the <strong>Hover.</strong></td><td></td></tr></tbody></table>

**Main button**

This section is to set the color of the button throughout the theme.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text  </td><td>Select any color of the Text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr><tr><td>Hover background   </td><td>Select any hover color for the button background.    </td><td></td></tr><tr><td>Hover text</td><td>Select any hover color for the button text.  </td><td></td></tr><tr><td>Hover border</td><td>Select any hover color for the button border.</td><td></td></tr></tbody></table>

**Alternate button**

This section is to set the color of the alternate button throughout the theme.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text  </td><td>Select any color of the Text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr><tr><td>Hover background   </td><td>Select any hover color for the button background.    </td><td></td></tr><tr><td>Hover text</td><td>Select any hover color for the button text.  </td><td></td></tr><tr><td>Hover border</td><td>Select any hover color for the button border.</td><td></td></tr></tbody></table>

#### Product

This section is to set the color of the product border.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr></tbody></table>

#### Discount

This section is to set the color of the discount.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text.</td><td></td></tr></tbody></table>

#### Form Input

This section is to set the color of the form input.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Text</td><td>Select any color of the text.</td><td></td></tr><tr><td>Border</td><td>Select any color of the border.</td><td></td></tr></tbody></table>

#### Slider arrows

This section is to set the color of the slider arrows.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Background</td><td>Select any color of the background.</td><td></td></tr><tr><td>Icon</td><td>Select any of the icon.</td><td></td></tr></tbody></table>

#### Others

This section sets the color for others, like a divider, image background, and more.

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Divider</td><td>Select any color of the divider.</td><td></td></tr><tr><td>Image Background</td><td>Select any color of the image background.</td><td></td></tr><tr><td>Highlight text</td><td>Select any color of the highlight text.</td><td></td></tr></tbody></table>

### Typography

This setting allows customizing fonts.

<table data-header-hidden><thead><tr><th width="284"></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>Font scale</strong> </p><p>Adjust the slide to set the size  <br> <br><strong>Line height</strong> </p><p>Adjust the line height for headings used in all sections. <br><br><strong>Enable heading uppercase</strong><br>Select this checkbox to show headings in the uppercase.</p></td><td></td></tr><tr><td>Body</td><td><p><strong>Font</strong> </p><p>Select the font of the heading text. </p><p> <br><strong>Font scale</strong> <br>Adjust the slide to set the size. </p><p> </p><p><strong>Line height</strong> </p><p>Adjust the line height for body used in all sections. </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>Product quantity selector</td><td><strong>Desktop</strong><br>Adjust the range bar to select the border radius of the product quantity selector on the desktop view.<br><br><strong>Mobile</strong><br>Adjust the range bar to select the border radius of the product quantity selector on the mobile view.</td></tr></tbody></table>

### Buttons

<table><thead><tr><th width="292"></th><th></th></tr></thead><tbody><tr><td>Enable round button</td><td>Select/deselect this checkbox to show/hide the rounded buttons throughout the store.</td></tr><tr><td>Button radius</td><td>Select from the options small or large to show the relevant button radius.</td></tr><tr><td>Style</td><td>Select from classic or modern to show the buttons.</td></tr><tr><td>Classic button hover</td><td>Select from <strong>None</strong> or <strong>Show arrow</strong> to determine the classic (style) button hover style.</td></tr></tbody></table>

### Animations

<table><thead><tr><th width="293"></th><th></th></tr></thead><tbody><tr><td>Enable animations</td><td>Select/deselect this checkbox to show/hide the animations on the product grids throughout the store.</td></tr></tbody></table>

### Images

Pass through colors

<table><thead><tr><th width="296"></th><th></th></tr></thead><tbody><tr><td>Enable on product images</td><td>Select this checkbox to merge the theme background color with the product images having white color in the background. This setting is deal with light-colored theme backgrounds and product images with white backgrounds.<br></td></tr></tbody></table>

### Breadcrumbs

<table><thead><tr><th width="290"></th><th></th></tr></thead><tbody><tr><td>Enable breadcrumbs</td><td>Select/deselect this checkbox to show/hide the page breadcrumbs.</td></tr></tbody></table>

### 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>Select checkbox to show variant image as color.</td><td></td></tr><tr><td>Color style</td><td>Select from circle, tiles or square to show the swatches style.<br><em>(Note: Tiles is not applicable with the variant image.)</em></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>

### How to set up the color swatch images:

1. Upload swatch image in the Content>Files, as shown below:

<figure><img src="/files/Wyv7xQeXPZ2wPpqPKCc0" alt=""><figcaption></figcaption></figure>

2. Type the variant name(case sensitive) and the image name(case sensitive) in the Custom color codes, as shown below:\
   \
   The variant name on the left side in the theme editor, as shown below :<br>

   <figure><img src="/files/6t3bN0z56g8ArLPVGdPm" alt=""><figcaption></figcaption></figure>
3. Type the color swatch image name including the image extension on the right side in the theme editor, as shown below :

<figure><img src="/files/YWelB1mVwnXFv9IZtLbn" alt=""><figcaption></figcaption></figure>

4\. Type the names, as shown below:\
The format must be->  Variant name: Color-code

<figure><img src="/files/2RFQOenlSVziwDw39z6U" alt=""><figcaption></figcaption></figure>

5. It will show like these:

<figure><img src="/files/RzJpQ6MFZ38CsJTpeiRB" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/qo4Y90tD8ge8PiybHX1u" alt=""><figcaption></figcaption></figure>

### Product

#### **Enable preorder :**&#x20;

Select/deselect this checkbox to show the Preorder button on the products having "continue selling out of stock" checked from the Shopify product page.

<figure><img src="/files/M5YAQjKMTqth7seXuK5y" alt=""><figcaption></figcaption></figure>

**Show saved amount:** Select/deselect this checkbox to show the saved amount on the product page.\
\
**Option style**: Select from Swatch or dropdown to show the product options.

### Quick view

<table><thead><tr><th width="237"></th><th></th></tr></thead><tbody><tr><td>Enable quick view</td><td>Select checkbox to show the quick view icon on products.</td></tr><tr><td>Enable fullwidth</td><td>Select the checkbox to show the quick view in full width.</td></tr><tr><td>Enable product title marquee</td><td>Select the checkbox to show the marquee text of the product name in the quick view.</td></tr><tr><td>Enable description</td><td>Select the checkbox to show the product description in quick view.</td></tr><tr><td>Marquee text opacity</td><td>Adjust the range bar to select the marquee text opacity in the quick view.</td></tr><tr><td>Full width popup animation</td><td>Select the full width popup animation from <strong>boom</strong> or <strong>rings</strong>.</td></tr><tr><td>Gallery style</td><td>Select the gallery style from <strong>list</strong> or <strong>grid.</strong></td></tr><tr><td>Emphasize first image in grid view</td><td>Select the checkbox to emphasize the first image in the grid view of quick view.</td></tr><tr><td>Color scheme</td><td><p>Select the color scheme options from the options; </p><p>-Primary </p><p>-Secondary </p><p>-Tertiary </p><p>-Quaternary </p><p> </p><p>These can be managed from <strong>Theme settings> color schemes.</strong></p></td></tr></tbody></table>

### Product grid

Manage the look and feel of the product grid with the following settings:

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Space between grids desktop</td><td>Adjust the range bar to select the columns gap in product grids on the desktop view.</td><td></td></tr><tr><td>Space between grids mobile</td><td>Adjust the range bar to select the columns gap in product grids on the mobile view.</td><td></td></tr><tr><td>Hover options</td><td><p>Select the hover options from the options below; </p><p>-None </p><p>-Carousel </p><p>-Second Image <br><br><em>Note: The variant's color swatches on the product grids work with the <strong>None</strong> hover options.</em></p></td><td></td></tr><tr><td>Carousel navigation</td><td>Select from arrows or tiles to show the carousel navigation style in the product grids.</td><td></td></tr><tr><td>Enable border</td><td>Select/deselect the checkbox to show/hide product borders. </td><td></td></tr><tr><td>Border width desktop</td><td>Adjust the range bar to select the border width of product grids on the desktop view.</td><td></td></tr><tr><td>Border width mobile</td><td>Adjust the range bar to select the border width of product grids on the mobile view.</td><td></td></tr><tr><td>Show grid shadow</td><td>Select this chieckbox to show the product grid's shadow.</td><td></td></tr><tr><td>Show vendor</td><td>Select/deselect the checkbox to show/hide the product vendor name. </td><td></td></tr><tr><td>Enable quick view</td><td>Select/deselect the checkbox to show/hide a quick view icon from the product grids.</td><td></td></tr><tr><td>Enable ATC button</td><td>Select/deselect the checkbox to show/hide add to cart icon from the product grids. <br><em>(Note: This icon shows on products with one variant only.)</em></td><td></td></tr><tr><td>Show inventory</td><td>Select/deselect this checkbox to show the inventory status of products in the product grids.</td><td></td></tr><tr><td>Low inventory threshold</td><td>Adjust the slider to select the minimum inventory threshold.</td><td></td></tr><tr><td>Enable swatches</td><td>Select/deselect the checkbox to show/hide the color swatches from the product grids.</td><td></td></tr><tr><td>Desktop position</td><td>Select from <strong>On image</strong> or <strong>Below image</strong> to show color swatches on the desktop.</td><td></td></tr><tr><td>Mobile position</td><td>Select from <strong>On image</strong> or <strong>Below image</strong> to show color swatches on the mobile.</td><td></td></tr><tr><td>Product label 1-5</td><td>Add the product labels set up in the metafields as explained below.</td><td></td></tr><tr><td>Badges</td><td><strong>Show sold out badge</strong><br>Select/deselect the checkbox to show/hide the sold-out badge.<br><br><strong>Show price savings</strong><br>Select/deselect the checkbox to show/hide price savings badge.<br><br><strong>Show preorder badge</strong><br>Select/deselect the checkbox to show/hide the preorder badge.</td><td></td></tr><tr><td>Custom badge</td><td><strong>Product tag</strong><br>Add the product tag, for which the custom badge will start showing.<br><br><strong>Badge text</strong><br>Enter the custom badge text.</td><td></td></tr></tbody></table>

#### Product labels:

Enter product labels like custom.product\_label setup from the store settings and then product page meta fields. For more information related to meta fields, check the below details.\
\
\
Firstly, the meta fields needed to be set up in the Store settings> Custom data>Products>Product meta field definitions.

<figure><img src="/files/6e8EhN8OA3CTjnu8mSIv" alt=""><figcaption></figcaption></figure>

Then add the meta field definitions inside Theme settings > Product Card > Product labels.

<figure><img src="/files/Yng4rZJxEytFNLzlYnAN" alt=""><figcaption></figcaption></figure>

The product labels must be set in the products too, as shown below:<br>

<figure><img src="/files/pXd9FOb8UIJBmAAdT9To" alt=""><figcaption></figcaption></figure>

It shows like this on the storefront:<br>

<figure><img src="/files/YBUE1pSZR6264Sh9lf8M" alt=""><figcaption></figcaption></figure>

### Cart&#x20;

<table><thead><tr><th width="235">Cart drawer</th><th></th></tr></thead><tbody><tr><td>Enable</td><td>Select this checkbox to show the cart drawer.</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>Select this checkbox to enable the gift wrapping.</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>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>Empty cart</td><td><strong>Heading</strong><br>Enter any text to appear as a title.<br><br><strong>Menu</strong><br>Choose any menu to display in case of empty cart.<br><em>(Note: This menu won't show dropdown items.)</em></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></tbody></table>

### Search drawer

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>Color scheme</td><td><p>Select the color scheme options from the options; </p><p>-Primary </p><p>-Secondary </p><p>-Tertiary </p><p>-Quaternary </p><p> </p><p>These can be managed from <strong>Theme settings> color schemes.</strong></p></td><td></td></tr><tr><td>Suggestions</td><td><p><strong>Heading</strong><br>Add text to the heading in the search drawer. E.g., Suggestions.<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<br><br><strong>Grid image fit</strong><br>Select the image fit from the following options:<br>- Cover<br>- Contain</p></td><td></td></tr><tr><td>Search results</td><td><p><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 </p><p> <br><strong>Grid image fit</strong><br>Select the image fit from the following options:<br>- Cover<br>- Contain<br></p><p><strong>Article image ratio</strong> </p><p>Select the article image ratio from the given options: </p><p>-Auto </p><p>-Landscape </p><p>-Portrait </p><p>-Square</p></td><td></td></tr></tbody></table>

### Drawer / Popup

This section is to set primary color throughout your scheme.

<table><thead><tr><th width="289"></th><th></th></tr></thead><tbody><tr><td>Drawer</td><td><p><strong>Color scheme</strong><br>Select the color scheme options from the options; </p><p>-Primary </p><p>-Secondary </p><p>-Tertiary </p><p>-Quaternary </p><p> </p><p>These can be managed from <strong>Theme settings> color schemes.</strong></p></td></tr><tr><td>Popup</td><td><p><strong>Color scheme</strong><br>Select the color scheme options from the options; </p><p>-Primary </p><p>-Secondary </p><p>-Tertiary </p><p>-Quaternary </p><p> </p><p>These can be managed from <strong>Theme settings> color schemes.</strong></p></td></tr></tbody></table>

## Google maps

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)&#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.**

## SEO

<table><thead><tr><th width="315"></th><th></th></tr></thead><tbody><tr><td>Disable microdata schema</td><td>Select this checkbox to disable the microdata schema.<br><br><em>(Note: This will remove the schema.org markup from the page. Disable only if you are using a third-party app for SEO.)</em><br>For more info, please go through <a href="https://shinedezign.gitbook.io/yuva-knowledgebase/sections/microdata-schema">docs</a>.</td></tr><tr><td>Remove the collection portion from product URLs for better SEO</td><td>Select this checkbox to remove the collection portion from product URLs for better SEO.</td></tr></tbody></table>

## Social Media

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

### Social Accounts

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Facebook</td><td>Add Link to your <strong>Facebook</strong> Handle.</td><td></td></tr><tr><td>Twitter</td><td>Add Link to your <strong>Twitter</strong> Handle.  </td><td></td></tr><tr><td>Instagram</td><td>Add Link to your <strong>Instagram</strong> Handle. </td><td></td></tr><tr><td>Pinterest</td><td>Add Link to your <strong>Pinterest</strong> Handle.</td><td></td></tr><tr><td>Snapchat</td><td>Add Link to your <strong>Snapchat</strong> Handle.</td><td></td></tr><tr><td>LinkedIn</td><td>Add Link to your <strong>LinkedIn</strong> Handle.</td><td></td></tr><tr><td>TikTok</td><td>Add Link to your <strong>TikTok</strong> Handle.</td><td></td></tr><tr><td>YouTube</td><td>Add Link to your <strong>You Tube</strong> Handle.</td><td></td></tr></tbody></table>

### Newsletter popup

Manage the look and feel of your newsletter pop-ups utilizing the following steps;

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Enable newsletter popup</td><td>Select/deselect the checkbox to enable newsletter popup.</td><td></td></tr><tr><td>Heading</td><td>Add text to display as title on the <strong>Newsletter</strong> popup<strong>.</strong></td><td></td></tr><tr><td>Sub heading</td><td>Add text to display subheading on the <strong>Newsletter</strong> popup<strong>.</strong></td><td></td></tr><tr><td>Description</td><td>Add text to display as brief about the <strong>Newsletter</strong> popup<strong>.</strong></td><td></td></tr><tr><td>Set cookie for newsletter popup (days)</td><td>Adjust the slider to set the time(days) for which you want the cookies to expire.</td><td></td></tr></tbody></table>

### Age verification popup

This shows the popup for age verification. This will prevent visitors from accessing the store until they click the "approve" button.

<table><thead><tr><th width="287"></th><th></th></tr></thead><tbody><tr><td>Enable age verification popup</td><td>Check the box to enable the age verification pop-up on the storefront.</td></tr><tr><td>Logo</td><td>Select any image to show as logo.</td></tr><tr><td>Heading</td><td>Type any text to show as heading on the popup.</td></tr><tr><td>Enable highlight text</td><td>Select the checkbox to show the highlighted text.<br><em>(Note: Highlight text works on bold and italic text of the heading.)</em></td></tr><tr><td>Sub-heading</td><td>Type any text to show as sub-heading on the popup.</td></tr><tr><td>Description</td><td>Type any text to show as description on the popup.</td></tr><tr><td>Approve button text</td><td>Type any text to show above the approve button on the popup.</td></tr><tr><td>Decline button text</td><td>Type any text to show above the decline button on the popup.</td></tr><tr><td>Under 18 title</td><td>Type any text to show as a title on the popup when users click the decline button.</td></tr><tr><td>Under 18 description</td><td>Type any text to show as a description on the popup when users click the decline button.</td></tr><tr><td>Decline button text</td><td>Type any text to show above the decline button on the popup.</td></tr></tbody></table>

### Cookie privacy banner

To make the privacy banner work, users must activate the customer privacy from Shopify admin Online store > Preferences > Customer privacy.

|                       |                                                               |
| --------------------- | ------------------------------------------------------------- |
| Enable privacy banner | Select the checkbox to enable the privacy banner.             |
| Description           | Type any text to show as a description on the privacy banner. |
| Accept button text    | Type any text to show above the accept button.                |
| Decline link text     | Type any text to show as the decline link.                    |

### 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.</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 slider 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 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>


---

# 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/fame-documentations/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.