> For the complete documentation index, see [llms.txt](https://shinedezign.gitbook.io/metro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shinedezign.gitbook.io/metro/overview/theme-settings.md).

# Theme settings

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

## Configure theme settings

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

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

Customize the sections by utilizing the settings described below:

## **Favicon**

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

## Colors

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

<table><thead><tr><th width="253"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select the background color.</td></tr><tr><td>Background gradient</td><td>Select gradient for the background color.</td></tr><tr><td>Alternate background</td><td>Select an alternate background color.</td></tr><tr><td>Border</td><td>Select color for the border.</td></tr><tr><td>Content </td><td><strong>Heading</strong><br>Select color for the heading text.<br><br><strong>Text</strong><br>Select color for the text.<br><br><strong>Link</strong><br>Select color for the links.<br><br><strong>Link hover</strong><br>Select color for the links hover.</td></tr><tr><td>Primary &#x26; Secondary button</td><td><strong>Background</strong><br>Select the button background color.<br><br><strong>Text</strong><br>Select the button label color.<br><br><strong>Border</strong><br>Select the button border's color.<br><br><strong>Hover background</strong><br>Select the button's background color on hover.<br><br><strong>Hover text</strong><br>Select the button's text color on hover.<br><br><strong>Hover border</strong><br>Select the button's border color on hover.</td></tr><tr><td>Card</td><td><strong>Background</strong><br>Select the card's background color.<br><br><strong>Heading</strong><br>Select color for the card's heading text.<br><br><strong>Text</strong><br>Select color for the card's description text.<br><br><strong>Border</strong><br>Select the card's border color.</td></tr><tr><td>Product card</td><td><strong>Background</strong><br>Select the card's background color.<br><br><strong>Heading</strong><br>Select color for the title text.</td></tr><tr><td>Forms and inputs</td><td><strong>Background</strong><br>Select the input field's background color.<br><br><strong>Text</strong><br>Select the input field's text color.<br><br><strong>Border</strong><br>Select the input field's border color.</td></tr><tr><td>Swiper navigation</td><td><strong>Background</strong><br>Select the slider arrow's background color.<br><br><strong>Color</strong><br>Select the slider arrow's text color.</td></tr><tr><td>Media</td><td><strong>Background</strong><br>Select the media's background color.<br><br><strong>Overlay text</strong><br>Select the media's overlay text color.<br><br><em>(Note: The image overlay colors work for the images/video's, which are mandatory for the sections.)</em></td></tr><tr><td>Drawer and popup</td><td><strong>Overlay background</strong><br>Select the overlay color. It appears on opening the menus and drawers/popups.<br><br><strong>Overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.</td></tr><tr><td>Badges</td><td><strong>Sale/Pre order/Sold out/New/Custom</strong><br><strong>Background</strong><br>Select any color for the background of badges.<br><br><strong>Text</strong><br>Select any color for the text of badges.</td></tr><tr><td>Other</td><td><strong>Keyboard focus</strong><br>Select the keyboard focus color. This appears in accessing the theme via keyboard tabs.</td></tr><tr><td>Alerts</td><td><strong>Success</strong><br>Select any color for the text of success messages.<br><br><strong>Success background</strong><br>Select any color for the background of success messages.<br><br><strong>Warning</strong><br>Select any color for the text of success messages.<br><br><strong>Warning background</strong><br>Select any color for the background of warning messages.<br><br><strong>Error</strong><br>Select any color for the text of error messages.<br><br><strong>Error background</strong><br>Select any color for the background of error messages.</td></tr></tbody></table>

## Header

<table><thead><tr><th width="250"></th><th></th></tr></thead><tbody><tr><td>Typography</td><td><p>First/Second and Third level menus<br><strong>Font family</strong><br>Choose the first level menus font family from the following options:</p><p>- Heading <br>- Body <br>- Accent <br>(<em><strong>Note</strong>: These fonts can be changed in theme settings>typography.)</em><br><br><strong>Font size</strong><br>Select the font size from the following options:<br>- Extra small
<br>- Small
<br>- Regular
<br>- Medium
<br>- Large
<br>- Extra large
</p></td></tr><tr><td>Colors</td><td><p>Header<br><strong>Text</strong><br>Select the header's text color.<br><br><strong>Text hover</strong><br>Select the header's text color on hover.<br><br><strong>Background</strong><br>Select the header's background color.<br><br><strong>Border</strong><br>Select the header's border color.<br><br>Submenus<br><strong>Text</strong><br>Select the submenus text color.<br><br><strong>Text hover</strong><br>Select the submenus text color on hover.<br><br><strong>Background</strong><br>Select the submenus background color.<br><br>Transparent header</p><p><strong>Text/icon</strong><br>Select the text color to display on the transparent header.</p></td></tr><tr><td>Mobile drawer</td><td><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.</td></tr><tr><td>Currency/Language selector(header)</td><td><strong>Background</strong><br>Select the background color of selector.<br><br><strong>Text</strong><br>Select the text color of selector.</td></tr></tbody></table>

## Typography

This setting allows customizing fonts.

<table data-header-hidden><thead><tr><th width="260"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Headings</td><td><p><strong>Font</strong> </p><p>Select the font of the heading text.<br><br><strong>Font size scale</strong> </p><p>Adjust the range bar to set the font size scale for desktop.<br><br><strong>Mobile font size scale</strong></p><p>Adjust the range bar to set the font size scale for mobile.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the available list of options. <br><br><strong>Uppercase headings</strong><br>Select this checkbox to show headings in uppercase.</p></td><td></td></tr><tr><td>Body</td><td><p><strong>Font</strong> </p><p>Select the font of the body text.<br><br><strong>Font size scale</strong> </p><p>Adjust the range bar to set the font size scale.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the available list of options.</p></td><td></td></tr><tr><td>Highlight text</td><td><p><strong>Font</strong> </p><p>Select the font of the accents text.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the available list of options.</p></td><td></td></tr></tbody></table>

## Buttons

<table><thead><tr><th width="216"></th><th></th></tr></thead><tbody><tr><td>Font</td><td><p>Choose the text font family from the following options:</p><p>- Heading <br>- Body <br>- Highlight<br>(<em><strong>Note</strong>: These fonts can be changed in theme settings>typography.)</em></p></td></tr><tr><td>Text transform</td><td><p>Choose the button's font style from the following options:</p><p>- UPPERCASE<br>- lowercase<br>- Capitalize<br>- Default</p></td></tr><tr><td>Border radius</td><td>Adjust the range bar to determine the border radius.</td></tr></tbody></table>

## Border radius

<table><thead><tr><th width="221"></th><th></th></tr></thead><tbody><tr><td>Forms &#x26; inputs</td><td>Adjust the range bar to determine the border radius of forms and inputs.</td></tr><tr><td>Drawer/popup</td><td>Adjust the range bar to determine the border radius of drawers and popups..</td></tr><tr><td>Others</td><td>Adjust the range bar to determine the border radius of others like product comparison table.</td></tr></tbody></table>

## Product

*(**Note**: By enabling this, you can copy the section id of the section you want to link with interlink tabs. Section id is visible on the product page only. It work for a few sections only.)*

<table><thead><tr><th width="227"></th><th></th></tr></thead><tbody><tr><td>Show section id clipboard</td><td>Select this checkbox to show the section ID on product page.</td></tr></tbody></table>

## Product card

<table><thead><tr><th width="200.666748046875"></th><th></th></tr></thead><tbody><tr><td></td><td><p><strong>Font family</strong><br>Choose the text font family from the following options:</p><p>- Heading <br>- Body <br>- Highlight<br>(<em><strong>Note</strong>: These fonts can be changed in theme settings>typography.)</em><br><br><strong>Hover style</strong><br>Choose the card hover style from below options:<br>- None<br>- Color swatches<br>- Second image<br>- All<br><br><strong>Style</strong><br>Choose the product card style from below options:<br>- Card<br>- Classic<br><br><strong>Quick view visibility</strong><br>Choose the Quick view visibility from below options:<br>- None<br>- Always, desktop only<br>- On hover: desktop, always: mobile<br>- Always: desktop and mobile<br><br><strong>Content alignment</strong><br>Choose the alignment from below options:<br>- Left<br>- Center<br>- Right<br>- Justify<br><br><strong>Border radius</strong><br>Adjust the range bar to determine the card's radius.</p></td></tr><tr><td>Product info</td><td><strong>Show vendor</strong><br>Select this checkbox to show the product vendor name.<br><br><strong>Swatches count</strong><br>Adjust the range bar to determine the count of swatches to show in product card.<br><br><strong>Hide single swatch</strong><br>Select this checkbox to hide color swatches, if there is only one swatch.<br><br><strong>Price varies based on</strong><br>Choose the product card price options from below:<br>- Show min price (e.g: From $15)<br>- Show max price(e.g: $15)<br><br><strong>Show pickup availability</strong><br>Select this checkbox to show the pickup availability based on store locator. (Note: Set up the store locator in 'Overlay group' for it's functionality.)<br><br><strong>ATC visibility</strong><br>Choose the ATC visibility and options from below options:<br>- None<br>- Text always<br>- Icon always</td></tr><tr><td>Badges</td><td><strong>Style</strong><br>Choose the style from below options:<br>- Vertical<br>- Horizontal<br><br><strong>Badge position</strong><br>Choose the badge position from below options:<br>- Left<br>- Right</td></tr><tr><td>Sale badge</td><td><strong>Show 'Sale' badge</strong><br>Select this checkbox to show the 'Sale' badge based on the conditions selected below.<br>(<em><strong>Note</strong>: The sale badge shows on the products where the compare price is defined from the Shopify product side.)</em><br><br><strong>Discount type</strong><br>Select from the options to determine the discount options:<br>- Text<br>- Money($)<br>- Percentage(%)<br>- Text with money<br>- Text with percentage</td></tr><tr><td>Sold out badge</td><td><strong>Show sold out badge</strong><br>Select this checkbox to show the ' Sold out ' badge.</td></tr><tr><td>Preorder badge</td><td><p><strong>Show preorder badge</strong><br>Select this checkbox to show the preorder badges on the product grids <br><em>(<strong>Note</strong>: This preorder shows for the products whose ' Continue selling out of stock' is checked from the admin product side.)</em></p><p></p><p><img src="/files/5aB4PauRKxPvDhvdOph9" alt=""><br></p></td></tr><tr><td>Custom badge</td><td><strong>Product tags</strong><br>Add custom labels in the product tags. Use comma separated list for these tags.<br><br><strong>Custom badges text</strong><br>Add custom badge text in this field. The custom labels will start showing on the storefront. Use comma separated list for these badges.</td></tr></tbody></table>

