# Theme Settings

These options apply to your entire theme and affect all pages, sections, and blocks.

You can access **Theme settings** from the left sidebar of the Customizer.\
While section and block settings control only individual parts of a page, theme settings define the **overall design system** — including typography, colors, buttons, layout spacing, and additional features such as animations or cart behavior.

***

#### **How it works**

* **Global inheritance**: Theme settings provide baseline design values that are inherited by sections and blocks.\
  For example, if you set a main accent color in Theme settings → *Colors*, that color will automatically apply to buttons and links unless overridden locally.
* **Responsive design**: Most theme settings are responsive by default, ensuring your design adapts to desktop, tablet, and mobile layouts.
* **Live preview**: All changes are visible instantly in the Customizer preview area. Click **Save** to apply them to your published theme.

***

### **Theme Settings — Overview**

Below are all setting groups available in the **Theme settings** panel, with short explanations of what each one controls.

* **Colors** — Set global color palette for backgrounds, text, borders, and accents used throughout the theme.
* **Typography** — Choose fonts, sizes, and weights for headings, body text, and buttons.
* **Layout** — Adjust general page width, spacing, and container alignment across the site.
* **Styles** — Apply global visual styles such as corner rounding, shadows, or theme accents.
* **Header** — Configure the desktop header appearance: logo position, colors, spacing, and navigation style.
* **Header Mobile** — Customize the mobile version of the header: menu style, icons, and layout.
* **Buttons Colors** — Set color styles for buttons (background, text, border, hover states).
* **Product Page Buttons** — Manage appearance and behavior of “Add to Cart”, “Buy Now”, or dynamic checkout buttons on product pages.
* **Button Filters** — Style filter buttons used in collections, search, or sidebar filter blocks.
* **Color Swatch** — Define how product color options appear (circles, squares, borders, or text labels).
* **Product Card** — Control layout and design of product cards in collections and featured sections.
* **Product Card Color** — Adjust background, border, and hover colors for product cards.
* **Cart** — Set appearance and behavior for the cart drawer or cart page, including buttons and totals area.
* **Free Shipping Progress Bar** — Enable and style a progress bar showing how close customers are to free shipping.
* **Social Media** — Add social media links or icons displayed in the header, footer, or share buttons.
* **Search Input** — Customize the design of the search field and search icon across the theme.
* **Currency Format** — Define how prices are displayed (currency symbol, decimal, or thousands separator).
* **Filter Tab** — Style the filter tab used in mobile or sidebar filters on collection pages.
* **Wishlist** — Customize the look and icon style of the wishlist feature.
* **Compare** — Configure appearance for the product comparison tool and its icons or buttons.
* **Favicon** — Upload the small icon that appears in the browser tab and bookmarks.
* **Recently Viewed Product** — Enable and style the recently viewed products section.
* **Product Review Stars** — Set the look of product rating stars (color, size, alignment).
* **Breadcrumb** — Customize breadcrumb navigation visibility, color, and typography.
* **Custom CSS** — Add custom CSS code for advanced styling adjustments beyond built-in options.
