Benefits Pro

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.

PreviousBenefits Cards Pro 2NextImage & VIdeo With Text

Last updated