#### Steps to enable preorder:

This preorder shows for the products whose ' Continue selling out of stock' is checked from the admin product side.

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

## Product compare

This allow comparison of product fields only.

<table><thead><tr><th width="225.1112060546875"></th><th></th></tr></thead><tbody><tr><td>Enable product compare</td><td>Select this checkbox to show the product comparison in product grid.</td></tr><tr><td>Compare toggle</td><td>Choose the toggle options from below:<br>- None<br>- Show- Switched on by default<br>- Show- Switched off by default</td></tr><tr><td>Max product in compare</td><td>Adjust range bar to determine the max number of products in compare.</td></tr></tbody></table>

## Social media

<table><thead><tr><th width="234"></th><th></th></tr></thead><tbody><tr><td>Social accounts</td><td>These options are to show the merchant's social networking pages.<br><br><strong>Facebook</strong><br>Enter the Facebook account link.<br><br><strong>X (formerly Twitter)</strong><br>Enter the Twitter account link.<br><br><strong>Instagram</strong><br>Enter the Instagram account link.<br><br><strong>YouTube</strong><br>Enter the YouTube account link.<br><br><strong>TikTok</strong><br>Enter the TikTok account link.<br><br><strong>Snapchat</strong><br>Enter the Snapchat account link.<br><br><strong>Pinterest</strong><br>Enter the Pinterest account link.<br><br><strong>Tumblr</strong><br>Enter the Tumblr account link.<br><br><strong>Vimeo</strong><br>Enter the Vimeo account link.</td></tr><tr><td>Sharing options</td><td><strong>Share layout</strong><br>Choose share layout from below options:<br>- Social icons<br>- Share link<br><em>(<strong>Note</strong>: On supported devices, clicking the link will open the native share dialog using the browser's share feature.)</em></td></tr></tbody></table>

