# Theme settings

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

## 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>Text/content colors</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>Solid</strong> b<strong>ackground</strong><br>Select the button background color.<br><br><strong>Text</strong>(<strong>Labels)</strong><br>Select the button label color.<br><br><strong>Border</strong><br>Select the button border's color.<br><br><strong>Text(labels)</strong> <strong>hover</strong><br>Select the button's text color on hover.<br><br><strong>Background hover</strong><br>Select the button's background color on hover.</td></tr><tr><td>Arrow/pagination</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>Icons</td><td><strong>Solid</strong> b<strong>ackground</strong><br>Select the icon's background color.<br><br><strong>Icon color</strong><br>Select the icon's color.<br><br><strong>Border</strong><br>Select the icon's border color.</td></tr><tr><td>Media</td><td><strong>Background</strong><br>Select the media's background color.<br><br><strong>Overlay background</strong><br>Select the media's overlay color.<br><br><strong>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>Form fields</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>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>Overlay</td><td>Select the overlay color. It appears on opening the menus and drawers/popups.</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><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></tbody></table>

**Popup/Drawers/Menus**

<table><thead><tr><th width="253"></th><th></th></tr></thead><tbody><tr><td>Color scheme</td><td>Select any color scheme defined in the theme settings>Colors>Schemes.</td></tr><tr><td>Overlay</td><td>Choose any color for the overlay, which appears on opening the popups, drawers or menus.</td></tr><tr><td>Overlay opacity</td><td>Adjust the range bar to determine the overlay color's opacity.</td></tr></tbody></table>

## Header and footer

<table><thead><tr><th width="250"></th><th></th></tr></thead><tbody><tr><td>Colors</td><td><p>Header<br><strong>Background</strong><br>Select the header's background color.<br><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>Border</strong><br>Select the header's border color.<br><br>Transparent header</p><p><strong>Text/icon</strong><br>Select the text color to display on the transparent header.<br><br><strong>Text hover</strong><br>Select the header's text color on hover.<br><br><strong>Border</strong><br>Select the color for the border on the transparent header.<br><br><strong>Overlay</strong><br>Choose any color for the overlay.<br><br>Submenus<br><strong>Background</strong><br>Select the submenus background color.<br><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>Border/hover background</strong><br>Select the border and hover background color.</p></td></tr><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
<br>- Double Extra large</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><tr><td>Footer</td><td><strong>Background</strong><br>Select the footer's background color.<br><br><strong>Heading</strong><br>Select the footer's heading color.<br><br><strong>Text</strong><br>Select the footer's text color.<br><br><strong>Link</strong><br>Select the link color.<br><br><strong>Link hover</strong><br>Select the hover color of links.<br><br><strong>Border</strong><br>Select the footer's border color.<br><br>Forms<br><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.<br><br>Currency/Language selector(footer)<br><strong>Text</strong><br>Select the selector's text color.<br><br><strong>Border</strong><br>Select the selector's border color.<br><br><strong>Background</strong><br>Select the selector's background color.<br><br><strong>Text hover</strong><br>Select the selector's text hover color.<br><br><strong>Background hover</strong><br>Select the selector's background hover color.<br><br><strong>Card background</strong><br>Select the selector's card background color.<br><br><strong>Card text</strong><br>Select the selector's card text color.</td></tr></tbody></table>

## Typography

This setting allows customizing fonts.

