Skip to content
Discount
Section overview
The Discount section displays promotional codes that customers can easily copy to their clipboard, often accompanied by descriptive text and an optional image.
Common use cases
- Highlighting active promotional offers or discount codes
- Creating time-limited special offers for seasonal campaigns
- Encouraging first-time purchases with welcome discounts
- Building email list subscriptions by offering discount incentives
Usage tips
- Keep discount codes short and memorable for better customer recall
- Clearly communicate the discount value and any usage limitations in the content area
- Consider adding an expiration date to create urgency
- For mobile users, ensure the copy button is sufficiently large for easy tapping
- Use contrasting colors for the discount code area to make it stand out from other page elements
Section settings
| Setting | Description |
|---|---|
| Top spacing | Controls the padding space above the section (0-300px) |
| Bottom spacing | Controls the padding space below the section (0-300px) |
| Color scheme | Sets the background color theme from predefined store colors |
| Custom color | Defines a custom background color when "Custom" is selected |
| Text color | Determines the text color, with options for default, light, or dark |
| Border color | Sets the color of borders, with subtle or strong options |
| Button color | Defines the style and color of the copy button |
| Enable color fade | Enables smooth background color transitions when scrolling |
| Border position | Determines where borders appear (none, top, bottom, or both) |
| Vertical alignment | Controls how content blocks align vertically (top, middle, bottom) |
| Horizontal alignment | Controls how content blocks align horizontally (left, center, right) |
| Enable margin | Toggles horizontal margin on the section |
| Visibility | Controls section visibility on different device types |
Block settings
Discount
This block displays promotional text and a copyable discount code with a copy button.
- Block limit: 1
| Setting | Description |
|---|---|
| Heading | Main heading text shown above the discount content |
| Content | Rich text area for promotional messaging and offer details |
| Discount code | The promotional code customers can copy to their clipboard |
| Desktop width | Controls the width of the block on desktop devices (1-12 columns) |
| Mobile width | Controls the width of the block on mobile devices (1-12 columns) |
| Horizontal alignment | Sets text alignment within the block (left, center, right) |
Image
This block displays a complementary image alongside the discount information.
- Block limit: 1
| Setting | Description |
|---|---|
| Image | The image to display alongside the discount content |
| Desktop width | Controls the width of the image on desktop devices (1-12 columns) |
| Mobile width | Controls the width of the image on mobile devices (1-12 columns) |