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. Section Layout
  • 2. Background Styling
  • 3. Scroll / Back to Top
  • 4. Separator Line
  • 5. Country & Language Selectors
  • 6. Social Icons & Payment Logos
  • 7. Footer Copyright
  • 8. Footer Heading Style
  • 9. Footer Spacing
  • 10. Newsletter Signup Block
  • 11. Mobile Collapsible Behavior
  • 12. Store Information (Optional)
  • 13. Footer Menus
  • Final Thoughts
  1. Page's global sections

Footer

PreviousHeaderNextMobile Navigation Bar

Last updated 1 month ago

The footer anchors every page of your site, providing key links, brand information, social proof, and utility features like newsletter sign-ups and language selection. A well-structured footer enhances user trust and makes navigation easier.

1. Section Layout

Footer Width Layout: Container (standard)

Controls the width of the footer content.

  • Container: The content stays aligned to your site’s inner layout (most common).

  • Full Width: Content spans edge-to-edge across the browser.

Color Scheme: Scheme 5

Applies your chosen theme color palette to the footer. This affects background, text, icon, and link colors.


2. Background Styling

Footer Background Image

Upload an image as the footer background (optional). Ideal for adding texture or brand visuals.

  • You can select from free images or upload your own.

  • Brightness: 20 – dims or brightens the background image for better readability of text over it.


3. Scroll / Back to Top

Show Back-to-Top Button

Adds a floating button that lets users scroll back to the top instantly — very helpful for mobile and long pages.

  • Button Background: #353535

  • Hover Background: #EAEAEA

  • Icon Color: #FFFFFF

  • Icon Hover Color: #030303

  • Border Radius: 37 – how round the button corners look (higher number = more pill-like)


4. Separator Line

Show Top Separator

Enables a horizontal line that separates the footer from the section above.

  • You can display this line on every page, or only on specific ones.


5. Country & Language Selectors

Enable dropdowns for:

  • Country Selector: Let users choose their shipping location.

  • Language Selector: Let users switch between languages (if translations are available).

These increase global usability and trust.


6. Social Icons & Payment Logos

Show Social Icons

Displays icons linking to your brand’s social media (Facebook, Instagram, etc.).

Show Payment Icons

Adds visual confirmation that you accept common payment methods (Visa, PayPal, etc.).

  • Custom Payment Image – Upload your own strip of icons or badges.

  • Custom Payment Image Width: 115px – Controls how wide your custom image appears.


7. Footer Copyright

Copyright Text

Example: © 2025 Materia Themes. All rights reserved. Edit this to include your brand name and year.

Copyright Text Position (Mobile):

Choose how it’s aligned on small screens:

  • Left

  • Center

  • Right


8. Footer Heading Style

Heading Font Size: 17

Controls the size of section titles like “Customer Service,” “Information,” or “About Us.”


9. Footer Spacing

Top Padding: 51 | Bottom Padding: 35

Adjusts the amount of white space above and below your footer content.

  • Disable Footer Spacing on Homepage: Removes extra padding at the top/bottom when on the homepage (useful if you have a big hero banner or a unique layout).


10. Newsletter Signup Block

Newsletter Positioning

  • Horizontal Offset: 0 – moves the newsletter block left/right if needed.

  • Horizontal Gap Between Blocks: 43 – controls space between this and other footer columns.

Content Settings

  • Newsletter Heading: "Join Our Community!"

  • Short Description: "Sign up for our newsletter and receive 10% off your first order"

  • Email Placeholder: "Enter your email..."

  • Submit Button Text: "Sign Up"

  • Note (Below Form): Add GDPR text or disclaimer here.

  • Email Input Border Radius: rounds the corners of the input box.


11. Mobile Collapsible Behavior

Open First Block by Default (Mobile Only)

On mobile, footer sections collapse into accordions. If this is checked, the first footer block is expanded by default, helping users see it immediately.


12. Store Information (Optional)

This section is great for adding real-world trust:

  • Show Store Address – Display your physical location.

  • Show Store Phone – Add a clickable phone number.

  • Show Store Email – Add a clickable email link.

  • Store Image: upload a map, storefront photo, or logo.

  • Store Image Width: 118px – size of the image.

  • Width (desktop): 20% – how wide this column is in the desktop footer.


13. Footer Menus

You can add up to 4 columns of footer links. Each can have:

  • Menu Heading: e.g., "Help", "Company", "Resources"

  • Choose a Menu: pull in any existing Shopify menu

  • Width (desktop): e.g., 12, 20 – defines column size (% of total width)


Final Thoughts

The footer might seem simple, but it plays a critical role in UX and branding. It’s often where users go for answers, support, and credibility signals. Use this area to guide users to important actions, display trust signals, and reinforce your brand personality.