<table data-header-hidden><thead><tr><th width="260"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Headings</td><td><p><strong>Font</strong> </p><p>Select the font of the heading text.</p><p> <br><strong>Line height</strong> </p><p>Adjust the line height for headings used in all sections.<br><br><strong>Font size scale</strong> </p><p>Adjust the range bar to set the font size scale.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the available list of options. </p></td><td></td></tr><tr><td>Body</td><td><p><strong>Font</strong> </p><p>Select the font of the body text.</p><p> <br><strong>Line height</strong> </p><p>Adjust the line height for headings used in all sections.<br><br><strong>Font size scale</strong> </p><p>Adjust the range bar to set the font size scale.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the available list of options.</p></td><td></td></tr><tr><td>Accents</td><td><p><strong>Font</strong> </p><p>Select the font of the accents text.</p><p> <br><strong>Line height</strong> </p><p>Adjust the line height for headings used in all sections.<br><br><strong>Font size scale</strong> </p><p>Adjust the range bar to set the font size scale.<br><br><strong>Letter spacing</strong><br>Choose the letter spacing from the available list of options.</p></td><td></td></tr><tr><td>Desktop headings</td><td><strong>Double Extra large</strong><br><strong>Size</strong><br>Adjust the range bar to select the font size for double extra large.<br><br><strong>Extra large</strong><br><strong>Size</strong><br>Adjust the range bar to select the font size for extra large.<br><br><strong>Large</strong>
<br><strong>Size</strong><br>Adjust the range bar to select the font size for large.<br><br><strong>Medium</strong>
<br><strong>Size</strong><br>Adjust the range bar to select the font size for medium.<br><br><strong>Regular</strong><br><strong>Size</strong><br>Adjust the range bar to select the font size for regular.<br><br><strong>Small</strong>
<br><strong>Size</strong><br>Adjust the range bar to select the font size for small
.<br><br><strong>Extra small</strong><br>
<strong>Size</strong><br>Adjust the range bar to select the font size for extra small.</td><td></td></tr></tbody></table>

## Animation

<table><thead><tr><th width="188"></th><th></th></tr></thead><tbody><tr><td>Links &#x26; Buttons</td><td><strong>Enable shuffle animation</strong><br>Select this checkbox to enable the shuffle animation. This can appear on non- action buttons (i.e. buttons with links only) and header links only, depending on the below settings.<br><br><strong>Speed (ms)</strong><br>Adjust the range bar to select the speed of animation.<br><br><strong>Duration (ms)</strong><br>Adjust the range bar to select the duration of animation.<br><br><strong>Target</strong><br>Choose the target options from:<br>- Buttons<br>- Header links<br>- Both<br>- None</td></tr><tr><td>Desktop mouse pointer</td><td><strong>Enable animated pointer</strong><br>Select this checkbox to enable the animated pointer through out the store.</td></tr></tbody></table>

## Badges

