> For the complete documentation index, see [llms.txt](https://document.tek-labs.app/free-gift-userguide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://document.tek-labs.app/free-gift-userguide/user-guides/styling/discount-box-gift-slider-type.md).

# Discount Box & Gift Slider

Style the discount code box and gift selector in the cart.

Used by [Gift Discount Code](/free-gift-userguide/user-guides/gift-offers/gift-discount-code.md) offers. The **Discount box** lets customers enter a code in the cart, and the **gift slider** (gift selector) lets them pick their gifts once the code is applied.

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2Fgit-blob-42c509757356d07f144e1b39a99ce229e2d8714e%2Fsp-st-discount-box.png?alt=media" alt="Discount Box and Gift Slider style editor"><figcaption></figcaption></figure>

**Preview**: choose **Customer choose product manually from widget** or **Gift in cart page - Auto-add**. For manual selection, also choose **Gift unclaimed** or **Gift claimed**. The first six sections apply to manual selection only.

## Sections

| Section                 | Settings                                                                                                                                                                            |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Pop up gift**         | Pop-up border and background, border radius and width, title and reward-selection text styles.                                                                                      |
| **Product image**       | Image border radius and size; quantity badge colours and size.                                                                                                                      |
| **Gift Selector**       | The bar under the code box: border, background, radius; title and reward-selection text; progress bar colours (or gradient); **Select gift** button colours (or gradient) and text. |
| **Reward section**      | Border and background (and when chosen), radius, padding, gap; reward name and price styles.                                                                                        |
| **Select button**       | Text size and weight; text and background colours, normal and when chosen; padding.                                                                                                 |
| **Add to cart button**  | Text size, weight and colour; background; padding.                                                                                                                                  |
| **Discount box header** | Header size, text colour and background.                                                                                                                                            |
| **Code box**            | Background and border colours, border width and radius, text size, weight and colour.                                                                                               |
| **Apply button**        | Text size, weight and colour; background.                                                                                                                                           |
| **Custom CSS**          | Your own CSS.                                                                                                                                                                       |

Edit the box and gift selector texts in the **Discount code** tab of [Translations](/free-gift-userguide/user-guides/translation.md).