Theme settings
Overview:
You can use theme settings to make changes to your online store’s typography, colors , social media links, cart etc. When you make changes to your theme settings, the changes apply to your entire online store.
Color Schemes
Manage reusable color combinations across your storefront. Color schemes allow merchants to create multiple branded styles and apply them to different sections of the theme.
You can create multiple schemes and customize colors for elements such as text, backgrounds, buttons, borders, icons, and accents.
Customize Color Schemes:
- From your Shopify admin, go to Online Store > Themes.
- Click Customize next to the theme that you want to customize.
- Click Theme settings > Color schemes.
- Under the Schemes section, select an existing scheme (Scheme 1, Scheme 2, Scheme 3) or click Add Scheme to create a new one.
- Click on any color swatch to update colors for text, backgrounds, buttons, borders, and other visual elements.
- Enter a HEX color code or select a color using the color picker.
- Apply the desired color scheme to individual sections throughout your storefront.
- Preview the changes to ensure branding consistency.
- Click Save to apply your changes.
Layout Settings:
Adjust the overall structure and visual appearance of your storefront. These settings control the maximum page width and corner radius used throughout the theme to maintain a consistent layout and design style across all sections.
| Setting | Description |
|---|---|
| Page Width | Controls the maximum width of the storefront content area. Recommended: 1350px–1440px. |
| Corner Radius | Controls the roundness of corners across theme elements such as buttons, cards, images, input fields, and containers. Recommended: 4px–10px |
General Settings
Manage essential theme configurations related to branding, pricing display, and loading appearance.
| Setting | Description |
|---|---|
| Favicon Image | Upload a favicon icon that appears in the browser tab next to your store name. Recommended Size: 32 × 32 px. |
| Show Currency Codes | Enable or disable currency codes next to product prices throughout the storefront (e.g., USD, PKR, GBP). |
| Loader Color | Select the color used for the storefront loading indicator. Example: Custom CSS color selection. |
Typography Settings
Customize the typography used throughout your storefront, including body text, headings, font weights, text sizes, and line heights. These settings help merchants maintain consistent readability, hierarchy, and brand identity across all pages.
General Typography:
These settings control the appearance of body text used throughout the theme.
| Setting | Description |
|---|---|
| Font Family | Select the primary font used for body text across the storefront. Example: DM Sans. |
| Font Weights | Enable only the font weights required for performance optimization. Available weights range from 100 (Thin) to 900 (Black) depending on font support. |
| Base Font Size | Controls the default size of body text throughout the storefront. Example: 16px. |
| Base Line Height | Controls spacing between lines of body text for improved readability. Example: 150%. |
Text Sizes:
Control the size and spacing of different text types used throughout the storefront.
| Setting | Description |
|---|---|
| Small Text Size | Controls the font size for smaller content such as labels, helper text, and captions. Example: 12px. |
| Small Line Height | Controls spacing between lines for small text. Example: 150%. |
| Medium Text Size | Controls medium-sized text used across product information and content areas. Example: 14px. |
| Medium Line Height | Controls line spacing for medium-sized text. |
| Large Text Size | Controls larger body text size. Example: 16px. |
| Large Line Height | Controls spacing for large text content. Example: 150%. |
Headings:
Customize heading typography used throughout the theme.
| Setting | Description |
|---|---|
| Heading Font Family | Select the font used for headings across the storefront. Example: Fraunces. |
| Heading Font Weights | Enable heading font weights supported by the selected font. Only enabled weights will be loaded for better performance. |
Heading Sizes:
Control the size and spacing of heading levels (H1–H6) across the storefront.
| Setting | Description |
|---|---|
| H1 Font Size | Controls the size of primary headings. Example: 66px. |
| H1 Line Height | Controls spacing between lines for H1 headings. Example: 80px. |
| H2 Font Size | Controls the size of secondary headings. Example: 54px. |
| H2 Line Height | Controls spacing for H2 headings. Example: 66px. |
| H3 Font Size | Controls the size of third-level headings. Example: 44px. |
| H3 Line Height | Controls spacing for H3 headings. Example: 56px. |
| H4 Font Size | Controls the size of fourth-level headings. Example: 36px. |
| H4 Line Height | Controls spacing for H4 headings. Example: 47px. |
| H5 Font Size | Controls the size of fifth-level headings. Example: 22px. |
| H5 Line Height | Controls spacing for H5 headings. Example: 32px. |
| H6 Font Size | Controls the size of sixth-level headings. Example: 18px. |
| H6 Line Height | Controls spacing for H6 headings. Example: 28px. |
Button Settings
Customize the appearance and typography of buttons across your storefront.
Typography Settings:
These settings control the appearance of button text.
| Setting | Description |
|---|---|
| Font Size | Controls the size of button text across the storefront. Example: 14px. |
| Line Height | Controls the vertical spacing of button text. Example: 28px. |
| Font Weight | Available options depend on enabled typography settings. Example: Medium, Semi Bold, or Bold. |
| Text Case | Controls text capitalization for buttons. Options may include Uppercase, Capitalize, Lowercase, or None. Example: Uppercase for stronger call-to-action visibility. |
Border Settings:
These settings control the appearance of button borders and shape.
| Setting | Description |
|---|---|
| Border Thickness | Controls the thickness of button borders. Recommended: 1px–2px for modern storefronts. |
| Corner Radius | Controls the roundness of button corners. Recommended: 4px–8px for a balanced and professional design. |
Form Controls Settings
Customize the appearance of form fields such as inputs, dropdowns, search bars, and contact forms.
| Setting | Description |
|---|---|
| Height | Controls the height of form fields. Example: 46px. |
| Font Size | Controls the text size inside form fields. Example: 14px. |
| Line Height | Controls spacing between text lines inside form fields. Example: 147%. |
| Border Thickness | Controls the thickness of form field borders. Recommended: 1px–2px. |
| Corner Radius | Controls the roundness of form field corners. Recommended: 4px–8px. |
Product Settings
Customize the appearance of product variants, swatches, and product badges across your storefront.
| Setting | Description |
|---|---|
| Variant Styles | Choose how product variants are displayed. Example: Native Swatches. |
| Color Swatch Values | Add custom colors or image swatches for product variants. Format: {Dark gray,#A9A9A9}||{Multicolor,image-name.png} . |
| Label Text Size | Controls the size of product option labels. Example: Medium. |
| Text Weight | Controls the font weight of product labels. Example: Medium. |
| Text Case | Controls text capitalization for product labels. Example: Capitalize. |
| Text Font Family Preset Styles | Choose typography style: Default or Headings. |
| Label Color Preset Styles | Select color styling for product labels. |
Product Tags:
Customize the appearance of product badges.
| Setting | Description |
|---|---|
| Sale Tag | Controls text and background color for sale products. |
| Sold Out Tag | Controls badge styling for unavailable products. |
| Pre-order Tag | Controls badge styling for pre-order products. |
| In Stock Tag | Controls badge styling for available products. |
| Low Stock Tag | Controls badge styling for low inventory products. |
Custom Tags:
| Setting | Description |
|---|---|
| Badge Tags | Add custom product badges using format: {New,#000000,#ffffff}||{Trending,#ffffff,#000000} |
Authentication Pages Settings
Customize the appearance of customer account pages, including Login, Register, Reset Password, and Activate Account pages.
| Setting | Description |
|---|---|
| Enable Sign in with Shop | Allows customers to sign in using their Shop account for faster checkout and login. |
| Heading Text | Customize the page heading text. Supports HTML formatting for styled text. |
| Heading Text Size | Controls the size of the page heading. Example: Heading 2. |
| Heading Text Weight | Controls the font weight of the heading. Example: Light. |
| Heading Text Case | Controls text capitalization. Example: Capitalize. |
| Heading Level (SEO) | Select the HTML heading tag for SEO. Example: H1. |
| Heading Font Family Preset Styles | Choose typography style for headings: Default or Body. |
| Heading Color Preset Styles | Select the heading color style: Default or Body. |
| Button Preset Styles | Select the button style for authentication actions. Example: Primary or Secondary. |
| Button Case | Controls button text capitalization. Example: Uppercase. |
| Color Scheme | Select the color scheme applied to authentication pages. |
Available Authentication Pages
- Main Login → Customer login page
- Main Register → Customer account registration page
- Main Reset Password → Password reset page
- Main Activate Account → Account activation page after registration/email verification
Social media:
Customize Social media:
- Click Theme settings > Social media.
- To add links to your social media accounts, enter the links to your accounts in the fields provided under Accounts. Enter full links, such as https://instragram.com/shopify , https://facebook.com/shopify .
- Click Save.