Features Breakdown: Shipping Bar (Smart) This section is a dynamic "Free Shipping Goal" bar that updates in real-time as customers add items to their cart. It gamifies the shopping experience by showing users exactly how much more they need to spend to unlock free shipping.

1. Threshold & Logic

• Goal Amount: Set the target cart total (e.g., 50) that triggers free shipping.

• Auto-Calculation: The bar automatically reads the current cart value and subtracts it from the goal to display the "Remaining Amount."

• Dynamic Messages:

  • Progress Message: Displayed while the goal is not met (e.g., "Only [montant] left for free shipping!").

  • Success Message: Displayed when the goal is reached (e.g., "🎉 You've unlocked free shipping!").

2. Currency Customization

• Symbol Control: Option to replace the default store currency symbol with a custom one (e.g., "€", "$", "£").

• Positioning: Choose whether the currency symbol appears Before (e.g., €10) or After (e.g., 10 €) the amount.

3. Progress Bar Styling

• Visuals: Customize the Background Color (empty state) and Fill Color (progress state).

• Gradients: Support for a custom Fill Gradient to make the bar pop.

• Shape: Adjust the Bar Height (thickness) and Corner Radius (rounded edges).

• Animation: When the goal is reached (100%), the bar triggers a "Pulse" success animation.

4. Typography & Text

• Font Control: Use the global Theme Font or force a specific Custom Font.

• Hierarchy:

  • Bold Options: Separate checkboxes to bold the Main Text and the Price Amount.

  • Sizing: Independent font-size sliders for Desktop and Mobile.

  • Colors: Distinct color pickers for the General Text vs. the Price/Amount text.

5. Layout & Spacing

• Alignment: Align the text and bar to the Left, Center, or Right.

• Container: Set a Max-Width (px) to keep the bar contained on large screens.

• Padding: Fine-tune margins (Top/Bottom) and side padding (Desktop/Mobile).

6. Visibility

• Device Targeting: Simple checkboxes to Hide the section on Desktop or Mobile.