Theme settings are the global controls that apply across your whole store: colors, typography, layout, buttons, and product card behavior. Settings here override defaults and propagate to every section that uses them.
This guide covers what each setting does, when to change it, and which sections it affects.
Where to find theme settings
- In your Shopify admin, go to Online Store, Themes.
- Find Fitcore (in the Theme library if you are still customizing, or under Live theme if you have published).
- Click Customize. The theme editor opens.
- In the left sidebar, click the Theme settings icon (the gear symbol) at the bottom.
The theme settings panel opens with the following groups: Brand, Typography, Layout, Buttons, Colors, Product cards, Product page, Social media, Cart drawer.
This guide covers Brand, Typography, Layout, Buttons, Colors, and Product cards. Product page settings are covered in template-product.md. Social media settings are covered in navigation.md (footer setup). Cart drawer settings are covered in template-cart.md.
Brand
Favicon
The small icon shown in browser tabs and bookmarks.
| Setting | Recommended value |
|---|---|
| Format | .png |
| Size | 32 x 32px |
| Background | Transparent |
To set your favicon, click the Favicon image picker in the Brand group and upload your file.
Social share image
The default image used by social platforms (Facebook, Pinterest, X, LinkedIn, and similar) when a page on your store is shared and that page has no image of its own.
| Setting | Recommended value |
|---|---|
| Format | .jpg or .png |
| Size | 1200 x 630px recommended |
| Aspect ratio | Approximately 1.91:1 |
How the fallback works:
- Product pages: the product's featured image is used.
- Article pages: the article image is used.
- Collection pages: the collection image is used (if set).
- Cart, search, 404, home page without a hero image, and pages without an explicit image: the social share image you upload here is used.
If you do not set a social share image and a page has no image of its own, social platforms will choose an image from the page automatically (or display no image), depending on the platform.
Logo
Your logo is uploaded in the header section settings, not in theme settings. See navigation.md for how to add your logo.
The logo also appears in the footer. The footer logo can be the same as the header logo, or different. Footer logo is configured in the footer section settings (see sections-structural.md).
Typography
Fonts
Fitcore uses two font picker settings.
| Setting | Default | What it controls |
|---|---|---|
| Body font | DM Sans | Paragraph text, body copy, navigation links, buttons, form fields |
| Heading font | DM Serif Display | Section headings, product titles, hero copy |
To change a font:
- Click the font picker for Body font or Heading font.
- Browse the Shopify font library or search by font name.
- Select a font and click Select.
Any font in the Shopify font library is supported. Custom fonts (uploaded files) are not supported through theme settings. Adding a custom font requires code customization and falls outside the scope of standard theme support.
Fitcore loads the bold, italic, and bold-italic variants of the body and heading fonts when those variants are available in the Shopify font library for the font you picked. Not every font has every variant. If a variant is missing for your chosen font, the browser substitutes the closest available match. You do not need to enable variants separately.
Base font size
| Setting | Range | Default | Notes |
|---|---|---|---|
| Base font size (px) | 14 to 20 | 16 | Sets the base for all relative typography |
Changing the base size scales the rest of the type system proportionally. Increase to 18px for stores targeting older audiences. Keep at 16px for general use.
Font weights
| Setting | Range | Default |
|---|---|---|
| Body weight | 300 to 900 | 400 |
| Heading weight | 300 to 900 | 400 |
Font weight is in 100-step increments. 400 is regular. 700 is bold. Not every font supports every weight; if the font you picked does not have weight 700, the browser will substitute the closest available weight.
Line height
| Setting | Range | Default |
|---|---|---|
| Body line height | 1.2 to 2.0 | 1.5 |
| Heading line height | 1.0 to 1.6 | 1.3 |
Higher line height adds vertical breathing room. Use 1.6 to 1.7 for body text on long-form content (blog articles). Use 1.4 to 1.5 for general use.
Letter spacing
| Setting | Range | Default | Unit |
|---|---|---|---|
| Body letter spacing | -0.1 to 0.3 | 0.0 | em |
| Heading letter spacing | -0.2 to 0.5 | -0.1 | em |
Negative values bring letters closer together (tighter typography, common for serif headings). Positive values spread them apart (used sparingly for emphasis or all-caps labels).
Heading sizes
| Setting | Range | Default |
|---|---|---|
| H1 | 28 to 56 | 40 |
| H2 | 24 to 48 | 32 |
| H3 | 20 to 36 | 28 |
| H4 | 18 to 28 | 24 |
| H5 | 14 to 24 | 20 |
| H6 | 12 to 22 | 18 |
All values in pixels. The heading hierarchy is preserved: H1 is always the largest heading on a page, H6 the smallest. Each heading level is visibly different from the others (Shopify accessibility requirement).
If you increase H1 above the default, also check H2 to ensure the hierarchy still feels balanced.
Body sizes
| Setting | Range | Default |
|---|---|---|
| Body size | 14 to 20 | 16 |
| Small size | 12 to 16 | 14 |
The small size is used for captions, helper text, footer copy, and similar secondary text.
Typography spacing
| Setting | Range | Default | Unit |
|---|---|---|---|
| Heading margin block | 0.2 to 2.0 | 0.6 | rem |
| Paragraph margin block | 0.2 to 2.0 | 0.8 | rem |
Margin block controls the space above and below headings and paragraphs. Increase for editorial layouts. Decrease for dense product copy.
Layout
Page width
| Setting | Options | Default |
|---|---|---|
| Page width | Narrow (90rem), Wide (110rem) | Narrow |
Narrow keeps content readable on large screens. Wide uses more horizontal space, suitable for content-heavy and photo-heavy stores.
Page margin
| Setting | Range | Default | Unit |
|---|---|---|---|
| Page margin | 10 to 100 | 20 | px |
The horizontal padding from the screen edge on small screens. Larger values create more breathing room on phones. Smaller values use more screen real estate.
Content corner radius
| Setting | Range | Default | Unit |
|---|---|---|---|
| Content corner radius | 0 to 20 | 8 | px |
Applies to product card images, input fields, and similar content surfaces. 0 gives a hard-edged, modern look. 16 to 20 gives a soft, friendly feel. Choose what matches your brand.
This is separate from button corner radius, which is controlled in the Buttons section.
Breadcrumbs
Breadcrumbs are the navigation trail at the top of inner pages, for example: Home, Collections, Running Shoes, Mens Trail Runner.
| Setting | Type | Default | Notes |
|---|---|---|---|
| Use breadcrumbs | Checkbox | On | Disables on all pages when off |
| Color scheme | Color scheme picker | Scheme 1 | Lets you give breadcrumbs a different background |
| Separator | Slash, Chevron, Arrow, Dot | Slash | Visual style between breadcrumb levels |
| Show home icon | Checkbox | On | Replaces "Home" text with a house icon |
Breadcrumbs are available on supported templates: product, collection, list collections, blog, article, page, search, and 404. They do not appear on the home page or password page.
Buttons
| Setting | Range or type | Default | Notes |
|---|---|---|---|
| Corner radius (px) | 0 to 40 | 8 | Affects all buttons globally |
| Uppercase | Checkbox | On | Forces button labels to uppercase |
| Show shadow | Checkbox | On | Adds a subtle drop shadow |
Button colors are controlled by color schemes (next section).
The accelerated checkout buttons (Shop Pay, PayPal, Google Pay, Apple Pay) keep their branded colors. These are not affected by your button settings, per Shopify policy.
Colors
Fitcore uses a color scheme system. Instead of setting individual colors on every section, you define color schemes once and apply them to sections.
How color schemes work
A color scheme is a set of paired colors that work together. Each scheme defines:
- Background color (and optional gradient)
- Text color
- Accent and accent strong (for icons and links)
- Button background, label, and border
- Secondary button label and border
- Border color (for cards, dividers)
- Surface color (for cards on top of background)
- Focus color (for keyboard focus rings)
- Shadow color
When you apply a scheme to a section, theme-controlled elements in that section (background, text, accents, buttons, borders, focus rings, surfaces) use the matching colors from the scheme. This keeps your store visually consistent without needing to remember which hex code goes where.
Some elements keep their own colors regardless of the scheme. The accelerated checkout buttons (Shop Pay, PayPal, Google Pay, Apple Pay) and the Follow on Shop button retain their branded colors per Shopify policy.
Schemes shipped with Fitcore
Fitcore ships with four color schemes:
| Scheme | Background | Use case |
|---|---|---|
| Scheme 1 | Warm cream (#F8F6F3) | Default light scheme. Use for most sections |
| Scheme 2 | White (#FFFFFF) | Clean light scheme. Use for product-focused sections |
| Scheme 3 | Dark warm (#2A2521) | Dark scheme with brown accents. Use for hero, promotional sections |
| Scheme 4 | Dark warm (#2A2521) with white buttons | Dark scheme with high-contrast buttons. Use for call-to-action sections |
You can edit any scheme or add more.
Editing a color scheme
- In theme settings, scroll to the Colors group.
- Click on a color scheme to open it.
- Edit any color by clicking the color swatch and using the picker.
- Click outside the picker to confirm.
When you change a color, every section currently using that scheme updates immediately.
Adding a new color scheme
- In the Colors group, scroll to the bottom of the scheme list.
- Click Add color scheme.
- Configure the colors for the new scheme.
- The new scheme is now available in the color scheme picker on every section.
Image treatment colors
Image treatment colors apply to text and overlays placed on top of images (hero banners, slideshows, image with text sections).
| Setting | Default | Notes |
|---|---|---|
| Text color | #FFFFFF | Color of text overlaid on images |
| Overlay color | #000000 | Color of the dimming layer between image and text |
| Overlay opacity (%) | 0 to 80 | Default 15 |
| Text shadow (%) | 0 to 100 | Default 20 |
These settings are global to all sections that display text over images, including hero banner, slideshow, image with text, and collection promo hero. The shipped sections in this version of Fitcore use these global settings directly. Individual sections do not currently expose per-section overrides for image treatment.
Color contrast
For accessibility compliance, all body text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt or larger, or 14pt bold) must have a ratio of at least 3:1.
The shipped schemes are configured to meet these targets. If you edit colors, use a contrast checker to verify your custom palette stays compliant. Free tools include the WebAIM contrast checker and built-in browser developer tool checks.
Product cards
Product cards are the small product previews that appear on collection pages, the home page (in featured collection sections), search results, and recommendations. These settings apply globally to every product card across your store.
Display options
| Setting | Default | Notes |
|---|---|---|
| Show vendor | On | Displays the product vendor (brand) name above the title |
| Show description | Off | Displays a short product description below the title. Most merchants leave this off to keep cards clean |
| Show badges | On | Shows Sale, Sold out, and custom badges (Bestseller, Hot, New) |
| Show sale percentage | On | Shows the discount percentage on sale badges (for example, -25%) |
| Quick add | On | Adds a quick-add button on the card. Customers can add to cart without opening the product page |
Inventory threshold
| Setting | Range | Default |
|---|---|---|
| Inventory threshold | 0 to 20 | 5 |
When a product has fewer items in stock than this threshold, an "Only X left" indicator appears on the product card. Set to 0 to disable the indicator entirely.
This is real inventory data from Shopify, not a fake urgency device.
Badge tags
You can mark products as Bestseller, Hot, or New by adding tags in the Shopify admin. The tag values are configurable so you can match your existing tagging conventions.
| Setting | Default tag value | What it does |
|---|---|---|
| Bestseller tag | bestseller | Products with this tag display the Bestseller badge |
| Hot tag | hot | Products with this tag display the Hot badge |
| New tag | new | Products with this tag display the New badge |
To use:
- In the Shopify admin, open a product.
- In the Tags field, add the tag value (for example, "bestseller").
- Save.
The badge appears on the product card automatically.
If you already use different tag values (for example, "best-seller" or "top-pick"), edit the tag values in theme settings instead of retagging your catalog.
What to do next
Once theme settings are configured:
- Read navigation.md to set up your menus.
- Read markets-localization.md if you sell in multiple regions or languages.
- Read home-page.md to start customizing your home page.
End of theme-settings.md.