How to setup Gymwear Coupons?

What are Gymwear Coupons?

Gymwear coupons display attractive promotional offers directly on your product pages with click-to-copy functionality. Perfect for showcasing discounts, free shipping offers, or special deals with a modern glassmorphism design that encourages customer engagement and increases conversions.

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 "JSON"
No validation required

Required Metafield (1 total)

Jhango Coupons

custom.jhango_coupons

Purpose: Array of coupon objects with all coupon data

Type: JSON

Description: "Coupon data for product-specific offers"

Understanding the JSON Structure

Recommended JSON Format:

[
  {
    "title": "Premium Collection",
    "description": "20% off all athletic wear and training accessories",
    "code": "MUSCLE20",
    "badge": "Save 20%",
    "icon": "fas fa-dumbbell",
    "highlight_text": "20% off"
  },
  {
    "title": "Express Delivery",
    "description": "Complimentary shipping on orders over $75",
    "code": "FITFREE",
    "badge": "Free Ship",
    "icon": "fas fa-shipping-fast",
    "highlight_text": "Complimentary shipping"
  },
  {
    "title": "Training Sets",
    "description": "30% off professional-grade training collections",
    "code": "GAINS30",
    "badge": "Save 30%",
    "icon": "fas fa-trophy",
    "highlight_text": "30% off"
  }
]

Coupon Object Properties

title: Coupon name/title (string)
description: Detailed coupon description (string)
code: Discount code to copy (string, uppercase recommended)
badge: Short badge text (string, e.g., "Save 20%")
icon: FontAwesome icon class (string)
highlight_text: Text to highlight in description (string)

Step 2: Set Metafield Values

How to Set Values

Navigate to Products → Select Product → Metafields section
Find "Jhango Coupons" field
Enter JSON array following the recommended structure
Ensure all required properties are included for each coupon
Save product

Popular FontAwesome Icons for Coupons

fas fa-dumbbell - Fitness/gym equipment
fas fa-shipping-fast - Fast/free shipping
fas fa-trophy - Premium/award-winning
fas fa-percentage - Percentage discounts
fas fa-gift - Special offers/gifts
fas fa-star - Featured deals
fas fa-fire - Hot deals
fas fa-crown - VIP/exclusive offers
fas fa-heart - Customer favorites
fas fa-bolt - Flash sales

Key Features

Usage Notes

Supports FontAwesome 6.4.0 icons
Click-to-copy functionality with visual feedback
Glassmorphism design with blur effects
Responsive layout with mobile stacking option
Fallback to 3 default coupons if metafield empty
Highlight text feature for emphasis in descriptions
Customizable styling for all elements
Works with any Shopify theme

Visual Guide: Setting Up Metafields

Step-by-Step Screenshots

Here's exactly how the metafield looks when you're setting them up in Shopify:

Shopify metafields interface showing jhango_coupons JSON field

Product Metafields View: The gymwear coupons metafield appears as a JSON text area in your product's metafields section. You can paste your complete coupon data structure here.

Metafield definition setup for jhango_coupons showing JSON type selection

Creating JSON Metafield: When setting up the metafield definition, ensure you select "JSON" as the type. This allows you to store complex coupon data with all the required properties for each offer. This screenshot shows the metafield definition setup for JSON fields.

Frequently Asked Questions

What are gymwear coupons in Shopify?

Gymwear coupons are interactive promotional elements that display attractive offers directly on your product pages. They feature click-to-copy discount codes, eye-catching badges, and FontAwesome icons with a modern glassmorphism design that encourages customer engagement and boosts conversion rates.

Do I need coding experience to implement gymwear coupons?

No coding experience is required for basic implementation. The tutorial guides you through creating the JSON metafield using Shopify's admin interface and structuring coupon data for each product. However, adding the snippet to your theme templates may require basic HTML knowledge or developer assistance.

Can I customize coupons for each product?

Yes, absolutely! Each product can have unique coupon offers. You can create different discount codes, promotional messages, icons, and badges through the product's metafields section. This allows you to showcase product-specific deals and targeted promotions.

How many coupons can I display per product?

While there's no strict limit in the JSON structure, it's recommended to display 2-4 coupons per product for optimal user experience and visual clarity. Too many options can overwhelm customers and reduce conversion effectiveness.

What happens if I don't set metafield values for a product?

If you don't set coupon metafield values, the snippet will fall back to default coupons configured in the block settings. This ensures your product pages always display promotional offers, even if you haven't customized them for specific products yet.