# Theme settings

**Theme settings** are used for your store's general styles and site-wide options. Any changes will affect all sections and templates.

* Click the ‘gear’ icon in theme editor's side panel to open **theme settings**.
* Customize **colors** and **fonts** to change your site's general appearance.
* Customize site-wide options for **products**, **search**, **cart, social media** and more.

### Overview

In the table below, find Stiletto's available theme settings and setup guides. Each guide includes step-by-step instructions and further resources.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="style-presets"><strong>Theme styles (presets)</strong></a></td><td>Apply preset style settings to your store.</td><td><a href="style-presets">style-presets</a></td></tr><tr><td><a href="../../pages/templates/blogs-page#set-up-tag-navigation"><strong>Blog</strong></a></td><td>Set up tag navigation for blog posts.</td><td><a href="../pages/templates/blogs-page">blogs-page</a></td></tr><tr><td><a href="colors"><strong>Colors</strong></a></td><td>Customize colors for text and elements across your site.</td><td><a href="colors">colors</a></td></tr><tr><td><a href="fonts"><strong>Fonts</strong></a></td><td>Customize fonts for headings and text.</td><td><a href="fonts">fonts</a></td></tr><tr><td><a href="animation"><strong>Animation</strong></a></td><td>Enable animation effects for pages and sections.</td><td><a href="animation">animation</a></td></tr><tr><td><strong>Product</strong></td><td>Enable <a href="../product-pages/variant-options/variant-swatches/dynamic-option-availability">Dynamic option availability</a>, <a href="../product-pages/variant-options/variant-swatches">Variant swatches</a>, and <a href="../product-pages/variant-options/variant-chips">Variant chips</a>. Change <a href="../../products/product-listings#change-price-display-options">display options for product prices</a>.</td><td></td></tr><tr><td><a href="../products/product-badges"><strong>Product badges</strong></a></td><td>Display sale and custom labels on products.</td><td><a href="../products/product-badges">product-badges</a></td></tr><tr><td><a href="../products/product-listings"><strong>Product listing</strong></a></td><td>Choose to show <a href="../products/quick-view">Quick add</a>, <a href="../products/quick-view">Quick view</a>, <a href="../product-pages/variant-options/variant-swatches">Variant swatches</a>, and <a href="../product-pages/variant-options/variant-chips">Variant chips</a>. Change <a href="../../products/product-listings#change-price-display-options">display options for product prices</a>.</td><td><a href="../products/product-listings">product-listings</a></td></tr><tr><td><a href="../cart/quick-cart"><strong>Cart</strong></a></td><td>Customize cart features and appearance.</td><td><a href="../cart/cart-page">cart-page</a></td></tr><tr><td><a href="../pages/header/quick-search"><strong>Quick search</strong></a></td><td>Customize search results.</td><td><a href="../pages/header/quick-search">quick-search</a></td></tr><tr><td><strong>Social media</strong></td><td>Add your social account links to show icons in the <a href="../../pages/header#social-media-icons">Header</a>, <a href="../../pages/footer#social-media-icons">Footer</a>, and <a href="../sections/popups">Popups</a>.</td><td></td></tr><tr><td><strong>Favicon</strong></td><td>Upload a 32px by 32px icon image to show next to your site URL.</td><td></td></tr><tr><td><strong>Advanced</strong></td><td>Enable a <a href="theme-settings/back-to-top-button">Back to top button </a>for all site pages and select the position.</td><td></td></tr><tr><td><a href="../for-developers/custom-css"><strong>Custom CSS</strong></a></td><td>Add sitewide custom styles with CSS code</td><td><a href="../for-developers/custom-css">custom-css</a></td></tr></tbody></table>

***

> **Related links**
>
> [Theme sections](https://help.fluorescent.co/stiletto/sections/theme-sections)\
> [Theme templates](https://help.fluorescent.co/stiletto/pages/templates)


---

# 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://help.fluorescent.co/stiletto/theme-styles/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.