Global Theme Settings

Global Theme Settings control the look, feel, and behavior of your entire store. Unlike section-specific options, these settings apply across every page, giving your brand a consistent, professional identity. Set these first, they save time and keep every page consistent.

Below is a breakdown of the main categories you’ll work with inside Surge.

Accessing The Global Theme Settings

1. Open your theme editor
2. Click on the “Gear Icon” on your sidebar.
3. This will open up the access to all your Global Theme Settings for your theme.

Styling The Section

Global Theme Settings define the overall look, feel, and functionality of your Shopify store, ensuring visual and brand consistency across all pages.

From typography and color palettes to buttons and spacing, these settings act as your store’s design foundation. Setting them up first helps maintain a cohesive brand identity, streamline customization, and save time when building or updating pages.

What it does: Input your license here to unlock the world's high converting Shopify theme!

How to use: Paste the license key provided at purchase into Theme Settings → License KEY and click Save.

Tip: Keep your license key in a password manager. If you change stores or reinstall the theme, you’ll need this key.

What it does:

Controls all site-wide color values. Buttons, backgrounds, pagination, and slider icons, giving your store its visual identity.

Sub-settings & what they mean:

• Background Button
  
  The solid fill color of all default buttons (e.g., Add to Cart).
  
  

• Text Button
  
  The color of text that appears inside buttons.
  
  

• Background Page Default
  
  The overall background color for every page (the canvas behind sections).
  
  

• Pagination Slide
  
  The default dot or line color used for inactive slides in carousels or galleries.
  
  

• Pagination Active Slide
  
  The color of the currently active pagination dot or line.
  
  

• Arrows Slider
  
  The color of navigation arrows used in sliders or image carousels.
  
  

Tip: Use one strong accent color for key actions (e.g., “Add to Cart”) and softer neutrals for backgrounds to maintain contrast and focus.

What it does:

Defines how all buttons look and behave across your store i.e borders, corners, fill, and text.

Sub-settings & what they mean:

• Border Color
  
  Outline color for buttons when borders are enabled.
  
  

• Button Border Size
  
  Thickness of that outline in pixels (e.g., 1 = thin line, 2 = thicker edge).
  
  

• Button Corner Radius
  
  How rounded button corners are; higher numbers make pill-shaped buttons.
  
  

• Button Background
  
  The main background color of the button.
  
  

• Button Text Color
  
  The color of the text inside the button.
  
  

Tip: Keep consistent styling for all CTAs, a unified button design improves trust and usability.

What it does:

Controls the fonts used globally for headings and body text, affecting readability and brand feel.

Sub-settings & what they mean:

• Headings
  
  The font used for titles, product names, and major headings.
  
  

Note: Decorative fonts can make pages heavier to load.

• Body
  
  The font for product descriptions, paragraphs, and smaller text.
  
  

Note: Choose clean, legible fonts; switching to web-hosted fonts may affect performance.

Tip: Pair a bold display font for headings with a simple sans-serif for body text to keep content balanced and readable.

What it does:

Controls the overall structure of your store. The maximum content width and whether sections stretch edge-to-edge or stay contained.

Sub-settings & what they mean:

• Width Container All / Section Choose for All
  
  Lets you apply one container setting to every section globally, keeping layouts consistent.
  
  

• Width All Section Container
  
  Choose between:
  
  

• FULL WIDTH: content spans the entire browser window (modern, airy feel).
  
  

• CONTAINED: content stays within a centered fixed-width box (classic, balanced layout).
  
  

Tip: Use FULL WIDTH for bold, image-heavy homepages and CONTAINED for text-heavy or product pages to maintain readability.

What it does:

Adds social icons/links site-wide (header/footer).

Tip: Use full profile URLs and check that icons open in a new tab.

What it does:

Controls how your store’s search feature behaves and what kind of product information appears in suggestions as customers type.

Sub-settings & what they mean:

• Enable Product Suggestions
  
  Turns on the live dropdown that automatically shows matching products as users type in the search bar.
  
  

• Show Vendor
  
  Displays each product’s vendor or brand name next to its title (only visible when product suggestions are enabled).
  
  

• Show Price
  
  Displays product prices directly in the search suggestions (also visible only when product suggestions are enabled).
  
  

Tip: Enable both vendor and price for quick, informative search results. This helps customers identify products faster without leaving the page.

What it does:

Adds the small icon that appears in browser tabs, bookmarks, and search results, helping users recognize your brand instantly.

Sub-settings & what they mean:

• Favicon Image
  
  Upload your favicon file (ideally a simple logo or symbol).
  The system automatically scales it to 32 × 32 px for best browser compatibility.
  
  

Tip: Use a clean, minimal image (SVG or PNG format). Avoid long text or fine details as they won’t be visible at this tiny size.

What it does:

Controls your store’s main logo appearance across header and mobile views.

Sub-settings & what they mean:

• Logo Site
  
  Upload your store’s main logo image (transparent PNG or SVG recommended).
  
  

• Width
  
  Defines how wide your logo appears on desktop screens (in pixels).
  
  

• Mobile Width
  
  Sets the logo size specifically for mobile devices to ensure proper scaling and legibility.
  
  

Tip: Keep both desktop and mobile widths consistent for brand recognition. Between 120–180 px works well.

What it does:

Shows payment method badges (Visa, PayPal, UPI etc.) in the footer, helping customers feel confident about checkout options.

Sub-settings & what they mean:

• Payment Icon 1 – 7
  
  Upload image files (SVG preferred) for each supported payment method you’d like to display.
  
  You can add up to 7 different icons, each one appears horizontally in your footer area.
  
  

Tip: Show only the payment options you actually accept to avoid confusion at checkout.

What it does:

Controls whether your store’s header remains visible as users scroll, improving navigation and accessibility.

Sub-settings & what they mean:

• Enable Sticky Header
  
  Keeps the header fixed to the top of the screen when customers scroll upward, ensuring quick access to navigation, search, and cart icons.
  
  

Tip: Sticky headers work best for stores with short menus. They maintain visibility without covering too much screen space on mobile.

What it does:

Allows you to add your own CSS code for advanced styling or design adjustments across your entire online store.

Sub-settings & what they mean:

• Custom CSS Field
  
  Paste your CSS snippets here to override or enhance theme styles.
  
  

• Learn More Link
  
  Opens Shopify’s official documentation on using Custom CSS safely.
  
  

Tip: Use this field for small, targeted tweaks only. Always preview on mobile and desktop after saving.