Featured Product Section

The featured product section displays a single product with its image, details, pricing, and an add-to-cart button. It's perfect for showcasing a featured product on your homepage or any page.

Overview

This section creates a product showcase card with the product image on one side and product details (title, price, description, rating) on the other. Customers can select variants and add the product to cart directly from this section.

Where to Use

  • Homepage: Feature your best-selling or new product
  • Collection pages: Highlight a featured product from the collection
  • Landing pages: Product-focused landing pages
  • Any page: When you want to showcase a specific product

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

Layout Structure

The section displays in a two-column layout:

┌─────────────────────────────────────┐
│  ┌──────────┬──────────────────┐   │
│  │          │  Rating (optional)│   │
│  │ Product  │  Product Title   │   │
│  │  Image   │  Price           │   │
│  │          │  Description     │   │
│  │          │  Variants (if any)│   │
│  │          │  Add to Cart    │   │
│  │          │  View Details    │   │
│  └──────────┴──────────────────┘   │
└─────────────────────────────────────┘
  • Left or Right: Product image (configurable)
  • Other side: Product details and form

Settings

Content

Product

  • Select the product to feature
  • Product information is pulled from the selected product
  • Tip: Choose a product that represents your brand well

Heading Size

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

Show Rating

  • Displays star rating above the product title
  • Default: Enabled
  • Tip: Helps build trust and social proof

Rating Value

  • The star rating value to display
  • Range: 0-5 (in 0.5 increments)
  • Default: 4.5
  • Tip: Use realistic ratings (4.0-5.0)

Review Count

  • Number of reviews to display
  • Default: 128
  • Tip: Use realistic numbers

Rating Color

  • Color of the star rating
  • Options: Accent, Primary button, Secondary button, Text color
  • Default: Accent
  • Tip: Accent color usually looks best

Layout

Image Position

  • Where the product image appears
  • Options: Left, Right
  • Default: Left
  • Note: On mobile, image always appears on top
  • Tip: Alternate positions for visual variety

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

Styling

Card Border Radius

  • Rounds the corners of the product card
  • Range: 0-50px
  • Default: 16px
  • Tip:
    • 0px: Sharp corners
    • 8-16px: Subtle rounding (recommended)
    • 20-30px: More rounded, modern look

Card Shadow

  • Shadow effect on the product card
  • Options: None, Small, Medium, Large, Extra large, 2XL
  • Default: 2XL
  • Tip: Larger shadows create more depth

Card Shadow (Hover)

  • Shadow effect when hovering over the card
  • Options: None, Small, Medium, Large, Extra large, 2XL, 3XL
  • Default: 3XL
  • Tip: Hover shadow creates interactive feel

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

Product Information Displayed

The section automatically displays:

  • Product Image: Featured product image (with secondary image on hover if available)
  • Product Title: Product name
  • Price: Current price (shows sale price if on sale)
  • Description: Product description (truncated to 40 words)
  • Rating: Star rating with review count (if enabled)
  • Variants: Dropdown selectors for product options (if product has variants)
  • Add to Cart Button: Adds product to cart
  • View Full Details Button: Links to full product page

How It Works

Product Selection

  • Select a product from your store
  • All product information is pulled automatically
  • Product must be published and available

Variant Selection

  • If product has variants (size, color, etc.), dropdowns appear
  • Customers can select options before adding to cart
  • Price updates automatically when variant changes

Add to Cart

  • Customers can add product directly to cart
  • Button shows loading state while adding
  • Cart count updates automatically
  • Button shows success message after adding

Image Display

  • Shows product's featured image
  • If product has multiple images, second image appears on hover
  • Image is clickable and links to product page

Common Use Cases

Homepage Featured Product

  • Product: Best-selling product
  • Rating: 4.5 stars, 500+ reviews
  • Image Position: Left
  • Use when: You want to highlight your top product

New Product Launch

  • Product: New product
  • Rating: 4.8 stars, 50 reviews
  • Image Position: Right
  • Use when: Launching a new product

Sale Product

  • Product: Product on sale
  • Rating: 4.7 stars, 200+ reviews
  • Image Position: Left
  • Use when: Promoting a sale item

Collection Featured Product

  • Product: Featured product from collection
  • Rating: 4.6 stars, 300+ reviews
  • Image Position: Right
  • Use when: Showcasing a collection's star product

Tips & Best Practices

✅ Do's

  • Choose a great product: Select a product that represents your brand
  • Use high-quality images: Product image should be clear and appealing
  • Show ratings: Enable ratings to build trust
  • Use realistic ratings: Don't use perfect 5.0 (use 4.0-4.9)
  • Test add to cart: Verify the add to cart functionality works
  • Check variants: Ensure variant selection works correctly
  • Test on mobile: Ensure layout looks good on phones