## Search/ Search drawer

<table><thead><tr><th width="211"></th><th></th></tr></thead><tbody><tr><td>Color scheme</td><td>Choose color scheme for the search drawer.</td></tr><tr><td>Search suggestions</td><td><strong>Enable predictive search</strong><br>Select this checkbox to enable the predictive search.<br><br><strong>Enable recent searches</strong><br>Select this checkbox to enable the recent searches.</td></tr><tr><td>Search results</td><td><strong>Aspect ratio</strong><br>Choose the images ratio from below options:<br>- Adapt to image<br>- Square<br>- Portrait<br>- Portrait slim<br>- Landscape</td></tr><tr><td>Popular categories</td><td><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Heading size</strong><br>Select the font size from the following options:<br>- Extra small
<br>- Small
<br>- Regular
<br>- Medium
<br>- Large
<br>- Extra large
<br><br><strong>Collections</strong><br>Choose the collections list from the store.<br><br><strong>Aspect ratio</strong><br>Choose the images ratio from below options:<br>- Adapt to image<br>- Square<br>- Portrait<br>- Portrait slim<br>- Landscape</td></tr><tr><td>Recommendations</td><td><strong>Enable recommendations</strong><br>Select this checkbox to show the recommended list of pages via menus.<br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Heading size</strong><br>Select the font size from the following options:<br>- Extra small
<br>- Small
<br>- Regular
<br>- Medium
<br>- Large
<br>- Extra large<br><br><strong>Menu</strong><br>Choose any menu to show its first level menus.</td></tr><tr><td>Product recommendations</td><td><strong>Enable product recommendations</strong><br>Select this checkbox to show the recommended list of products.<br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Heading size</strong><br>Select the font size from the following options:<br>- Extra small
<br>- Small
<br>- Regular
<br>- Medium
<br>- Large
<br>- Extra large<br><br><strong>Product list</strong><br>Choose the products list from the store.</td></tr></tbody></table>

