Product Spotlight Section

The product spotlight section showcases a featured product with key features displayed around it. It creates an eye-catching layout with the product image in the center and feature highlights on the sides.

Overview

This section creates a unique three-column layout: product features on the left, the product image in the center, and more features on the right. It's perfect for highlighting a featured product with its key benefits or features.

Where to Use

  • Homepage: Feature your best-selling or new product
  • Collection pages: Showcase a featured product from the collection
  • Product pages: Highlight product features
  • Landing pages: Product-focused landing pages

Note: The product spotlight section cannot be used in header or footer groups.

Layout Structure

The section displays content in this unique layout:

┌─────────────────────────────────────┐
│        Label / Heading / Description │
├──────────┬──────────┬───────────────┤
│ Feature 1│          │   Feature 3    │
│          │  Product │                │
│ Feature 2│  Image   │   Feature 4    │
│          │          │                │
└──────────┴──────────┴────────────────┘
  • Left column: First 2 feature blocks
  • Center: Product image with button
  • Right column: Last 2 feature blocks (if you add 3-4 features)

Settings

Content

Label

  • Small text above the heading
  • Examples: "Best Seller", "New Arrival", "Featured"
  • Tip: Keep it short (2-3 words)

Heading

  • Main large text
  • Your product spotlight message
  • Tip: Keep it concise and impactful (5-7 words)

Heading Size

  • Controls the visual size of the heading
  • Options: XL, 2XL, 3XL, 4XL
  • Default: 3XL
  • Tip: Larger sizes (3XL, 4XL) for more impact

Description

  • Supporting text below the heading
  • Brief product description or value proposition
  • Tip: Keep it brief (1-2 sentences)

Product

Product

  • Select the product to showcase
  • Product image and link are pulled from the selected product
  • Tip: Choose a product that represents your brand well

Button Label

  • Text on the button over the product image
  • Examples: "View Product", "Shop Now", "Learn More"
  • Default: "View product"
  • Tip: Use action-oriented language

Colors

Color Scheme

  • Select a color scheme for the section
  • Controls text colors, background, and button colors
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that complements your product image

Padding

Top Padding

  • Space above the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room from previous section

Bottom Padding

  • Space below the section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room before next section

Blocks

Feature Block

What it does: Highlights a key product feature or benefit with an icon, title, and description

Limit: Up to 4 feature blocks

Layout:

  • First 2 features: Display on the left side
  • Last 2 features (if added): Display on the right side

Settings:

Icon

  • Custom SVG Code: Paste custom SVG code (takes priority)
  • Lucide Icon Name: Icon from Lucide library (e.g., "star", "truck", "shield-check")
  • Icon Size: 16-64px (default: 40px)

Popular Icons:

  • star - Quality, ratings
  • truck - Shipping, delivery
  • shield-check - Security, protection
  • package - Products, packaging
  • award - Quality, awards
  • heart - Favorites, love
  • check - Confirmation, benefits

Content

  • Title: Feature title (e.g., "Free Shipping", "Premium Quality")
  • Description: Brief feature description (1 sentence)

Best for:

  • Product benefits
  • Key features
  • Value propositions
  • Trust signals

Common Use Cases

Featured Product with Benefits

  • Product: Best-selling product
  • Label: "Best Seller"
  • Heading: "Our Most Popular Product"
  • Description: Brief product overview
  • Features:
    1. Free shipping
    2. Premium quality
    3. 30-day returns
    4. Expert support
  • Button: "Shop Now"

New Product Launch

  • Product: New product
  • Label: "Just Launched"
  • Heading: "Introducing Our Latest Innovation"
  • Description: Product launch message
  • Features:
    1. New technology
    2. Improved design
    3. Better performance
    4. Limited availability
  • Button: "View Product"

Product with Key Features

  • Product: Feature-rich product
  • Label: "Featured"
  • Heading: "Everything You Need"
  • Description: Product value proposition
  • Features:
    1. Durable construction
    2. Easy to use
    3. Versatile design
    4. Great value
  • Button: "Learn More"

Tips & Best Practices

✅ Do's

  • Choose a great product: Select a product that represents your brand
  • Add 2-4 features: Maximum impact with 2-4 feature blocks
  • Use relevant icons: Icons should match the features
  • Keep text concise: Short titles and descriptions
  • Use high-quality product image: Product image should be clear and appealing
  • Balance features: Distribute features evenly (2 on each side)
  • Test on mobile: Ensure layout looks good on phones

