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
  • Spacing & Padding Settings
  • Background Settings
  • Media & Image Settings
  • Title Settings
  • Subheading Settings
  • Button Settings
  • Benefits Settings
  • Badge Settings
  • Rating Settings
  • Global Alignment
  • Icon & Customization

Hero Product 2

PreviousHero Banner 2NextCarousel Hero Slider

Last updated 1 month ago

Spacing & Padding Settings

Fine-tune the padding around your content across devices.

  • Top Padding (Mobile): 170px

  • Bottom Padding (Mobile): 60px

  • Top Padding (Desktop): 200px

  • Bottom Padding (Desktop): 100px

  • Left & Right Padding (Mobile/Desktop): 20px each

  • Vertical Gap Between Content and Image (Mobile): 10px

  • Spacing Between Elements: 25px

Background Settings

Customize the look and feel of the section background.

  • Background Color: #FF8F9E

  • Background Image: Upload an optional image

  • Background Video URL: Paste an .mp4 link

  • Background Brightness (%): 80

Media & Image Settings

Set up the visual product image.

  • Section Image: Upload or select from free library

  • Image Width/Height (Mobile): 300px

  • Image Width/Height (Desktop): 440px

  • Image Horizontal Position (Desktop): 10%

  • Note: Mobile image is centered by default.

Title Settings

Configure your main headline.

  • Title Text: Empowering your body everyday.

  • Color: #FFFFFF

  • Font Size: 37px (Mobile), 51px (Desktop)

  • Font Weight: Light / Normal / Bold

  • Custom Font URL: Paste link (optional)

Subheading Settings

  • Text: Our product uses natural ingredients & modern technologies to make you feel great and stay free!

  • Text Color: #F1F1F1

  • Font Size: 16px (Mobile), 17px (Desktop)

Button Settings

Design and configure the primary button.

  • Main Text: Shop

  • Second Text: Now (Pink Cherry Text)

  • Button Link: /

  • Background Color: #FDFDFD

  • Hover Background Color: #E9E9E9

  • Text Color: #202020

  • Hover Text Color: #1D1D1D

  • Second Text Color: #FF20A2

  • Hover Second Text Color: #DB2777

  • Border Radius: 4px

  • Button Size: 14px

Benefits Settings

Display benefits with custom SVG icons and descriptions.

  • Benefit Icon Size: 21px

  • Benefit 1 Text: Lorem Ipsum Dolor – Sit consectetur.

  • Benefit 2 Text: Adipiscing Elit Vero – Sed do eiusmod.

  • Benefit 3 Text: Tempor Incididunt Labore – Ut minim.

  • Text Font Size: 15px

  • Text Color: #F4F4F4

Badge Settings

  • Badge 1: MULTIPLE VITAMINS, Background: #000000

  • Badge 2: PARABEN FREE, Background: #FF2B8A

  • Text Color: #FFFFFF

  • Font Size: 12px

  • Border Radius: 4px

  • Font Weight: Light / Normal / Bold

Rating Settings

  • Star Rating: 4.5

  • Rating Text: Trusted by over +1255 people

  • Filled Star Color: #A15252

  • Unfilled Star Color: #BE7A7A

  • Text Font Size: 15px

  • Text Color: #F7F7F7

Global Alignment

  • Alignment Options: Left / Center / Right Sets how all content within the section aligns.

Icon & Customization

  • Enable SVG Icon Color Customizer: Toggle

  • SVG Icon Color: #000000

SVG Icon Slots (1–3): Paste SVG code from a site like

SVGRepo