# Theme extension

{% hint style="info" %}
Some themes may not be fully compatible with our current styles, which can affect how widgets display or function. If you notice display issues or if certain features are not working as expected, please reach out to our support team for assistance.
{% endhint %}

## 1. Display style options

You can choose between two display styles for your limit notifications: **Inline** and **Popup**. Each option has its own benefits depending on how you want to inform customers about purchase limits.

### 1.1. Inline

The inline notification appears directly on the page and blends with the existing content. It’s a subtle way to inform customers without interrupting their browsing experience.

You can customize the look of your notification with the following settings:

* **Text alignment**: Align the message to the `Left`, `Center`, or `Right`.
* **Direction**: Choose text direction (`Right to Left` or `Left to Right`) for different languages.
* **Alert position**: Decide where the banner appears (`Top`, `Bottom`, `Top - Left`, `Top - Right`, `Bottom - Left` or `Bottom - Right` ).
* **Rounded**: Adjust corner roundness of the notification box.
* **Font size**: Change the size of the message text.
* **Background color**: Select a background color for the banner.
* **Text color**: Set the font color for the message.
* **Border color**: Customize the border color to match your store style.

<figure><img src="https://2876048653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdf2bvqEBm6PWWQ1pvX7q%2Fuploads%2FvYtkuexg4fowbJRcUv3G%2FScreenshot%202025-09-11%20083434.png?alt=media&#x26;token=8c1cf353-4421-425d-b815-0e9a5e4e02d7" alt=""><figcaption></figcaption></figure>

### 1.2. Popup

{% hint style="warning" %}
The popup notification only appears on a specific page. To ensure customers always see the limit warning, the app also displays an inline notification on cart pages. This way, the message is consistent across the shopping flow.
{% endhint %}

The popup notification opens in a separate window when a limit is triggered, making it highly noticeable. This is useful if you want customers to immediately recognize the limit and take action.

With this type, you can customize:

* **Text alignment**: Align the message content (`Left`, `Center`, `Right`).
* **Background color icon warning**: Change the background color of the warning icon.
* **Text color icon warning**: Adjust the color of the warning icon text to make the notification stand out or match your store’s style.

## 2. Advanced settings

Advanced settings give you more control over how limit rules and notifications work in your store. Use these options if you want to fine-tune behavior beyond the basic setup.

### 2.1. CSS Selectors

Our app is compatible with most Shopify themes. However, some custom themes may not display correctly. In those cases, you will need to set custom CSS selectors so the app can detect the right elements.

Only change these settings if you are familiar with CSS. If not, please contact our support team for immediate help.

Selectors you can configure:

* **Add To Cart Button CSS selector**
* **Quantity Input CSS selector**
* **Checkout Button CSS selector**
* **Quantity Cart Input CSS selector**

<figure><img src="https://2876048653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdf2bvqEBm6PWWQ1pvX7q%2Fuploads%2FGqBhHKXdlotvx8CptBik%2FScreenshot%202025-09-11%20090512.png?alt=media&#x26;token=95757a1e-00c0-4124-b772-31d930934383" alt=""><figcaption></figcaption></figure>

### 2.2. Custom CSS

Add your own CSS code here to customize the appearance of the limit widgets. Any changes made in this section will only affect the app’s elements and will not modify your store theme.

<figure><img src="https://2876048653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdf2bvqEBm6PWWQ1pvX7q%2Fuploads%2FKL65rWXFQbbxInrSmCJt%2FScreenshot%202025-09-11%20090633.png?alt=media&#x26;token=5c0a7de4-036c-448e-881b-45fca6c95ece" alt=""><figcaption></figcaption></figure>