# 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="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2FVAYJxMKwlWaekMFZkTwn%2Fimage.png?alt=media&#x26;token=fd4592cc-1e08-4f86-ac68-cff36017510d" 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="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2Fcf3hRxRAsZUG5mi2iZag%2Fimage.png?alt=media&#x26;token=596343b2-806b-4afe-901b-e1c23b962113" 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="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2F5jsXgXFTCblZhZ6bCAl5%2Fimage.png?alt=media&#x26;token=c71de5f9-d1c1-46a3-bb80-a100ef09aac9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2FiySzkTVmLwHtqL3UtpVo%2Fimage.png?alt=media&#x26;token=9aecfc8c-3bde-4ff7-bd7b-bbda41e4b029" alt=""><figcaption></figcaption></figure>

5. It will show like these:

<figure><img src="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2FSVQlxmQCLcXTpKchcdH8%2Fimage.png?alt=media&#x26;token=57ada57e-7a17-4abd-b502-1fc0b6a27307" alt=""><figcaption></figcaption></figure>

<figure><img src="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2FlfxNoB3eUQyFQjjvPQsv%2Fimage.png?alt=media&#x26;token=c5e23c8c-173c-4dec-83c5-d9af198a8b07" 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="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2FxQf4EpEQ1eHEuuj0EJz8%2FPreorder.jpg?alt=media&#x26;token=6c9580d1-3595-49b9-913c-e6e31dd5a39f" 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="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2FjDgZ6F4YNo4JhSJx4AMa%2Fimage.png?alt=media&#x26;token=9887a85a-0608-4dd2-8ca6-c826a6d8832d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2FXrqvqmncDh7QWGkTn544%2Fimage.png?alt=media&#x26;token=26fad4e1-94ab-4e0d-8a64-dd75d2fb57f8" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2FNaGahDlX7EvZgjsz8dzs%2Fimage.png?alt=media&#x26;token=5c8dfffa-2b06-488f-bded-375150d63493" alt=""><figcaption></figcaption></figure>

It shows like this on the storefront:<br>

<figure><img src="https://791836378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoGOvtxpVsTGRxlrJ5Xsc%2Fuploads%2Ff7dEU9koJEB0GsqeiRGL%2Fimage.png?alt=media&#x26;token=29d14b05-91df-47c6-bdba-31f125fa7985" 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>