<table><thead><tr><th width="200.666748046875"></th><th></th></tr></thead><tbody><tr><td>Sale badge</td><td><strong>Show 'Sale' badge</strong><br>Select this checkbox to show the 'Sale' badge based on the conditions selected below.<br>(<em><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>- Percentage<br>- Sale label<br>- Label with percentage</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="https://content.gitbook.com/content/Ngo8jBIWNJuV2vCyFzMh/blobs/igAhCjcSeLRh3mZMqC7g/image.png" alt=""><br></p></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>New badge</td><td><strong>Show new badge</strong><br>Select this checkbox to show the new badge on the product cards.<br><br><strong>Period since product creation (days)</strong><br>Adjust the range bar to determine the number of days since the product is created.  This selected number is the threshold for displaying the new badge.<br><em>(Note: The badge is shown automatically based on the product's creation date.)</em></td></tr><tr><td>Custom badge</td><td><strong>Show custom badge</strong><br>Select this checkbox to show the custom badges on the product cards.<br><br><strong>Custom tags list</strong><br>Add custom labels in the product tags and then type those in this field. The custom labels will start showing on the storefront. Use comma separated list for these tags.</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="https://content.gitbook.com/content/Ngo8jBIWNJuV2vCyFzMh/blobs/ubWIo7uUObF5yXugQnNJ/image.png" alt=""><figcaption></figcaption></figure>

## Buttons

<table><thead><tr><th width="216"></th><th></th></tr></thead><tbody><tr><td>Font style</td><td><p>Choose the button's font style from the following options:</p><p>- UPPERCASE<br>- lowercase<br>- Capitalize<br>- Unset </p></td></tr></tbody></table>

## Border

<table><thead><tr><th width="225.1112060546875"></th><th></th></tr></thead><tbody><tr><td>Border width</td><td>Choose the width from 1 or 2 px.</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</td></tr><tr><td>Media </td><td><strong>Media fit style</strong><br>Choose the media fit from following options:<br>- Cover<br>- Contain</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>

## Product card

<table><thead><tr><th width="257"></th><th></th></tr></thead><tbody><tr><td>Show product vendor</td><td>Select this checkbox to show the product vendor name.</td></tr><tr><td>Show product rating</td><td>Select this checkbox to show the product ratings.</td></tr><tr><td>Border color</td><td><strong>Style</strong><br>Choose the border style from:<br>- Solid<br>- Gradient<br><br><strong>Color</strong><br>Choose the border color.</td></tr><tr><td>Title</td><td><strong>Title maximum lines(0 to never turncate)</strong><br>Adjust the range bar to truncate the product title. Keep it 0 to never truncate the product title.<br><br><strong>Size</strong><br>Choose the title font size by adjusting the range bar.</td></tr><tr><td>Price</td><td><strong>Font weight</strong><br>Choose the font weight from bold or normal options.<br><br><strong>Size</strong><br>Choose the price font size by adjusting the range bar.</td></tr><tr><td>Inventory Status</td><td><strong>Show inventory status</strong><br>Select this checkbox to show the product inventory status.<br><br><strong>Inventory threshold</strong><br>Adjust the range bar to determine the minimum inventory threshold.</td></tr><tr><td>Linked products</td><td><strong>Show linked products</strong><br>Select this checkbox to show the linked products.</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></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>Style</td><td>Choose the search style from the following options:<br>- Page<br>- Drawer</td></tr><tr><td>Search Placeholder Text</td><td>Enter the placeholder text of search field.</td></tr><tr><td>Search results</td><td><strong>Enable predictive search</strong><br>Select this checkbox to enable the predictive search.</td></tr><tr><td>Popular searches</td><td><strong>Enable popular searches</strong><br>Select this checkbox to enable the popular searches.<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>- Double Extra large<br><br><strong>Popular searches</strong><br>Enter the comma separated popular searches text.</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>- Double Extra large<br><br><strong>Categories</strong><br>Choose the collections list from the store.</td></tr><tr><td>Recent searches</td><td><strong>Enable recent search</strong><br>Select this checkbox to enable the recent searches.<br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Heading size</strong><br>Select the heading size from the following options:<br>- XXX- large<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Small<br>- X-small</td></tr><tr><td>Product recommendation</td><td><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Heading size</strong><br>Select the heading size from the following options:<br>- XXX- large<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Small<br>- X-small<br><br><strong>Product list</strong><br>Choose the products list from the store.</td></tr><tr><td>Card appearance</td><td><strong>Image ratio</strong><br>Choose from image's ratio in the grid from the following options:<br>- Auto<br>- Square<br>- Landscape<br>- Portrait<br><br><strong>Options visibility</strong><br>Choose options from:<br>- Always<br>- On hover<br><br><strong>Variants details</strong><br>- Sizes only<br>- Colors only<br>- Sizes &#x26; Colors<br>- No variants<br><br><strong>Sizes visibility</strong><br>Choose the visibility of size options:<br>- Always<br>- On hover<br><br><strong>On hover: Enable shadow</strong><br>Select this checkbox to show shadow on product card.<br><br>Always/On hover options<br><strong>Border style</strong><br>Choose style from:<br>- With border<br>- Without border<br><br>Badges<br><strong>Badges visibility</strong><br>Choose the visibility of badges :<br>- Always<br>- On hover<br><br>Quick view<br><strong>Display mode</strong><br>Choose the visibility of quick view:<br>- Always<br>- On hover<br>- Disabled<br><br>Media<br><strong>Media fit style</strong><br>Choose the media fit style from :<br>- Cover<br>- Contain<br><br><strong>Show second image on hover</strong><br>Select this checkbox to show second image on hover.</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><tr><td>Linked product swatchs</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>

## **Favicon**

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


---

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