> 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. |
### 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. |
### 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.
## 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. |
### 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. |
### 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. |
### 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. |
### 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. |
### 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.
Merchants can now choose between **Vertical** and **Horizontal** bundle layouts when configuring a Dependency Rule.
The selected layout is automatically applied to the storefront and the Bundle Customization section.
Merchants can also customize the bundle appearance for each layout and use the built-in live preview to visualize changes before publishing.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://magecomp.gitbook.io/shopify/apps/skelta-buy-x-restrict-y/customize.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.