> 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/notification-type.md).

# Notifications

Style the message shown when a gift is added to the cart.

A notification tells customers that a free or discounted item has been added to their cart automatically. Turn it on per offer in **Free gift › Display › Reminder widget › Notification**.

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2Fgit-blob-72c3ee92ef176992c9008fdb56813ca5b44eac83%2Fsp-st-notification.png?alt=media" alt="Notifications style editor"><figcaption></figcaption></figure>

## Sections

| Section              | Settings                                                                                                                                                                                                |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Preset**           | **Default**, **Cloud Blue**, **Frosted Haze**, **Misty Rose**, **Candy Petals**, **Mint Cream**, **Butter Frost** or **Custom color**.                                                                  |
| **Popup style**      | Font family, background, border colour, radius and width, **Width** and **Height**.                                                                                                                     |
| **Image**            | **Product image** (the first gift's image), **Icon** (pick an icon and its colour) or **No image**; image height or icon size; image radius.                                                            |
| **Position**         | **Position**: Bottom left, Bottom middle, Bottom right, Top left, Top right, Center right or Center left. **Animation**: Fade in, Slide in up, Slide in down, Slide in left, Slide in right or Zoom in. |
| **Text**             | **Header** and **Body**: size, weight and colour.                                                                                                                                                       |
| **Display settings** | **Duration**: how many seconds the notification stays on screen.                                                                                                                                        |
| **Custom CSS**       | Your own CSS.                                                                                                                                                                                           |

Edit the header and body text in the **Notification** tab of [Translations](/free-gift-userguide/user-guides/translation.md).