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

## 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>Corners top background</td><td>Select color for the background color of the top corners.</td></tr><tr><td>Corners bottom background</td><td>Select color for the background color of the bottom corners.</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>Subheading highlights</td><td><em>(<strong>Note</strong>: These colors work for the markers applied to the section subheadings.)</em><br><br><strong>Text</strong><br>Select color for the subheading text.<br><br><strong>Background</strong><br>Select color for the subheading background.</td></tr><tr><td>Heading highlights</td><td><em>(<strong>Note</strong>: These colors work for the markers applied to the section headings.)</em><br><br><strong>Outline text</strong><br>Select color for the outline text.<br><br><strong>In text gradient</strong><br>Select color for the in text gradient of the headings.<br><br><strong>Background gradient</strong><br>Select color for the background gradient of the headings.<br><br><strong>Shape gradient</strong><br>Select color for the shape gradient of the headings.</td></tr><tr><td>Primary &#x26; Secondary button</td><td><strong>Label</strong><br>Select the button label color.<br><br><strong>Background</strong><br>Select the button background color.<br><br><strong>Border</strong><br>Select the button border's color.<br><br><strong>Label 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.<br><br><strong>Background gradient</strong><br>Select the button's gradient background color.<br><em>(<strong>Note</strong>: It replaces the solid background color.)</em></td></tr><tr><td>Image</td><td><strong>Background</strong><br>Select the image's background color.<br><br><strong>Background 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 background</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 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>Slider arrow/dots, icons, comparison pin</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>Card</td><td><strong>Background</strong><br>Select the card's background color.<br><br><strong>Alternate background</strong><br>Select card's alternate 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>Background gradient</strong><br>Select the card's background gradient color.<br><br><strong>Border</strong><br>Select the card's border color.</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>

**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>

## Header

<table><thead><tr><th width="250"></th><th></th></tr></thead><tbody><tr><td>Typography</td><td><p>First level menus<br><strong>Font</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>Size</strong><br>Select the first level menus font size from the following options:<br>- X- large<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small<br>- XX-small<br><br>Second level menus</p><p><strong>Font</strong><br>Choose the second 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>Size</strong><br>Select the second level menus font size from the following options:<br>- X- large<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small<br>- XX-small<br><br>Third level menus<br><strong>Font</strong><br>Choose the third 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>Size</strong><br>Select the third level menus font size from the following options:<br>- X- large<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small<br>- XX-small</p></td></tr><tr><td>Colors</td><td><p><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><strong>Border opacity</strong><br>Adjust the range bar to determine the border color's opacity.<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.<br><br><strong>Border</strong><br>Select the color for the border on the transparent header.<br><br><strong>Border opacity</strong><br>Adjust the range bar to determine the border color's opacity.<br><br><strong>Overlay</strong><br>Choose any color for the overlay.<br><br><strong>Overlay opacity</strong><br>Adjust the range bar to determine the overlay color's opacity.</p></td></tr><tr><td>Hamburger menu</td><td><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.</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>Card radius</td><td>Adjust the range bar to select the border radius of cards.</td></tr></tbody></table>

## Buttons

<table><thead><tr><th width="216"></th><th></th></tr></thead><tbody><tr><td>Buttons</td><td><strong>Size</strong><br>Select from the following options to determine the button size:<br>- Small<br>- Medium<br>- Large<br><br><strong>Style</strong><br>Choose the button style from the following options:<br>- Animated <br>- Outlined<br>- Link <br>- Solid<br>- Solid animated</td></tr><tr><td>Border</td><td><strong>Corner radius</strong><br>Adjust the range bar to select the corner radius of the buttons.</td></tr><tr><td>Font</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></tbody></table>

## Inputs

<table><thead><tr><th width="199"></th><th></th></tr></thead><tbody><tr><td>Border</td><td><strong>Thickness</strong><br>Adjust the range bar to select the thickness of forms borders.<br><br><strong>Opacity</strong><br>Adjust the range bar to select the opacity of forms borders.<br><br><strong>Corner radius</strong><br>Adjust the range bar to select the border radius of page forms.</td></tr></tbody></table>

## Product

<table><thead><tr><th width="202"></th><th></th></tr></thead><tbody><tr><td>Default product image</td><td>Choose any image to show for the products having no image.</td></tr><tr><td>Interlink tabs with sections</td><td><p><em>(<strong>Note</strong>: Enable this option to show the Section ID clipboard in design mode (customizer mode) only. This feature helps merchants easily interlink product information sections using Interlink Tabs.</em></p><p><em>Interlink Tabs are blocks defined in the product information section. Click the copy icon to copy the Section ID to your clipboard. You can then paste the copied ID into the Section ID input box of the Interlink Tab block.)</em><br><br><strong>Show section ID on the clipboard</strong><br>Select this checkbox to show the Section ID in the theme editor preview.</p></td></tr></tbody></table>

