> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://easybundles-help.skailama.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# [New] Pre Curated Bundle Templates and Customization Guide

This document defines the configuration rules, design hierarchy, and rendering logic for Customizing Pre-Curated Bundles. It outlines how settings are applied at the Offer-Level (single bundle), Template-Level (bundles sharing a layout), and Global-Level (all bundles across the application), including variant configurations, branding, and Custom CSS.

${youtube}[](AYsDPxLgzaE)


### Core Logic / Functionality
#### 1. Initial Bundle Configuration
* **Action:** The user adds target products and specifies a discount.
* **Template Selection:** The user selects a visual layout from the template screen.
* **Supported Templates:** **Classic**, **Card**, **Sectioned**, and **Showcase**.
#### 2. Variant Configuration (Bundle Level)
The system requires the user to define how product variants are displayed in the UI.
* **IF** the user selects **Swatch**, **THEN** variants render as color/pattern swatches.
* **IF** the user selects **Dropdown**, **THEN** variants render as a selectable list.
* **IF** the user selects **Label**, **THEN** the system requires a secondary input:
    * Select **Label with text**.
    * Select **Label with image**.
#### 3. Variant Styling (Template-Level Scope)
Variant styling is managed by clicking **Open Design Control Panel** from the variant configuration screen.
* **Editable Attributes:** Size, corner radius, label size, font weight, font color, background color (for labels), and state-specific styles (Selected vs. Unselected).
* **Logic:** Any changes saved in the **Variants section** of the **Product Bundle Design Control Panel** apply to **ALL** product bundles that share the currently selected template.
#### 4. Offer-Level Design (Bundle-Specific Scope)
Offer-level changes are made within the **Bundle Setup** > **Design tab**.
* **Elements Section:** Controls visibility and layout for this specific bundle only.
    * **Toggle Visibility (Show/Hide):** Dividers, Product Images, Option Names, Product Prices, Discount Pill, Total Price.
    * **Configuration:** Choose Divider Type, set element placement.
* **Contents and Labels Section:** Controls text strings for this specific bundle.
    * Add a Subtitle.
    * Change the Discount Pill text.
    * Manage other text fields.
* **Multi-Language Routing:** **IF** the user clicks to set up multi-language options for fields, **THEN** the app redirects the user to the **Language section** within the **Global Design Control Panel settings**.
#### 5. Widget and Card Styling (Template-Level Scope)
Detailed, granular visual changes for product bundles are managed in the **Design Control Panel for Product Bundles**.
* **Logic:** Changes made here apply ONLY to product bundles utilizing the specific template being edited.
* **Editable Attributes:**
    * **Widget:** Font size, font color, background, divider styling.
    * **Cards:** Background color (or set to transparent), border color.
    * **Images:** Image size.
    * **Product Details:** Product name (size, color, font weight), Product price (font color, font weight).
    * **Add to Cart Button:** Button color, size, corner radius.
    * **Total Section:** Font size, font weight, Discount Pill color.
#### 6. Branding & Common Settings (Global Scope)
Global branding changes are managed by returning to **Bundle Setup** and opening the **Branding section**, OR via the **Settings tab** in the Design Control Panel.
* **Logic:** Changes made in the Branding section/Common settings are applied globally to **ALL** bundles (including Product Bundles and Mix and Match bundles) across the app.
* **Editable Attributes:** Primary colors, secondary colors, font weight, font size, corner radius.
* **Bundle Upsells:** **IF** modifying Bundle Upsells, **THEN** the user must navigate to **Common Settings > Upsell** to change button color and text color.


### Constraints & Edge Cases
* **Design Scope Conflict Resolution (Hierarchy Rule):** The system enforces a strict hierarchy for design changes based on where they are configured.
    * **Offer-Level Changes (Design Tab):** ONLY affect the active bundle.
    * **Template-Level Changes (Design Control Panel):** OVERRIDE default template styles for ALL bundles sharing that exact template.
    * **Global Changes (Branding Section / Common Settings):** Establish base styles for ALL bundles across the app, but can be superseded by Template-Level or Offer-Level specifics.
* **Custom CSS Targeting Constraints:**
    * **IF** the user inputs Custom CSS at the individual bundle level, **THEN** the CSS executes ONLY for that specific bundle layout.
    * **IF** the user inputs Custom CSS in the **Settings tab of Design Control Panel > Custom CSS**, **THEN** the CSS executes globally across ALL bundles.
* **Support Fallback:** **IF** a user requires design configurations outside the scope of the provided control panels (e.g., entirely new pre-curated designs), **THEN** the bot must route the user to chat support.