❌ Don'ts

  • Don't add more than 4 features: Section designed for maximum 4
  • Don't use mismatched icons: Icons should relate to features
  • Don't write long descriptions: Keep feature descriptions brief
  • Don't forget the product: Always select a product
  • Don't skip features: Add at least 2 features for best layout
  • Don't ignore mobile: Always preview on mobile devices

Feature Organization Tips

Recommended Feature Count

2 Features (Minimum)

  • Both appear on the left side
  • Simple, focused layout
  • Best for: Highlighting 2 key benefits

4 Features (Recommended)

  • 2 on left, 2 on right
  • Balanced, professional layout
  • Best for: Comprehensive product showcase

Feature Order

Left Side (First 2 features):

  • Most important features
  • Primary benefits
  • Key selling points

Right Side (Last 2 features):

  • Secondary features
  • Additional benefits
  • Supporting points

Feature Content Tips

Titles:

  • Keep short (2-4 words)
  • Use action words or benefits
  • Examples: "Free Shipping", "Premium Quality", "30-Day Returns"

Descriptions:

  • One sentence maximum
  • Focus on benefit, not feature
  • Clear and specific

Icon Guidelines

Using Lucide Icons

Popular Icons for Products:

  • truck - Shipping, delivery
  • shield-check - Security, warranty
  • star - Quality, ratings
  • package - Products, packaging
  • award - Quality, awards
  • check - Benefits, features
  • heart - Favorites, love
  • thumbs-up - Satisfaction

How to Use:

  1. Go to Lucide icon library (lucide.dev)
  2. Find the icon you want
  3. Enter the icon name in "Lucide icon name" field
  4. Adjust size (40px is usually good)

Using Custom SVG

When to Use:

  • You need a specific icon not in Lucide
  • You want a branded icon
  • You need a custom design

How to Use:

  1. Get your SVG code
  2. Paste it in "Custom SVG code" field
  3. Custom SVG takes priority over Lucide icon

Product Selection Tips

Choosing the Right Product

Best Products to Feature:

  • ✅ Best-selling products
  • ✅ New arrivals
  • ✅ Featured products
  • ✅ Products with great images
  • ✅ Products that represent your brand

Product Image:

  • Use high-quality product images
  • Ensure product is clearly visible
  • Good lighting and composition
  • Product should be the focus

Examples

Example 1: Best Seller Spotlight

  • Label: "Best Seller"
  • Heading: "Customer Favorite"
  • Description: "Our most popular product, loved by thousands of customers."
  • Product: Best-selling product
  • Features:
    1. star - "5-Star Rated" - "Rated 5 stars by 10,000+ customers"
    2. truck - "Free Shipping" - "On all orders over $50"
    3. shield-check - "30-Day Returns" - "Hassle-free returns"
    4. heart - "Customer Favorite" - "Our most loved product"
  • Button: "Shop Now"

Example 2: New Product Launch

  • Label: "Just Launched"
  • Heading: "Introducing Our Latest Innovation"
  • Description: "Experience the next generation of quality and design."
  • Product: New product
  • Features:
    1. package - "New Technology" - "Cutting-edge features"
    2. award - "Premium Quality" - "Built to last"
    3. check - "Easy to Use" - "Simple setup and operation"
    4. star - "Limited Edition" - "Available for a limited time"
  • Button: "View Product"

Troubleshooting

Product Not Showing

  • Check: Make sure a product is selected
  • Check: Verify product is published and available
  • Check: Ensure product has an image

Features Not Displaying

  • Check: Make sure you've added feature blocks
  • Check: Verify feature settings are filled in
  • Note: First 2 features appear on left, last 2 on right

Layout Looks Off

  • Check: Add 2 or 4 features for best balance
  • Check: Preview on different screen sizes
  • Check: Ensure product image is good quality

Icons Not Showing

  • Check: Enter icon name in "Lucide icon name" field
  • Check: Verify icon name is correct (check Lucide library)
  • Check: Or paste custom SVG code

Button Not Clickable

  • Check: Verify product is selected
  • Check: Button links to product page automatically
  • Check: Test on different devices

Related Sections

  • Featured Product - Simple product showcase
  • Product - Full product page section
  • Related Products - Product recommendations

Next Steps: