# Overview

## What are Theme settings?

**Theme settings** control the global design system of your store. Instead of styling each page one by one, you set your layout, fonts, colors, spacing, card styles, and other design elements once here, and Motrix applies them everywhere.

### What theme settings do

Anything you change in **Theme settings** applies **store-wide**, on every page and in every section that uses it. For example:

* Change your **Colors** and every section, card, and dialog that uses that color scheme updates at once.
* Change your **Typography** and all headings, body text, and buttons follow the new fonts.
* Change your **Product cards** and the same card design applies on collection pages, search results, featured collections, and product recommendations.

#### **Theme settings vs. Section settings:**

* **Theme settings** \= global rules (design system) applied across the whole store.
* **Section settings** \= local content and layout for one section on one page.

Section settings usually inherit from theme settings, then let you override a specific value where needed.

## How to open theme settings

1. From your Shopify admin, go to **Online Store > Themes**.
2. Find the Motrix theme and click **Edit theme**.
3. In the theme editor, click **Theme settings** (the gear icon in the top bar).
4. Select the group you want to edit and make your changes.
5. Click **Save**.

![](https://docs-assets.foxecom.app/documentation/f42e2701-3ae6-479e-baa4-972e38d2ae19.png)

## Explore Motrix theme settings

Use the following Theme settings to customize your Motrix store:

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/animations" subtitle="Page transitions and scroll-triggered motion for sections and blocks." icon="lucide:wand-2">
  Animations
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/appearance" subtitle="Shared corner radius, borders, buttons, and input fields." icon="lucide:brush">
  Appearance
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/badges" subtitle="Sale, sold-out, and custom badges: style, shape, and position." icon="lucide:tags">
  Badges
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/breadcrumbs" subtitle="Choose how it appears." icon="lucide:arrow-right">
  Breadcrumbs
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/blog-cards" subtitle="Image ratio and corner radius on blog post cards." icon="lucide:id-card">
  Blog cards
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/cart" subtitle="Cart type, add-to-cart behavior, and the cart details customers see." icon="lucide:shopping-cart">
  Cart
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/collection-cards" subtitle="Layout, image ratio, text placement, and hover for collection cards." icon="lucide:layout-grid">
  Collection cards
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/colors" subtitle="Color schemes that every section, card, and dialog draws from." icon="lucide:palette">
  Colors
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/dialogs" subtitle="Color scheme and corner radius for quick view, drawers, and popups." icon="lucide:credit-card">
  Dialogs
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/layout" subtitle="Page width, right-to-left support, and the back-to-top button." icon="lucide:layout-panel-top">
  Layout
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/logo" subtitle="Logo image, display width for desktop and mobile, and favicon." icon="lucide:image">
  Logo
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/prices" subtitle="How prices display store-wide, such as showing the currency code." icon="lucide:dollar-sign">
  Prices
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/product-cards" subtitle="Image ratio, hover effect, quick add, and product details shown." icon="lucide:box">
  Product cards
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/product-compare" subtitle="Let customers compare products side by side, and what gets compared." icon="lucide:list-check">
  Product compare
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/search" subtitle="Predictive suggestions, result count, keywords, and recommendations." icon="lucide:search">
  Search
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/social-media" subtitle="Links to your social profiles and the sharing options on your store." icon="lucide:workflow">
  Social media
</PageLink>

<PageLink href="https://docs.foxecom.com/motrix-theme/theme-settings/typography" subtitle="Fonts, sizes, weights, letter spacing, and text transform." icon="lucide:letter-text">
  Typography
</PageLink>

## Where to start

If you are setting up Motrix for the first time, we recommend this order:

1. **Logo** — upload your logo and favicon.
2. **Colors** — build the color schemes your brand uses.
3. **Typography** — pick your heading and body fonts.
4. **Appearance** and **Layout** — set page width, corner radius, and button style.
5. **Product cards**, **Collection cards**, and **Blog cards** — design how content is presented.
6. **Cart**, **Search**, **Badges**, and **Product compare** — tune the shopping experience.