Theme Settings (Global) Setup Guide
Theme Settings are global configurations that control the core style, layout, and functionality of your entire Shopify store. Changes made here apply to all pages (Product Page, Collection Page, Footer, etc.) — this is the central hub for unifying your store’s visual identity and user experience.
Access Theme Settings via:
Online Store → Themes → Customize → Theme settings (gear icon in left sidebar)
1. Colors (Global Color Settings)
Define the color palette for all elements in your store (backgrounds, text, buttons, etc.). All color values use HEX format.
1.1 Primary Colors (Main Color Group)
Primary background
- Default value: #FFFFFF
- Purpose: Base background color for all store pages
Accent background 1
- Default value: #FDF2F2
- Purpose: Background color for sub-regions (e.g., modules, small sections)
Accent background 2
- Default value: #FDF2F2
- Purpose: Background color for order detail badges
1.2 Text Colors (Text Color Group)
Primary text
- Default value: #3A3A3E
- Purpose: Primary text (e.g., headings, core body content)
Secondary text
- Default value: #3A3A3E
- Purpose: Secondary text (e.g., descriptions, auxiliary information)
Tertiary text
- Default value: #3A3A3E
- Purpose: Tertiary text (e.g., notes, minor explanations)
1.3 Button Colors (Button Color Group)
Primary buttons
- Button background: #3A3A3E (button background color)
- Button text: #FFFFFF (button text color)
- Purpose: Core action buttons (e.g., "Add to Cart", "Buy Now")
Secondary buttons
- Button background: #3A3A3E
- Button text: #FFFFFF
- Purpose: Secondary action buttons (e.g., "Cancel", "View Details")
1.4 Other Color Groups
Filters
- Filter background: #FDF2F2 (filter panel background)
- Filter text: #3A3A3E (filter text color)
Alternate sections
- Alternate background 1: #3A3A3E (used for subscription sections, testimonials, collection banners)
- Alternate background 3: #FDF2F2 (used for search bars, search pages, order detail pages)
Product page
- Product page background: #FDF2F2 (product page background, image placeholders, main menu background)
Errors
- Error message text: #6F0002 (error prompt text, sale price text)
- Sale badge message text: #000000 (sale badge text color)
2. Typography (Global Typography Settings)
Control the font, size, and style of all text in your store (headings, body text, section text).
2.1 Headings (Heading Typography)
Font
- Default value: Outfit
- Purpose: Font family for all headings (page titles, section headings, etc.)
Font size scale
- Default value: 75%
- Purpose: Scaling ratio of heading font size relative to the base size
Logo size scale
- Default value: 110%
- Purpose: Scaling ratio of the store logo size
Font style
- Options: None / All caps
- Purpose: Styling for heading text (whether to display in all uppercase)
2.2 Body Text (Body Typography)
Font
- Default value: Outfit
- Purpose: Font family for all body content
Font size scale
- Default value: 115%
- Purpose: Scaling ratio of body text size relative to the base size
2.3 Section Font Scale
Section font scale
- Default value: 100%
- Purpose: Size ratio of text within sections relative to body text
3. Layout (Global Layout Settings)
Define how content (products, cards, media) is arranged across your store.
3.1 Product Grid
Products per row
- Default value: 4
- Purpose: Number of product cards displayed per row on collection pages (desktop only; mobile auto-stacks to 1 per row)
Image ratio
- Default value: Square
- Options: Square, 16:9 (landscape), 3:4 (portrait)
- Purpose: Aspect ratio for product images in grids (ensures consistent sizing)
3.2 General Layout
Global border radius
- Default value: Square
- Options: Square, Rounded, Pill
- Purpose: Corner shape for all elements (cards, buttons, images)
Border style
- Default value: No border
- Options: No border, Border
- Purpose: Whether to display borders around media elements (images, cards)
4. Styles (Global Style Settings)
Control visual styles for UI elements (banners, badges, form fields) across the store.
4.1 Banner Styles
Banner overlay opacity
- Default value: 30%
- Purpose: Transparency level of the semi-transparent overlay on banners (improves text readability)
Banner text alignment
- Default value: Center
- Options: Left, Center, Right
- Purpose: Horizontal alignment of text on banners (collection banners, blog post banners)
4.2 Badge Styles
Sale badge style
- Default value: Default
- Options: Default, Minimal, Bold
- Purpose: Visual style of "Sale" badges on product cards
New badge style
- Default value: Default
- Options: Default, Minimal, Bold
- Purpose: Visual style of "New" badges on product cards
4.3 Form Field Styles
Form field border style
- Default value: Outline
- Options: Outline, Underline, None
- Purpose: Border style for form fields (contact forms, email signup, checkout)
Form field border radius
- Default value: Square
- Options: Square, Rounded, Pill
- Purpose: Corner shape of form fields
5. Search (Global Search Settings)
Configure the store’s search functionality and display style.
5.1 Search Results
Search results per page
- Default value: 12
- Purpose: Number of search results displayed per page (products, articles, pages)
Show product images in results
- Default value: Enabled
- Options: Enabled, Disabled
- Purpose: Whether to display product thumbnails in search results
Show product prices in results
- Default value: Enabled
- Options: Enabled, Disabled
- Purpose: Whether to display product prices in search results
5.2 Search Bar Style
Search bar position
- Default value: Header
- Options: Header, Sidebar, Hidden
- Purpose: Placement of the search bar in the store layout
Search bar width (desktop)
- Default value: 300px
- Purpose: Fixed width of the search bar on desktop screens
6. Cart (Global Cart Settings)
Control the display and functionality of the store’s cart.
6.1 Cart Display
Cart style
- Default value: Drawer
- Options: Drawer (slide-in panel), Page (separate cart page), Popup
- Purpose: How the cart is displayed when a user adds a product
Show product images in cart
- Default value: Enabled
- Options: Enabled, Disabled
- Purpose: Whether to display product thumbnails in the cart
Show product variants in cart
- Default value: Enabled
- Options: Enabled, Disabled
- Purpose: Whether to display selected product variants (size, color) in the cart
6.2 Cart Functionality
Allow quantity updates in cart
- Default value: Enabled
- Options: Enabled, Disabled
- Purpose: Whether users can adjust product quantities directly in the cart
Show "Continue Shopping" button
- Default value: Enabled
- Options: Enabled, Disabled
- Purpose: Whether to display a button that redirects users back to shopping from the cart
Show estimated shipping in cart
- Default value: Disabled
- Options: Enabled, Disabled
- Purpose: Whether to display estimated shipping costs in the cart (requires shipping settings configuration)
7. Product (Theme Settings: Product)
Configure product-specific global settings (e.g., swatch variants) that apply to all product pages and collections.
7.1 Swatches
Variant option for swatches (singular)
- Default value: Color, Colour
- Purpose: Define singular variant options that should use visual swatches (instead of dropdowns/buttons). Separate multiple options with commas (e.g., "Color, Material") to apply swatches to multiple variant types.
Variant option for swatches (plural)
- Default value: Colors, Colours
- Purpose: Pluralized version of the swatch options (must match the order of the singular options, e.g., "Colors, Materials"). Ensures swatches work consistently if variant option names use plural formatting.
8. Social Accounts (Global Social Settings)
Link your store’s social media profiles to display social icons/links across the store (typically in the Footer or Header).
8.1 Social Profile Links
Twitter
- Default example: https://twitter.com/shopify
- Purpose: Enter the full URL of your store’s Twitter/X profile. A Twitter icon with this link will display in designated areas (e.g., Footer).
Facebook
- Default example: https://facebook.com/shopify
- Purpose: Enter the full URL of your store’s Facebook page. A Facebook icon with this link will display in designated areas.
Pinterest
- Default example: https://pinterest.com/shopify
- Purpose: Enter the full URL of your store’s Pinterest profile. A Pinterest icon with this link will display in designated areas.
Instagram
- Default example: http://instagram.com/shopify
- Purpose: Enter the full URL of your store’s Instagram profile. An Instagram icon with this link will display in designated areas.
TikTok
- Default example: https://tiktok.com/@shopify
- Purpose: Enter the full URL of your store’s TikTok profile. A TikTok icon with this link will display in designated areas.
Tumblr
- Default example: https://shopify.tumblr.com
- Purpose: Enter the full URL of your store’s Tumblr blog. A Tumblr icon with this link will display in designated areas.
YouTube
- Default example: https://youtube.com/shopify
- Purpose: Enter the full URL of your store’s YouTube channel. A YouTube icon with this link will display in designated areas.
9. Favicon (Global Site Icon Settings)
Set a custom favicon — the small icon displayed in browser tabs, bookmarks, and search results — to reinforce your brand identity.
9.1 Site Favicon
Favicon image
- Purpose: Upload a square image (e.g., your store logo) to use as the favicon. The theme will automatically scale it to the standard favicon size (32×32px).
- Best Practice: Use a high-contrast image with a transparent background (PNG format) for optimal display across browsers.
10. Collection Banner (Global Collection Banner Settings)
Configure default settings for collection banners — used as a fallback if a specific collection does not have a custom banner uploaded in the backend.
10.1 Default Collection Banner
Default Collection Banner Image
- Purpose: Select a fallback image to display as the banner for collections that lack a custom banner. Click "Select" to upload your own image or "Explore free images" to use stock photos.
- Recommended Ratio: Use a wide image (16:9 aspect ratio) to match most collection page layouts.
Collection Banner Height
- Default value: 300px
- Purpose: Set the fixed height (in pixels) for all collection banners (both custom and default). Adjust based on your store’s layout — taller banners (400px) for more visual impact, shorter banners (200px) for compact layouts.
Important: Global settings affect every page of your store. Always preview changes (using the "Preview" button in the customizer) before publishing to avoid unintended layout/style issues. Test functionality like cart updates, search results, and social links to ensure they work as expected.
Best Practice: Keep your global color palette and typography consistent to create a cohesive brand experience. For social accounts, only link active profiles (empty fields won’t display icons). For swatches, limit to 1-2 variant types (e.g., only "Color") to avoid cluttering product pages.