How to setup Benefits Grid?
What is the Benefits Grid?
The Benefits Grid displays multiple product benefits in an organized grid layout using FontAwesome icons, titles, and descriptions. Perfect for showcasing key product advantages like premium quality, fast delivery, warranties, or awards with a responsive card-based design that adapts to any screen size.
Step 1: Create Metafield Definitions
Creation Instructions
- Go to Shopify Admin → Settings → Metafields → Products
- Click "Add definition"
- Create each metafield with the specifications below
- Set Type to "Single line text (List)"
- Enable "Allow multiple values" for list functionality
Required Metafield (1 total)
Understanding the Benefit Format
Each benefit item must follow this exact format:
Format Breakdown:
-
icon_class: FontAwesome icon class (e.g.,
fas fa-dumbbell) - title: Concise benefit title (2-4 words recommended)
- description: Detailed description (under 100 characters for best display)
-
Separator: Use
|(space-pipe-space) between each element
Example Benefits:
Step 2: Set Metafield Values
How to Set Values
- Navigate to Products → Select Product → Metafields section
- Find "Jhango Benefits" field
- Add benefits one by one, each in the format specified above
- Use FontAwesome icon classes for icons
- Keep titles concise (2-4 words)
- Keep descriptions under 100 characters for best display
- Save product
Popular FontAwesome Icons for Benefits
Quality & Performance:
-
fas fa-medal- Premium/Award winning -
fas fa-star- Featured/Top rated -
fas fa-trophy- Best seller/Winner -
fas fa-thumbs-up- Approved/Recommended -
fas fa-gem- Premium/Luxury
Shipping & Service:
-
fas fa-shipping-fast- Fast delivery -
fas fa-truck- Reliable shipping -
fas fa-clock- Quick processing -
fas fa-calendar-check- On-time delivery
Trust & Security:
-
fas fa-shield-alt- Protection/Guarantee -
fas fa-lock- Secure/Safe -
fas fa-certificate- Certified/Verified -
fas fa-handshake- Trust/Reliability
Sustainability & Care:
-
fas fa-leaf- Eco-friendly -
fas fa-heart- Made with care -
fas fa-recycle- Sustainable -
fas fa-globe- Environmentally conscious
Key Features
Usage Notes
- Supports FontAwesome 6.4.0 icon classes
- Grid layout with customizable columns (desktop/mobile)
- Icon styling with background circles and borders
- Falls back to default benefits if metafield is empty
- Responsive design with mobile stacking
- Customizable card styling and colors
- Works with any Shopify theme
Visual Guide: Setting Up Metafields
Step-by-Step Screenshots
Here's exactly how the metafields look when you're setting them up in Shopify:
Product Metafields View: This shows how the Benefits Grid metafield appears in your product's metafields section.
Creating Text Metafield (List): This screenshot shows the metafield definition setup for the Benefits Grid. Note the "Single line text (List)" type and the namespace "custom.jhango_benefits".
Frequently Asked Questions
The Benefits Grid is a visual component that displays multiple product advantages in an organized grid layout using FontAwesome icons, titles, and descriptions. It helps highlight key selling points like quality guarantees, fast shipping, awards, or unique features with a responsive card-based design.
No coding experience is required for basic implementation. The tutorial guides you through creating the metafield using Shopify's admin interface and setting values for each product. However, adding the snippet to your theme templates may require basic HTML knowledge or developer assistance.
Yes, absolutely! Each product can have unique benefits. You can set different FontAwesome icons, titles, and descriptions for each benefit through the product's metafields section. This allows you to highlight product-specific advantages and selling points.
While there's no hard limit, we recommend displaying 3-6 benefits for optimal readability and visual appeal. Too many benefits can overwhelm customers, while too few might not provide enough compelling reasons to purchase.
If no metafield values are set, the Benefits Grid will fall back to default benefits configured in the block settings. This ensures your product pages always display benefits even if specific product metafields aren't configured.
