Materia Theme
  • What is Materia?
  • Getting Started
    • Download & Install
    • Theme License & Activation
    • Create Pages - Required
  • Theme Updates
  • Required Apps
  • Recommended Apps
  • Mega Menu
  • Store Settings - Required
  • Materia Theme Dashboard
  • Theme Settings
    • Logo
    • Favicon
    • Layout Settings
    • Typography
    • Color Schemes
    • Website Intro
  • Overall Zoom
  • Browser Tab Messages
  • Badges
  • Notification Bubble
  • Buttons Customization
  • Main Collection Filter
  • Product Card Settings
  • Product Variant Swatches
  • Search Behavior Settings
  • Wishlist
  • Cart Settings
  • Social Media
  • Preloader Settings
  • Currency Display Settings
  • Cookies
  • Speed Optimization
  • General Store Information
  • Terms and Conditions Settings
  • Theme Sections
    • Header
    • Announcement Bar Basic
    • Upper Navigation Bar
    • Announcement Bar Pro 1
    • Hero Pro 1
    • Hero Image 1
  • Hero Banner 2
  • Hero Product 2
  • Carousel Hero Slider
  • Slideshow Pro
  • Image
  • Video
  • Benefits Cards Pro 2
  • Benefits Pro
  • Image & VIdeo With Text
  • Image With Icons
  • Image With Benefits
  • Image With Text Pro
  • Page's global sections
    • Announcement Bars
    • Header
    • Footer
    • Mobile Navigation Bar
    • Back To Top Pro
  • Overlay Group
    • Cookie Consent Banner
    • Mobile Navigation Bar
    • Page Tag
    • Custom Color Swatches
    • Order Notification Pro 1
    • Image Banner Popup
    • Promotion Banner Pro
    • Back To Top Pro
  • Products & Collections
    • Product Page
      • Breadcrumbs
      • Product Snippets
        • Product – Trust Badges
        • Product - Upsell Addon
        • Product-Payment Badges #1
        • Product - Sold Social Proof
        • Product - Bundle Pro
        • Product – Text Timer
        • Product - Promo Banner
        • Product - Vertical Benefits
        • Product - Payment Badges #2
        • Ecomz – Discount Coupon
        • Product - Size Chart Image
        • Product - Circle Images
      • Product Information
      • Product Templates
    • Collection Page
      • Collection Template
  • Other Pages
    • 404 Page
    • Blogs
    • Customer Login
    • Cart & Checkout
  • FAQs
    • Missing images when install Materia
    • Why are some pages missing?
    • Theme translation
    • Change currency
    • Why Does the Desktop Preview Look Compressed in the Theme Editor?
    • How to change fonts?
Powered by GitBook
On this page
  1. Other Pages

404 Page

PreviousCollection TemplateNextBlogs

Last updated 1 month ago

This section allows you to customize the appearance of your 404 Not Found error page—keeping the style consistent with your store while offering a user-friendly fallback when a page doesn't exist.


Background Settings

You can choose between a solid background or a gradient. Toggle the gradient option on to enable additional customization.

  • Background Color: #FFFFFF The fallback solid background color used when the gradient is disabled.

Enable Background Gradient (Toggle)

If enabled, the following options become active:

  • Gradient Color 1: #F3F3F3

  • Gradient Color 2: #B8B8B8

  • Gradient Color 3: #3B3B3B

  • Gradient Degree: 135° Defines the direction of the gradient transition.

Use the gradient to create a more engaging or branded visual experience on your 404 page.


Text Styling

Customize the text appearance to better match your brand tone or visual style.

  • Heading Text Color: #303030 The color of the main 404 error heading.

  • Subheading Text Color: #585858 The color of the supporting message or description.

  • SVG Icon Color: #FF1B1B Sets the color of the 404 page icon or alert symbol (if used).


Typography Settings

Adjust the size of headings and subheadings across desktop and mobile devices.

  • Heading Font Size:

    • Desktop: 64px

    • Mobile: 42px

  • Subheading Font Size:

    • Desktop: 20px

    • Mobile: 15px

These settings ensure your 404 page content remains legible and balanced across all devices.


Use Case

Use the 404 page settings to:

  • Maintain a consistent visual design across all areas of your site.

  • Display a clean, branded fallback message when a user lands on a broken or deleted URL.

  • Optionally style with gradients and bold SVG icons to draw attention or direct users back to the homepage.