## Internationalization

<table><thead><tr><th width="235"></th><th></th></tr></thead><tbody><tr><td>Enable currency selector</td><td>Select this check box to show the location/countries selector.<br><em>( Note: For more info, go through</em> <a href="https://help.shopify.com/en/manual/international/languages/manage-languages"><em>location</em></a> <em>and</em> <a href="https://help.shopify.com/en/manual/international/pricing/set-up-local-currencies"><em>currency</em></a><a href="https://help.shopify.com/en/manual/markets/pricing/set-up-local-currencies"><em>.</em></a><em>)</em></td></tr><tr><td>Enable language selector</td><td>Select this check box to show the language selector.<br><em>( Note: For more info, go through</em> <a href="https://help.shopify.com/en/manual/international/languages/manage-languages"><em>location</em></a> <em>and</em> <a href="https://help.shopify.com/en/manual/international/pricing/set-up-local-currencies"><em>currency</em></a><a href="https://help.shopify.com/en/manual/markets/pricing/set-up-local-currencies"><em>.</em></a><em>)</em></td></tr><tr><td></td><td></td></tr></tbody></table>

## Cart

<table><thead><tr><th width="224"></th><th></th></tr></thead><tbody><tr><td>Style</td><td>Choose the cart style from the following options: <br>- Drawer <br>- Page<br>- Popup notification</td></tr><tr><td>Shipping bar</td><td><p><em>(Note: This feature only works with a shipping method. If you're using multiple shipping methods, it might show false values to the customer.)</em><br><br><strong>Enable shipping bar</strong><br>Select this checkbox to enable/disable the shipping bar on the cart drawer.<br><br><strong>Minimum shipping price</strong><br>Type any price for providing free shipping to the customers. After reaching this price, the user will be shown a success message.</p><p><em>(Note: Users must write a number, no letters or special characters.)</em><br><br><strong>Message</strong><br>Type any relevant message to notify users about the amount saved in this field.</p><p><em>(Note: Use ||amount|| to display the amount within the message.)</em><br><br><strong>Success message</strong><br>Enter text to show the success message after the user has reached the minimum shipping price.</p></td></tr><tr><td>Gift wrap</td><td><strong>Enable gift wrap</strong><br>Tick this checkbox to show the gift wrap in the cart drawer.<br><br><strong>Product</strong><br>Select any product to include in the gift wrap.<br><br><strong>Text</strong><br>Type any text to show with the gift wrapping checkbox.</td></tr></tbody></table>

## Drawers

<table><thead><tr><th width="235.333251953125"></th><th></th></tr></thead><tbody><tr><td>Color scheme</td><td>Choose any color scheme for drawers.</td></tr></tbody></table>

## Inputs

<table><thead><tr><th width="246"></th><th></th></tr></thead><tbody><tr><td>Corner radius</td><td>Adjust the range bar to determine the radius of input field's corners.</td></tr></tbody></table>

## Swatches

Note: It applies for the Product card only.

<table><thead><tr><th width="248"></th><th></th></tr></thead><tbody><tr><td>Hide single swatch</td><td>Select this checkbox to hide color swatches, if there is only one swatch.</td></tr><tr><td>Number of swatches to display</td><td>Enter the number of swatches to display.</td></tr><tr><td>Type</td><td>Choose the type from below options:<br>- Category meta-fields<br>- Variant images.</td></tr><tr><td>Swatch</td><td><strong>Style</strong><br>Choose the swatch style from:<br>- Circle<br>- Box<br><br><strong>Size</strong><br>Choose the swatch size from:<br>- Small<br>- Medium<br>- Large</td></tr></tbody></table>

## Variants

<table><thead><tr><th width="258"></th><th></th></tr></thead><tbody><tr><td>Size options</td><td><strong>Style</strong><br>Choose the swatch style from:<br>- Circle<br>- Box<br><br><strong>Size</strong><br>Choose the swatch size from:<br>- Small<br>- Medium<br>- Large</td></tr></tbody></table>

## Scroll to top

<table><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Enable scroll to top</td><td>Select this checkbox to enable the scroll to top icon.</td></tr><tr><td>Position</td><td>Choose the icon position from the following options:<br>- Left<br>- Center<br>- Right</td></tr><tr><td>Margin from bottom</td><td>Adjust the range bar to determine the vertical position of this icon.</td></tr><tr><td>Colors</td><td><strong>Background</strong><br>Choose any color for the icon background.<br><br><strong>Icon</strong><br>Choose any color for the icon.</td></tr></tbody></table>

##


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://shinedezign.gitbook.io/metro/overview/theme-settings.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.