How to add Service Tablets in our Shopify Themes?
What are Service Tablets?
Service tablets display up to 3 key product features using FontAwesome icons and custom text. Perfect for highlighting shipping, quality guarantees, or premium features with a modern glassmorphism design.
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"
- No validation required
Required Metafields (6 total)
Step 2: Set Metafield Values
How to Set Values
- Navigate to Products → Select Product → Metafields section
- Find "Jhango Service 1 Icon" field
- Enter FontAwesome icon class (e.g., "fas fa-shipping-fast")
- Repeat for text field and other service metafields
- Save product
Popular FontAwesome Icons
- fas fa-shipping-fast - Fast shipping
- fas fa-shield-alt - Security/protection
- fas fa-medal - Quality/premium
- fas fa-heart - Love/care
- fas fa-thumbs-up - Approval/satisfaction
- fas fa-clock - Time/speed
- fas fa-leaf - Eco-friendly
- fas fa-star - Featured/popular
Key Features
Usage Notes
- Uses FontAwesome 6.4.0 icon classes
- Displays up to 3 service tablets
- Glassmorphism design with backdrop blur
- Highly customizable through block settings
- Falls back to default settings if metafields are empty
- Mobile responsive design
- 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 metafields appear in your product's metafields section. You can see "Free Shipping" entered in the text field and "fas fa-shipping-fast" in the icon field.
Creating Text Metafield: This screenshot shows the metafield definition setup for text fields. Note the "Single line text" type and the namespace "custom.jhango_service_1_text".
Creating Icon Metafield: This shows the setup for icon metafields with the description "FontAwesome icon class for service tablet 1" and namespace "custom.jhango_service_1_icon".
Frequently Asked Questions
Service tablets are visual elements that display up to 3 key product features using FontAwesome icons and custom text. They help highlight important information like shipping policies, quality guarantees, or premium features with a modern glassmorphism design that enhances your product pages.
No coding experience is required for basic implementation. The tutorial guides you through creating metafields 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 service tablets. You can set different FontAwesome icons and custom text for each of the 3 service tablets through the product's metafields section. This allows you to highlight product-specific features and benefits.
Yes, service tablets are designed to work with any Shopify theme. The snippet uses responsive design principles and can be easily integrated into existing product templates. The glassmorphism styling adapts to different backgrounds and layouts.
The service tablets snippet includes fallback functionality. If metafields are empty for a product, the tablets will either be hidden or display default values (depending on your snippet configuration), preventing broken layouts or empty elements from appearing on your product pages.
