# 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)  |