> For the complete documentation index, see [llms.txt](https://shinedezign.gitbook.io/genie/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/genie/overview/theme-settings.md).

# Theme settings

These settings are the 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.

## Header

<table><thead><tr><th width="255"></th><th></th></tr></thead><tbody><tr><td>Background</td><td>Select the background color.</td></tr><tr><td>Text</td><td>Select color for the text.</td></tr><tr><td>Hover text</td><td>Select color for the hover text.</td></tr><tr><td>Border</td><td>Select color for the border.</td></tr><tr><td>Icon background</td><td>Select color for the icon's background.</td></tr><tr><td>Icon color</td><td>Select color for the icon.</td></tr><tr><td>Desktop submenu</td><td>Background<br>Select the background color.<br><br>Text<br>Select color for the text.<br><br>Hover<br>Select color for the hover text.<br><br>Border/hover background<br>Select color for the border and background hover.</td></tr><tr><td>Mega menu / mobile menu</td><td><strong>Color scheme</strong><br>Choose any color scheme.</td></tr><tr><td>Category / side reveal</td><td><strong>Color scheme</strong><br>Choose any color scheme.</td></tr></tbody></table>

Menu typography (desktop)

<table><thead><tr><th width="267"></th><th></th></tr></thead><tbody><tr><td>First level menus</td><td><p><strong>Font family</strong><br>Choose the 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 heading size from the following options:<br>- XX- large<br>- X- large<br>- Large</p></td></tr><tr><td>Second level menus</td><td><p><strong>Font family</strong><br>Choose the 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 heading size from the following options:<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small</p></td></tr><tr><td>Third level menus</td><td><p><strong>Font family</strong><br>Choose the 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 heading size from the following options:<br>- XX- large<br>- X- large<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small</p></td></tr><tr><td>Drawer menus (first level)</td><td><p><strong>Font family</strong><br>Choose the 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 heading size from the following options:<br>- Heading- medium<br>- Heading- xlarge<br>- Heading- medium<br>- Heading- small<br>- Heading- X-small<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small</p></td></tr></tbody></table>

## Colors

**Default color scheme:** Choose any color scheme to be the default one.&#x20;

<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>Edge background top</td><td>Select color for the background color of the top corners.</td></tr><tr><td>Edge background bottom</td><td>Select color for the background color of the bottom corners.</td></tr><tr><td>Card background</td><td>Select the card's background color.</td></tr><tr><td>Card Text</td><td>Select color for the card's text.</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.<br><br><strong>Highlight color</strong><br>Select color for the highlight elements like product prices.</td></tr><tr><td>Image</td><td><strong>Background</strong><br>Select the image's background color.<br><br><strong>Overlay gradient</strong><br>Select the button's gradient background color.<br><em>(<strong>Note</strong>: It replaces the solid background col</em><br><br><strong>Overlay solid</strong><br>Select the image's overlay background color.<br><br><strong>Overlay heading</strong><br>Select the image's overlay heading color.<br><br><strong>Overlay text</strong><br>Select the image's overlay text color.<br><br><em>(Note: The image overlay colors work for the images, which are mandatory for the sections.)</em></td></tr><tr><td>Form</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>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>Background hover</strong><br>Select the button's background color on hover.<br><br><strong>Effect hover color</strong><br>Select the animated button's  hover effect color.<br><br><strong>Text hover</strong><br>Select the button's text color on hover.<br><br><strong>Border hover</strong><br>Select the border hover color.</td></tr><tr><td>Product card</td><td><strong>Background</strong><br>Select the card's background color.<br><br><strong>Text</strong><br>Select color for the card's text.<br><br><strong>Border</strong><br>Select the card's border color.</td></tr><tr><td>Slider arrow/dots</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.<br><br><strong>Border</strong><br>Select the border color.</td></tr><tr><td>Marquee</td><td><strong>Text</strong><br>Select color for the marquee's text.<br><br><strong>Outline text</strong><br>Select color for the marquee's outlined text.</td></tr><tr><td>Icons</td><td><strong>Background</strong><br>Select the icon's background color.<br><br><strong>Text</strong><br>Select color for the icon.</td></tr></tbody></table>

**Popup/Drawers/Menus**

**Badges**

<table><thead><tr><th width="258"></th><th></th></tr></thead><tbody><tr><td>Sale text</td><td>Select any text color for sale badges.</td></tr><tr><td>Sale background</td><td>Select any background color for sale badges.</td></tr><tr><td>Soldout text</td><td>Select any text color for sold out badges.</td></tr><tr><td>Soldout background</td><td>Select any background color for sold out badges.</td></tr><tr><td>Preorder text</td><td>Select any text color for preorder badges.</td></tr><tr><td>Preorder background</td><td>Select any background color for preorder badges.</td></tr><tr><td>Discount text</td><td>Select any text color for discount badges.</td></tr><tr><td>Discount background</td><td>Select any background color for discount badges.</td></tr><tr><td>Custom text</td><td>Select any text color for custom badges.</td></tr><tr><td>Custom background</td><td>Select any background color for custom badges.</td></tr></tbody></table>

**Success/Error messages**

<table><thead><tr><th width="254"></th><th></th></tr></thead><tbody><tr><td>Success text</td><td>Select any text color for success text.</td></tr><tr><td>Error text</td><td>Select any text color for error text.</td></tr><tr><td>Warning text</td><td>Select any text color for warning text.</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></tbody></table>

## Layout&#x20;

<table><thead><tr><th width="188"></th><th></th></tr></thead><tbody><tr><td>Container width</td><td>Choose the container width from the following options:<br>- Extra small<br>- Small<br>- Regular<br>- Edges gap</td></tr><tr><td>Animations</td><td>Enable heading animations<br>Select this checkbox to enable the animations on headings.<br><br>Enable card animations<br>Select this checkbox to enable the animations on cards.</td></tr><tr><td>Styling </td><td>Card radius<br>Adjust the range bar to select the border radius of cards.<br><br>Form radius<br>Adjust the range bar to select the border radius of form inputs.</td></tr><tr><td>Navigation arrows</td><td>Style<br>Choose style from:<br>- Round<br>- Star</td></tr></tbody></table>

## Buttons

<table><thead><tr><th width="216"></th><th></th></tr></thead><tbody><tr><td>Font family</td><td><p>Choose the button's 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></p></td></tr><tr><td>Style</td><td>Choose the button style from the following options:<br>- Solid<br>- Outline<br>- Solid animated <br>- Outline animated</td></tr><tr><td>Size</td><td>Select from the following options to determine the button size.<br>- Small<br>- Regular<br>- Large</td></tr><tr><td>Text transform</td><td>Choose text transform from:<br>- Default<br>- Uppercase<br>- Lowercase<br>- Capitalize</td></tr><tr><td>Corner radius</td><td>Adjust the range bar to select the corner radius of the buttons.</td></tr></tbody></table>

### Variant pills

<table><thead><tr><th width="235"></th><th></th></tr></thead><tbody><tr><td>Border</td><td>Variant pills are one way of displaying your product variants.<br><strong>Thickness</strong><br>Adjust the range bar to select the thickness of borders.<br><br><strong>Corner radius</strong><br>Adjust the range bar to select the corner radius of pills.</td></tr></tbody></table>

## Product

<table><thead><tr><th width="202"></th><th></th></tr></thead><tbody><tr><td>Enable preorder</td><td>Select the checkbox if you want to allow users to pre-book any product. For this option, you must ensure that the "Continue Selling Out of Stock" is checked for a product that is not in stock at that moment. This setting can be checked from the Shopify products page.<br><br><img src="/files/FznVI3x8fuqQl5p5cgpx" alt=""></td></tr></tbody></table>

## Product cards

<table><thead><tr><th width="215"></th><th></th></tr></thead><tbody><tr><td>Content style</td><td>Choose the style from below options:<br>- Inside<br>- Outside</td></tr><tr><td>Desktop price position</td><td>Choose the price position for outside style for desktop view, from below options:<br>- Same row<br>- Next row</td></tr><tr><td>Quick view style</td><td>Choose the style from below options:<br>- Icon<br>- None</td></tr><tr><td>Icon appearance</td><td>Choose the quick view visibility from below options:<br>- Always<br>- On hover</td></tr><tr><td>Font family</td><td><p>Choose the 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></p></td></tr><tr><td>Show second image on hover</td><td>Select this checkbox to show the product's second image on hover.</td></tr><tr><td>Show vendor</td><td>Select the checkbox to show the product vendor name. </td></tr><tr><td>Swatch</td><td><strong>Show swatch</strong><br>Select this checkbox to show swatches in the product grid.<br><br><strong>Color swatch style</strong><br>Choose the swatch type from the following options:<br>- Category meta-fields<br>- Variant image<br><em>(<strong>Note</strong>: For category meta-fields colors, please go through</em> <a href="https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields"><em>doc</em></a><em>)</em><br><br><strong>Hide compare price</strong><br>Select this checkbox to hide the compare price in the product cards.<br><br><strong>Saving price options</strong><br>Choose the saving price options from:<br>- None<br>- Amount off<br>- Percentage off<br><br><strong>Corner radius</strong><br>Adjust the range bar to determine the radius in the grids.</td></tr></tbody></table>

### Swatches

<table><thead><tr><th width="235"></th><th></th></tr></thead><tbody><tr><td>Size options trigger</td><td>Add the product option name that that holds the size. E.g.: Size, Taille, etc.</td></tr><tr><td>Color options trigger</td><td>Add the product option name that holds the colors. E.g.: Color, Colour, Material, etc.</td></tr><tr><td>Custom colors</td><td>Enter the custom color codes of the swatches using the hex colors. <strong>To add a color code with the option name:</strong> <br><em>For example:</em> Chilli: #ff0000 <br><em>Here the 'Chilli' is the variant name.</em> For hex color codes, refer to <a href="https://htmlcolorcodes.com/">codes.</a> <br><br><strong>To add the swatch image:</strong> Upload image in Content>Files. Add the image name with extension. This will link the option name with the image.</td></tr></tbody></table>

### Drawers

<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 background</td><td>Choose any color for the overlay, which appears on opening the popups, drawers or menus.</td></tr><tr><td>Enable blur background</td><td>Select the checkbox to make the background blurry.</td></tr><tr><td>Overlay opacity</td><td>Adjust the range bar to determine the overlay color's opacity.</td></tr></tbody></table>

### Badges

<table><thead><tr><th width="267"></th><th></th></tr></thead><tbody><tr><td>Badges</td><td><p><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>Show 'Sold out' badge</strong><br>Select this checkbox to show the ' Sold out ' badge.<br><br><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 and then type those in this field. The tags will start showing on the storefront.<br><br><strong>Custom badge text</strong><br>Type the badge text to display.</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>These options are useful to share the product, articles on the social networking sites.<br><br><strong>Share on Facebook</strong><br>Select this checkbox to share on Facebook.<br><br><strong>Tweet on X (formerly Twitter)</strong><br>Select this checkbox to share on X (formerly Twitter).<br><br><strong>Pin on Pinterest</strong><br>Select this checkbox to share on Pinterest.<br><br><strong>Share on Telegram</strong><br>Select this checkbox to share on Telegram.<br><br><strong>Share on WhatsApp</strong><br>Select this checkbox to share on Email.<br><br><strong>Share on Email</strong><br>Select this checkbox to share on Email.</td></tr></tbody></table>

## Search/ Search drawer

<table><thead><tr><th width="211"></th><th></th></tr></thead><tbody><tr><td>Style</td><td>Choose the search style from the following options:<br>- Page<br>- Drawer</td></tr><tr><td>Search bar placeholder</td><td>Choose the drawer style from the following options:<br>- Fullscreen<br>- Half screen</td></tr><tr><td>Trending searches</td><td><strong>Show trending searches</strong><br>Select this checkbox to show the trending search items.<br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Trending search</strong><br>Enter the trending search items text.</td></tr><tr><td>Popular categories</td><td>Show popular categories<br>Select this checkbox to show the trending search items.<br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Select collections</strong><br>Choose the collections list from the store.</td></tr><tr><td>Suggestions</td><td><strong>Enable suggestions</strong> <br>Select this checkbox to show the suggestions.<br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Select products</strong><br>Choose the products list from the store.</td></tr><tr><td>Search results</td><td><strong>Search behavior</strong><br>Choose from:<br>- Products only<br>- Product and pages<br>- Product and articles<br>- Product, articles and pages<br>- All content<br><br><strong>Image ratio</strong><br>Choose from image's ratio from the following options:<br>- Auto<br>- Square<br>- Landscape<br>- Portrait<br><br><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.</td></tr></tbody></table>

### Cart/Cart drawer

<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>Cart drawer</td><td><strong>Enable cart notes</strong><br>Select this checkbox to show the cart notes in the cart drawer.<br><br><strong>Show estimate shipping</strong><br>Select this checkbox to show estimate shipping in the cart drawer.<br><br>Cart recommendations<br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Products list</strong><br>Choose the products list.<br><br><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.</td></tr></tbody></table>

### Cart

<table><thead><tr><th width="241"></th><th></th></tr></thead><tbody><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>Animation style</strong><br>Choose from:<br>- Truck<br>- Duck<br>- None<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>Empty cart details</td><td><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Description</strong><br>Enter description text to show in the cart drawer.<br><br><strong>Button label</strong><br>Enter the button label e.g. <strong>Continue shopping</strong><br><br><strong>Button link</strong><br>Enter the link to redirect the button.<br><br><strong>Style</strong><br>Choose the button style from the following options:<br>- Global<br>- Solid<br>- Outline<br>- Solid animated <br>- Outline animated<br>- Link<br><br><strong>Size</strong><br>Select from the following options to determine the button size.<br>- Global<br>- Small<br>- Regular<br>- Large</td></tr></tbody></table>

## Internationalization

<table><thead><tr><th width="226"></th><th></th></tr></thead><tbody><tr><td>Enable language selector</td><td>Select this checkbox to show the language selector.</td></tr><tr><td>Enable country/region selector</td><td>Select this checkbox to show the country/region selector.</td></tr></tbody></table>

## Scroll to top

<table><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Enable</td><td>Select this checkbox to enable the scroll to top icon.</td></tr><tr><td>SVG code</td><td>Add the SVG icon code.</td></tr><tr><td>Horizontal position</td><td>Choose the icon position from the following options:<br>- Left<br>- Center<br>- Right</td></tr><tr><td>Vertical position</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.<br><br><strong>Border</strong><br>Choose any color for the border.</td></tr></tbody></table>

### SEO

<table><thead><tr><th width="248"></th><th></th></tr></thead><tbody><tr><td>Remove the collection portion from product URLs for better SEO.</td><td>Select this checkbox to remove the collection portion from the product URL's.</td></tr></tbody></table>