❌ Don'ts

  • Don't use fake ratings: Use realistic rating values
  • Don't skip product selection: Always select a product
  • Don't use low-quality images: Product image should be professional
  • Don't forget mobile: Always preview on mobile devices
  • Don't ignore variants: Test variant selection if product has options

Product Selection Tips

Best Products to Feature

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

Product Requirements

  • Product must be published
  • Product must be available for purchase
  • Product should have at least one image
  • Product should have a description

Rating Best Practices

Rating Value

  • 4.0-4.5: Good, realistic rating
  • 4.5-4.8: Excellent, highly rated
  • 4.8-5.0: Outstanding, premium quality
  • Tip: Avoid perfect 5.0 (looks less authentic)

Review Count

  • 10-50: New product, growing reviews
  • 50-200: Established product
  • 200-1000: Popular product
  • 1000+: Best-selling product
  • Tip: Use realistic numbers that match your store

When to Show Ratings

  • ✅ Enable: Most products, builds trust
  • ✅ Best for: Products with reviews
  • ⚠️ Disable: New products without reviews yet

Image Position Guide

Left (Default)

  • Best for: Most cases
  • Reading flow: Natural left-to-right
  • Use when: Standard product showcase

Right

  • Best for: Visual variety
  • Reading flow: Image draws attention first
  • Use when: You want a different layout

Mobile Behavior

  • Image always appears on top on mobile
  • Product details appear below image
  • Layout stacks vertically

Card Styling Tips

Border Radius

  • 0px: Sharp, modern look
  • 8-16px: Subtle, professional (recommended)
  • 20-30px: Rounded, friendly feel
  • 30px+: Very rounded, playful

Shadow

  • None: Flat, minimal design
  • Small-Medium: Subtle depth
  • Large-2XL: More depth, premium feel (recommended)
  • Hover shadow: Creates interactive feel

Shadow Combinations

  • Default + Hover: 2XL default, 3XL hover (recommended)
  • Medium + Large: Subtle but noticeable
  • None + None: Flat, minimal design

Variant Selection

How It Works

  • If product has variants, dropdown menus appear
  • Customers select options (size, color, etc.)
  • Price updates automatically
  • Add to cart uses selected variant

Variant Types

  • Size: Small, Medium, Large, etc.
  • Color: Red, Blue, Green, etc.
  • Material: Cotton, Polyester, etc.
  • Style: Any custom option

Best Practices

  • Ensure all variants are properly set up
  • Test variant selection works correctly
  • Verify price updates when variant changes
  • Check availability for each variant

Add to Cart Functionality

How It Works

  • Customer selects variant (if applicable)
  • Clicks "Add to Cart" button
  • Product is added to cart
  • Cart count updates automatically
  • Success message appears

Button States

  • Available: Normal "Add to Cart" button
  • Loading: Shows "Adding..." while processing
  • Success: Shows "Added to Cart" confirmation
  • Sold Out: Button disabled, shows "Sold Out"
  • Unavailable: Button disabled, shows "Unavailable"

Examples

Example 1: Best Seller

  • Product: Best-selling product
  • Rating: 4.7 stars, 500 reviews
  • Image Position: Left
  • Card Shadow: 2XL
  • Border Radius: 16px
  • Result: Professional product showcase

Example 2: New Product

  • Product: New arrival
  • Rating: 4.8 stars, 25 reviews
  • Image Position: Right
  • Card Shadow: Large
  • Border Radius: 20px
  • Result: Modern, eye-catching display

Example 3: Sale Product

  • Product: Product on sale
  • Rating: 4.5 stars, 200 reviews
  • Image Position: Left
  • Card Shadow: XL
  • Border Radius: 12px
  • Result: Prominent sale showcase

Troubleshooting

Product Not Showing

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

Add to Cart Not Working

  • Check: Verify product is available
  • Check: Ensure variant is selected (if product has variants)
  • Check: Test in different browsers
  • Check: Check browser console for errors

Price Not Updating

  • Check: Ensure variants are properly set up
  • Check: Test variant selection
  • Check: Verify product has correct pricing

Rating Not Showing

  • Check: Enable "Show rating" setting
  • Check: Set rating value and review count
  • Check: Verify settings are saved

Image Not Displaying

  • Check: Ensure product has a featured image
  • Check: Verify image is uploaded correctly
  • Check: Try selecting a different product

Variants Not Working

  • Check: Ensure product has variants set up
  • Check: Verify variant options are configured
  • Check: Test variant selection dropdowns

Related Sections

  • Product Spotlight - Product with feature highlights
  • Product - Full product page section
  • Related Products - Product recommendations

Next Steps: