> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/skelta-buy-x-restrict-y/customize.md).

# Customize

The **Customize** section allows you to personalize how rule notifications and bundle widgets appear on your storefront. It is divided into two sections:

* **Message Customize** – Controls the appearance and behavior of restriction alert messages shown to customers.
* **Bundle Customize** – Controls the appearance of the bundle widget displayed for dependency rules.

Customizing these settings helps ensure that rule notifications and bundle displays match your store's branding and provide a consistent shopping experience.

## Message Customize

The **Message Customize** section allows you to configure the appearance, placement, and behavior of alert messages shown when a rule is triggered.

For example, when a customer attempts to add restricted products together, the configured alert message will appear based on these settings.

### Visual Themes & Styles

Customize the overall appearance of the alert message.

| Setting           | Description                                                                   |
| ----------------- | ----------------------------------------------------------------------------- |
| Background Color  | Sets the background color of the alert box.                                   |
| Text & Icon Color | Controls the color of the alert text and icon.                                |
| Font Size         | Adjusts the size of the alert message text.                                   |
| Border Radius     | Controls how rounded the corners of the alert box appear.                     |
| Border Color      | Sets the color of the alert box border.                                       |
| Padding           | Defines the spacing between the alert content and the edges of the alert box. |

<figure><img src="/files/7dGHfyQES0IzPJlZyhIv" alt=""><figcaption></figcaption></figure>

### Alert Type, Placement & Icons

Configure where the alert appears and which icon is displayed.

| Setting              | Description                                                                                                                             |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Default Icon         | Select the icon displayed alongside the alert message. This helps customers quickly identify warnings or restrictions.                  |
| Storefront Placement | Choose where the alert appears on the storefront. For example, the alert can be displayed as a modal popup in the center of the screen. |

<figure><img src="/files/hfEWZrCGXcdE2nVjMkmS" alt=""><figcaption></figcaption></figure>

### Animations & Behavior

Control how alert messages appear and disappear.

| Setting         | Description                                                                     |
| --------------- | ------------------------------------------------------------------------------- |
| Entry Animation | Determines the animation used when the alert becomes visible. Example: Zoom In. |
| Exit Animation  | Determines the animation used when the alert closes. Example: Fade Out.         |

These settings help create a smoother and more engaging user experience.

<figure><img src="/files/uhc6uXTxlOjwB1YJexZs" alt=""><figcaption></figcaption></figure>

## Bundle Customize

The **Bundle Customize** section allows you to control the appearance of the bundle widget displayed for dependency rules.

The bundle widget helps customers understand which products must be purchased together and provides a convenient way to add the complete bundle to the cart.

All customization changes are reflected in the **Bundle Product Preview**, allowing you to review the design before publishing.

### Title

Customize the bundle heading displayed above the bundled products.

| Setting     | Description                                                 |
| ----------- | ----------------------------------------------------------- |
| Title       | Enter the text displayed as the bundle heading.             |
| Alignment   | Choose the position of the title within the widget.         |
| Line        | Show or hide the decorative line associated with the title. |
| Line Style  | Select the visual style of the title line.                  |
| Font Weight | Adjust the thickness of the title text.                     |
| Font Size   | Control the size of the title text.                         |
| Text Color  | Set the color of the title text.                            |

<figure><img src="/files/clEKn4NPnHIszCsrcAmu" alt=""><figcaption></figcaption></figure>

### Box

Customize the appearance of the product container displayed within the bundle widget.

| Setting          | Description                                                                                     |
| ---------------- | ----------------------------------------------------------------------------------------------- |
| Background Color | Sets the background color of the bundle container.                                              |
| Border Color     | Defines the color of the bundle container border.                                               |
| Text Color       | Controls the color of product names, prices, and other content displayed inside the bundle box. |

<figure><img src="/files/HsmQtXGd87YWtIrGhmFS" alt=""><figcaption></figcaption></figure>

### Variant & Quantity Selector

Customize the dropdowns and quantity fields used within the bundle.

| Setting          | Description                                         |
| ---------------- | --------------------------------------------------- |
| Background Color | Sets the background color of selector fields.       |
| Text Color       | Controls the text color displayed inside selectors. |
| Border Color     | Defines the border color of selector fields.        |

<figure><img src="/files/9KPcHXCLrHecdHgBZoY9" alt=""><figcaption></figcaption></figure>

### Add to Cart Button

Customize the call-to-action button used to purchase the bundle.

| Setting          | Description                       |
| ---------------- | --------------------------------- |
| Background Color | Sets the button background color. |
| Text Color       | Sets the button label color.      |

<figure><img src="/files/pwsxYqXA62HMnlIS2SiE" alt=""><figcaption></figcaption></figure>

### Unavailable Badge

Customize the badge displayed when a bundled product is unavailable.

| Setting          | Description                                                                           |
| ---------------- | ------------------------------------------------------------------------------------- |
| Badge Text       | Customize the text displayed on unavailable products. Default value: **UNAVAILABLE**. |
| Background Color | Sets the badge background color.                                                      |
| Text Color       | Sets the badge text color.                                                            |

<figure><img src="/files/c7AUoaDqCRoUL4HbNJLa" alt=""><figcaption></figcaption></figure>

### Preview Before Publishing

All Bundle Customize settings are automatically reflected in the **Bundle Product Preview** section. This allows you to verify colors, typography, layouts, buttons, and overall styling before making the rule live on your storefront.

<figure><img src="/files/NucCVJmYpRcDfgZsNy6c" alt=""><figcaption></figcaption></figure>

Merchants can now choose between **Vertical** and **Horizontal** bundle layouts when configuring a Dependency Rule.&#x20;

The selected layout is automatically applied to the storefront and the Bundle Customization section.&#x20;

Merchants can also customize the bundle appearance for each layout and use the built-in live preview to visualize changes before publishing.

<figure><img src="/files/U3FiFEcvzuCdSIliYQKU" alt=""><figcaption></figcaption></figure>