Theme Settings
The panel in the Shopify Customizer lets you control the global appearance and behavior of your online store.
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.
Last updated