Discount Code
The Discount Code block displays promotional offers with a visible discount rate and a copyable coupon code. It can be added to any section or layout to encourage conversions through limited-time incentives.
Settings
- Card class: Custom CSS class for the discount card container (e.g., for spacing or custom styling).
- Card style: Visual preset for the card background, border, and shadow, selected from Theme Settings → Style scheme settings → Cards Style Schema.
- Use background image: Apply a background image to the card using a preset from Theme Settings → Style scheme settings → Background Image Schema.
Discount Rate
- Position: Placement of the discount badge—
left,right. - Show discount amount: Display a fixed monetary discount (e.g., “$10 OFF”).
- Or, show discount percentage: Display a percentage discount (e.g., “20% OFF”).
- Size: Font size of the discount text.
- Color schema: Text and badge color from theme color variables.
Discount Code
- Discount text: Label above the code (e.g., “Use code:”).
- Discount text size: Font size of the label.
- Discount text color schema: Color of the label text.
- Discount code: The actual promo code (e.g.,
SAVE20). - Copy button label: Text on the copy button (e.g., “Copy”).
- Copied button label: Text shown after successful copy (e.g., “Copied!”).
- Show 'ctrl+c': Display a hint like “Ctrl+C” next to the code for desktop users.
- Input style (discount code box): Styling for the code display field, using a preset from Theme Settings → Style scheme settings → Input Style Schema.
Animations on Scroll
- Enable entrance animations as block enter the viewport.
- Configuration follows the standard Animations on Scroll settings.
- See: Blocks → Overview → Animations on scroll