## Product cards

<table><thead><tr><th width="215"></th><th></th></tr></thead><tbody><tr><td>Strip title to 1 line</td><td>Select this checkbox to decrease the product title to one line only.</td></tr><tr><td>Hover style</td><td>Choose the style from below options:<br>- None<br>- Product options<br>- Second image<br>- All</td></tr><tr><td>Quick view visibility</td><td>Choose the quick view visibility from below options:<br>- None<br>- Always<br>- On hover</td></tr><tr><td>Corner radius</td><td>Adjust the range bar to determine the radius in the grids.</td></tr><tr><td>Product options</td><td>Color options<br><strong>Hide single swatches</strong><br>Select this checkbox to hide single swatches in the product grid.<br><br><strong>Swatch type</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>docs.</em></a><em>)</em><br><br><strong>Appearance</strong><br>Choose the appearance style of the swatches from below options:<br>- Square<br>- Circle<br>- Soft edges<br><br><strong>Size</strong><br>Choose the size of the swatches from below options:<br>- Small<br>- Medium<br>- Large<br><br>Other options<br><em>(<strong>Note</strong>: The below settings apply to the product options except the color options.)</em><br><br><strong>Appearance</strong><br>Choose the appearance style of the product options from below options:<br>- Square<br>- Circle<br>- Soft edges<br><br><strong>Size</strong><br>Choose the size of the swatches from below options:<br>- Small<br>- Medium<br>- Large</td></tr><tr><td>Content</td><td><p><strong>Show vendor</strong><br>Select the checkbox to show the product vendor name. <br><br><strong>Font</strong><br>Choose the product card'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><br><br><strong>Alignment</strong><br>Choose the content alignment from the following options:<br>- Left<br>- Center<br>- Right<br><br><strong>Size</strong><br>Select the product card's font size from the following options:<br>- X- large<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small<br>- XX-small</p></td></tr><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="https://4267491829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGT8eZkzRo8UybAIz0BT7%2Fuploads%2FfGY05P00gFmEjMJEkqyy%2Fimage.png?alt=media&#x26;token=60a73a5b-6968-448f-9688-2da7d65e0c8c" alt=""><br><br><strong>Saving price options</strong><br>Select from the options to determine the saving price options:<br>- None<br>- Amount off<br>- Percentage off</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>

#### 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/GT8eZkzRo8UybAIz0BT7/blobs/1tKDfJNTnjeUjt7hvuKb/image.png" alt=""><figcaption></figcaption></figure>

## Swatches

<table><thead><tr><th width="248"></th><th></th></tr></thead><tbody><tr><td>Color options trigger</td><td>Enter the color option name.<br>(<em>Note: The option name that holds the colors. E.g.: Color, Colour, Material, etc.)</em></td></tr><tr><td>Size options trigger</td><td>Enter the size option name.<br><em>(Note: The option name that holds the size. E.g.: Size,Taille, etc.)</em></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>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><tr><td>Empty cart details</td><td><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Description</strong><br>Enter the description text.<br><br><strong>Button label</strong><br>Enter the button label text e.g. <strong>Continue shopping</strong>.<br><br><strong>Button link</strong><br>Add the link to redirect the button.<br><br><strong>Collections</strong><br>Choose the collections list.</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>Style</strong><br>Choose the style from below options:<br>- Complementary products<br>- Products list<br>- None<br><em>(<strong>Note</strong>: To select related products, add the Search &#x26; Discovery app.)</em><br><br><strong>Heading</strong><br>Enter the heading text.<br><br><strong>Products list</strong><br>Choose the products list.</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>Drawer style</td><td>Choose the drawer style from the following options:<br>- Fullscreen<br>- Half screen</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 show the recent searches.<br><br><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</td></tr><tr><td>Popular collections</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>Collections</strong><br>Choose the collections list from the store.</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></tbody></table>

## Article cards

<table><thead><tr><th width="241"></th><th></th></tr></thead><tbody><tr><td>Strip title to 1 line</td><td>Select this checkbox to show article's title in one line only.</td></tr><tr><td>Strip content to 2 lines</td><td>Select this checkbox to show article's description in two lines only.</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>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>

## 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>