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
  • Section Layout & Spacing
  • Container Layout & Color Scheme
  • Column Spacing
  • Text Content Settings
  • Mobile Layout Settings
  • Card Background Options
  • Example Block Content
  • Custom Code & Display Controls

Benefits Pro

PreviousBenefits Cards Pro 2NextImage & VIdeo With Text

Last updated 1 month ago

The Benefits Pro section is ideal for showcasing key selling points, service highlights, or value-driven perks using a minimal, card-style layout. This component is fully responsive and includes detailed controls for layout, typography, spacing, and backgrounds across both desktop and mobile views.

Section Layout & Spacing

Define how this section is placed and spaced on the page.

  • Section Top Padding: 0px

  • Section Bottom Padding: 0px

  • Section Left Padding (Desktop): 0px

  • Section Right Padding (Desktop): 0px

  • Section Left Padding (Mobile): 0px

  • Section Right Padding (Mobile): 0px

These values allow full edge-to-edge design or fine-tuned spacing depending on your design needs.

Container Layout & Color Scheme

  • Container Layout: Standard Container Use this to determine whether the section content stays within a standard grid or stretches full width.

  • Color Palette: Scheme 1 Defines the overall color theme for background and text defaults within the section.

Column Spacing

  • Column Spacing (Desktop): 90px

  • Column Spacing (Mobile): 20px Controls horizontal spacing between benefit cards depending on the screen size.

Text Content Settings

These settings affect how text appears across all items inside the section.

Content Alignment

  • Content Alignment: Center Align Text is centered within each benefit card for balanced visual alignment.

Heading Text

  • Font Size: 17px

  • Font Weight Options: Light / Medium / Bold

  • Uppercase Option: Toggle ON/OFF to convert heading to uppercase.

  • Bottom Spacing: 10px

Description Text

  • Font Size: 14px

  • Font Weight Options: Light / Medium / Bold

  • Left Padding: 21px

  • Right Padding: 21px Adjust spacing within each card’s body text to improve legibility.

Mobile Layout Settings

  • Enable Mobile Carousel: Toggle ON to enable horizontal scrolling (carousel-style) on mobile.

  • Items per Row (Mobile): Choose between 1, 1.5, or 2 items per row.

  • Enable Full Width on Mobile: Expands the section container to fill the screen on mobile devices.

Card Background Options

Add a clean card-style background to each benefit item.

  • Enable Card Background for Blocks: Toggle ON to activate card styling.

Desktop Dimensions

  • Width: 300px

  • Height: 300px

Mobile Dimensions

  • Width: 300px

  • Height: 300px

Styling

  • Card Border Radius: 0px

  • Card Background Color: #FFFFFF

  • Card Border Thickness: 0px

  • Card Border Color: #CCCCCC

  • Top Padding: 10px

  • Bottom Padding: 10px

These controls let you create sharp or soft-edged cards with optional borders.

Example Block Content

Here’s a sample of what one block might look like in this section:

  • Heading: Free Shipping

  • Description: Enjoy free worldwide shipping and returns, with customs and duties taxes included.

Use similar blocks to highlight unique advantages like guarantees, customer support, or delivery perks.

Custom Code & Display Controls

  • Custom CSS: Add any custom styles for advanced customization.

  • Display Section On: Select the devices this section should appear on (e.g., all devices, desktop only, etc.).

This Benefits Pro section is designed for merchants who want to communicate value clearly without clutter. Whether you’re listing service features, trust points, or simple product highlights, this layout keeps everything structured, readable, and mobile-friendly.