The look and feel of your bundle widget are paramount to engaging customers and driving conversions. The new Design Editor for Kefi Bundles represents a significant enhancement to your customization experience, allowing you to design your bundle page faster, more intuitively, and with direct control over the visual elements your customers see.

Introduction

Customizing the design of your bundle widget has been streamlined into an elegant, 'what you see is what you edit' experience. The Design Editor brings the design tools out of a general settings area and places them directly onto your storefront preview. This powerful update is engineered to save you time and provide seamless, precise control over every component, whether you are utilizing a Build Your Own Box or any other bundle type.

What is the Design Editor?

The Design Editor is an in-line, visual, and context-aware editing feature that is integrated directly into the widget preview panel of the Kefi Bundle Builder.

It transforms the static preview on the right side of your screen into a fully interactive canvas. By activating this feature, you gain the ability to simply click on any visual component within your bundle widget—such as a product image, a 'Buy Now' button, or a step title—and the system will immediately navigate you to the precise design settings for that element in the main editor panel. This instantaneous access to the relevant controls drastically simplifies the customization process, eliminating the need to manually search through extensive design menus.

How the Design Editor Works: A Step-by-Step Guide

The following steps illustrate how to leverage the new Design Editor for instant customization, using a "Build Your Own Box" bundle as an example.

Step 1: Accessing and Enabling the Design Editor

1. Begin by navigating to the Kefi Bundle Builder and selecting the specific bundle you wish to edit.
2. Focus your attention on the right-hand side of the screen, where the live preview of your bundle widget is displayed.
3. Locate and click the Design Editor tab, which is positioned next to the 'Preview' title, to activate the in-line editing mode. The preview widget will now become interactive, ready for direct selection.
   ‍

‍

Step 2: The Core Action: Click-to-Edit

Once the Design Editor is active, customizing is as simple as clicking the element you want to change:

1. Hover your cursor over any element in the preview, such as the 'AirPods' product card, the 'Buy Now' button. You will notice a visual outline or highlight appearing around the component to confirm it is selectable.
2. Click on the element. For instance, click directly on the product card image or text.
   ‍

‍

Step 3: Instant Customization

1. Immediately upon clicking the element (the product image in our example), the main editor panel on the left will switch its context. It will automatically populate the screen with the specific Product Card Design settings, or whichever design controls are relevant to the clicked component.
2. Within this targeted panel, you can instantly adjust properties such as button text and color, card background styling, image padding, and typography.
3. The updates you make are rendered in real-time on the preview widget, providing immediate visual feedback on your design choices.
   ‍

‍

Step 4: Maintaining a Continuous Workflow

The Design Editor allows you to fluidly move between editing different parts of your widget without breaking your focus:

1. To edit another section, simply click on a different element in the preview—for example, the 'Page Title' or the 'Review Your Box' step header.
2. The main editor panel will instantaneously switch its context again, populating the settings for that new component (e.g., the Step Header Design settings), keeping your workflow intuitive and highly efficient.

‍

‍

This streamlined workflow ensures that every visual aspect of your bundle widget can be perfected quickly and precisely, resulting in a cohesive and engaging customer experience.