Product Ad Shortcodes

This document explains how to use the product advertisement shortcodes for your LED effects website.

Available Shortcodes

1. Product Ad Card

Purpose: Display individual product advertisements with pricing and features.

HTML Implementation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="product-card">
  <span class="product-badge premium">Tutorial Compatible</span>
  <img src="https://pixel-led-effects.com/images/pixel-led-effects-pack-1.png" alt="LED Effects Pack" class="product-image" loading="lazy">
  <div class="product-content">
    <div class="product-header">
      <h3 class="product-title">Perfect for Your Projects!</h3>
    </div>
    <p class="product-description">3,979 professional LED effects - exact pack used in our tutorials</p>
    <div class="product-features">
      <span class="feature-tag">Tutorial Compatible</span>
      <span class="feature-tag">30 FPS Quality</span>
      <span class="feature-tag">SWF/AVI/MP4 Formats</span>
    </div>
    <div class="product-pricing">
      <span class="original-price">$29.99</span>
      <span class="current-price">$19.99</span>
      <span class="savings-badge">Save 33%</span>
    </div>
    <a href="https://lededit.gumroad.com/l/led-effects-pack-1-3979-animations-lededit-jinx-glediator?wanted=true" class="product-button" target="_blank">
      <span>🛒</span>
      <span>Get This Pack</span>
    </a>
  </div>
</div>

Parameters:

• product (required): Product identifier
• url (required): Purchase URL
• description (optional): Product description
• price (optional): Current price
• original_price (optional): Original price for comparison
• badge (optional): Badge type (premium, popular, new, free)
• features (optional): Array of feature strings
• cta (optional): Button text (default: “Get Now”)

2. Special Offer Banner

Purpose: Display limited-time special offers with savings and urgency.

HTML Implementation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="cta-banner success">
  <div class="cta-content">
    <h3>🎉 Limited Time 2026 Special Offer - Save $10 Per Pack!</h3>
    <p>Get both premium LED effects packs for just $19.99 each (was $29.99).</p>
    <div class="cta-features">
      <div class="cta-feature">
        <span class="feature-icon">✨</span>
        <span>3,979+ Professional Animations</span>
      </div>
      <div class="cta-feature">
        <span class="feature-icon">⚡</span>
        <span>30 FPS Quality</span>
      </div>
    </div>
    <div class="cta-pricing">
      <span class="original-price">$29.99</span>
      <span class="current-price">$19.99</span>
      <span class="savings-badge">Save $10</span>
    </div>
    <a href="https://lededit.gumroad.com/l/led-effects-pack-1-3979-animations-lededit-jinx-glediator?wanted=true" class="cta-button" target="_blank">
      <span>🎄</span>
      <span>Get Both Packs - Save $20 in Total!</span>
    </a>
    <div class="cta-timer">⏰ Limited Time</div>
  </div>
</div>

Parameters:

• product (required): Product identifier
• url (required): Purchase URL
• title (required): Offer title
• description (optional): Offer description
• price (optional): Sale price
• original_price (optional): Original price
• savings (optional): Savings amount
• badge (optional): Badge type (limited-time, new, popular)
• features (optional): Array of feature strings
• cta (optional): Button text (default: “Get This Deal”)
• timer (optional): Timer/urgency text
• emoji (optional): Emoji for the offer

3. Call-to-Action Banner

Purpose: General purpose CTA banners for newsletters, downloads, etc.

HTML Implementation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<div class="cta-banner success">
  <div class="cta-content">
    <h3>📧 Get Free LED Effects Every Week</h3>
    <p>Join 10,000+ LED enthusiasts getting free effects, exclusive discounts, and professional tips every week.</p>
    <div class="cta-features">
      <div class="cta-feature">
        <span class="feature-icon">📧</span>
        <span>Weekly free effects</span>
      </div>
      <div class="cta-feature">
        <span class="feature-icon">🎨</span>
        <span>Exclusive content</span>
      </div>
    </div>
    <a href="https://lededit.gumroad.com/l/newsletter" class="cta-button" target="_blank">
      <span>📧</span>
      <span>Subscribe Free</span>
    </a>
  </div>
</div>

Parameters:

• url (required): Target URL
• title (required): Banner title
• description (optional): Banner description
• features (optional): Array of feature objects with icon and text
• cta (optional): Button text (default: “Get Started”)
• button_text (optional): Button text override
• type (optional): Banner style (info, warning, success)

Implementation Strategy

Where to Use These Shortcodes

1. Homepage: Add special offers between main content sections
2. Tutorial Pages: Insert relevant product ads in sidebars or between sections
3. Download Pages: Promote premium packs near free downloads
4. Controller Pages: Advertise compatible effects packs
5. Project Gallery: Show related products for featured projects

Best Practices

1. Strategic Placement: Place ads where users are most likely to convert
2. Relevant Targeting: Match ads to page content (e.g., controller pages get controller-compatible effects)
3. Value Proposition: Always highlight benefits and savings
4. Mobile Optimization: All shortcodes are responsive
5. SEO Friendly: Use descriptive alt text and proper link attributes

Styling Notes

All shortcodes use the existing CSS classes from your theme:

• .product-card: Main product card container
• .product-badge: Badge styling (premium, popular, new, free)
• .product-image: Product image styling
• .product-content: Content container
• .product-features: Feature tags container
• .feature-tag: Individual feature styling
• .product-pricing: Price display container
• .cta-banner: CTA banner container
• .cta-content: CTA content container
• .cta-features: CTA features grid
• .cta-feature: Individual CTA feature
• .feature-icon: Feature icon styling
• .cta-button: Main CTA button

Current Implementation

The site currently uses HTML implementations instead of Hugo shortcodes to avoid template parsing issues. All product advertisements are implemented using:

1. Homepage: Special offer section with HTML banner
2. Products Section: Additional product card for LED Effects Pack 1
3. Free Software Section: Newsletter signup CTA banner
4. Content Pages: Product cards with proper styling

This approach provides the same visual impact and conversion optimization while maintaining Hugo build stability.

• All shortcodes include responsive design
• Dark mode support built-in
• Hover effects and animations
• Consistent with site theme variables
• Mobile-optimized layouts

Tracking Implementation

To track ad performance, you can:

1. Add UTM parameters to URLs
2. Use different product identifiers
3. Monitor clicks with analytics
4. A/B test different placements

Example with UTM:

1

url="https://lededit.gumroad.com/l/pixel-led-effects-pack-1?utm_source=website&utm_medium=shortcode&utm_campaign=tutorial_ad"