Installation
You will require to install MageDelight Base Extension first. If it is not installed then please download it from https://www.magedelight.com/pub/extensions/magedelight-base.zip and unzip the package file into the root folder of your Magento 2 installation.
Before installing the extension, please make sure to Backup your web directory and store database
You will require to install MageDelight Base Extension first. If it is not installed then please download it from https://www.magedelight.com/pub/extensions/magedelight-base.zip and unzip the package file into the root folder of your Magento 2 installation.
Root Directory is - "app/code/magedelight/#YourExtensionName#"
- Unzip the extension package file into the root folder of your Magento 2 installation.
- Connect to SSH console of your server:
- Navigate to the root folder of your Magento 2 setup
Run command as per below sequence,
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
- log out from the backend and log in again
If you are using Magento 2.3 or later then you do not need to activate license. Extension will be activated with silent activation mechanism and does not require activation keys to be entered manually.
Backend Configuration (Admin side)
| Field | Description |
|---|---|
| Enable Personalization Globally | Enables or disables personalization across all products at a global level. When enabled, global personalization settings are applied to all products, and individual product-level customization settings are hidden. This ensures consistent behavior and simplifies management across the catalog. |
| Personalize Button Text | Allows administrators to define the label displayed on the personalization button on the storefront. This provides flexibility to customize the call-to-action text (e.g., “Personalize Now”) based on branding or user experience requirements. |
| Field | Description |
|---|---|
| Maximum File Size (MB) | Defines the maximum allowed file size (in megabytes) for images uploaded by customers within the personalization canvas. This helps ensure optimal performance and prevents large files from impacting system speed or user experience. |
| Allowed File Types | Specifies the permitted image file formats that customers can upload in the personalization tool. Supported formats may include PNG, JPEG/JPG, GIF, WEBP, and SVG, ensuring compatibility while maintaining security and performance. |
| Field | Description |
|---|---|
| Available Fonts | Allows administrators to select the fonts that will be available for customers within the personalization tool. This ensures controlled font usage and consistency with branding guidelines. |
| Default Font Family | Specifies the default font applied to text elements in the personalization canvas. This font is pre-selected for users but can be changed if multiple fonts are enabled. |
| Default Font Size | Defines the default font size (in pixels) for text added in the personalization canvas. This helps maintain consistency in text appearance. |
| Default Text Color | Sets the default color for text elements in the personalization tool. This color is applied automatically when users add text, ensuring alignment with design preferences. |
| Default Text Shadow Color | Defines the default shadow color applied to text elements, enhancing visual styling and readability within the design canvas. |
| Max Character Limit | Specifies the maximum number of characters allowed for text input in personalization. This helps control layout consistency and prevents design overflow issues. |
Backend Functionality
Manage Fonts
| Field | Description |
|---|---|
| Add New Font | Allows administrators to add new fonts to the system for use in the personalization tool. Fonts can be added via file upload or external sources such as CDN. |
| Font Grid | Displays a list of all available fonts configured in the system along with key details such as Font Name, Font Family, Source Type, File Name, Status, and Created date. |
| Font Name | Represents the display name of the font used for identification in the admin panel and personalization tool. |
| Font Family | Defines the font family applied within the personalization canvas for rendering text elements. |
| Source Type | Indicates the source of the font, such as file upload or CDN, helping manage how fonts are loaded and served. |
| File Name | Displays the name of the font file when uploaded locally, enabling easy reference and management. |
| Status | Shows whether the font is enabled or disabled for use in the personalization tool. Only enabled fonts are available to customers. |
| Created | Indicates the date and time when the font was added to the system. |
| Action | Provides options to manage each font entry, including Edit to modify font details and Delete to remove the font from the system. |
Add Font
| Field | Description |
|---|---|
| Enable Font | Allows administrators to enable or disable the font for use in the personalization tool. Only enabled fonts will be available to customers on the storefront. |
| Font Name | Defines the display name of the font used for identification in the admin panel and personalization interface. |
| Font Family | Specifies the exact CSS font-family value that will be applied to text elements in the personalization canvas. |
| Font Source Type | Determines the source of the font, such as file upload or external CDN. This controls how the font is loaded and used within the system. |
| Font File | Allows administrators to upload the font file (e.g., TTF, OTF) when using file-based sources. This ensures the font is available for rendering in the personalization tool. |
| Save Font | Saves the font configuration and makes it available for use based on its enabled status. |
| Delete Font | Allows administrators to remove the font configuration from the system. |
| Back | Navigates back to the font listing page without saving changes. |
Order Design Details (Admin View)
- In the Magento Admin panel, within the Sales Order view, administrators can see complete personalization details associated with the ordered product. This includes uploaded images, customized text, and design elements selected by the customer. A dedicated “View Full Preview” option is also available to open the complete design in a larger view, ensuring accurate validation before processing or fulfillment.
| Field | Description |
|---|---|
| Personalized Design Preview | Displays the complete personalized design within the order details, including all customer-selected elements such as images and text. |
| View Full Preview | Allows administrators to open the full design in a larger, detailed view for better visibility and validation. |
| Download | Enables downloading of design files for production, printing, or internal reference. |
| Uploaded Images | Shows all images uploaded by the customer as part of the customization process. |
| Customized Text Elements | Displays the text or messages added by the customer during personalization. |
Order Design Preview Popup
- When the administrator clicks the View Full Preview button from the Sales Order view in the Magento Admin panel, a popup window opens to display the complete personalized product design in a larger format. This helps administrators review the final customized output more clearly, including applied text, uploaded images, and placement details before processing or fulfillment.
| Field | Description |
|---|---|
| View Full Preview | Provides a button in the order details page that opens the complete personalized product design in a popup window for detailed review. |
| Preview Popup | Displays the full personalized product preview in an enlarged view, allowing administrators to verify the final customized output more accurately. |
| Personalized Design | Shows the final product design with all customer-applied personalization elements, such as uploaded images, text, and placement. |
| Close | Allows administrators to close the preview popup and return to the order details page. |
Enable Engraving In Product
- In the Catalog > Products section, open the required product in edit mode.
- Within the product settings, you will see the “Enable Engraving” option. Enabling this option allows customers to add personalization (engraving) for that specific product.
Frontend Functionality
Product Personalization
The Product Personalization feature allows customers to customize products directly from the product detail page before adding them to the cart. This functionality enhances the shopping experience by enabling users to create unique, personalized products.
When personalization is enabled for a product, the following functionality is available:
- A “Personalize Now” button is displayed alongside the “Add to Cart” button on the product page
- Customers can add custom text or messages to the product
- Option to upload images or design elements (based on configuration)
- Ability to select fonts, colors, and styles for personalization
- A real-time preview is shown to visualize the final customized product
- Customers can review and modify the design before proceeding
- The personalized product can be added to the cart with all applied customizations
- All customization details are saved and associated with the order for processing and fulfillment
Text Personalization
When the customer clicks on the “Personalize Now” button, the personalization interface opens, allowing users to customize the product. By default, the Text tab is selected, where customers can add and style their desired text on the product.
The following functionality is available under the Text personalization section:
- Text Input Field to enter custom text or message (with character limit)
- Option to select Font Family from available fonts
- Text styling options such as Bold, Italic, and Underline
- Ability to choose Text Color using a color picker
- Font Size adjustment using a slider for precise control
- Rotation control to adjust text angle on the product
- Real-time preview showing applied text on the product image
- Special Note field for adding additional instructions (optional)
- Action buttons:
- Undo / Redo for editing changes
- Clear All to reset the design
- Preview to review final output
- Save & Add to Cart to proceed with the customized product
Image Personalization
Within the personalization tool, users can switch to the Image tab to upload and customize images on the product. This allows customers to add logos, graphics, or any custom design elements to enhance product personalization.
The following functionality is available under the Image personalization section:
- Option to upload image files (supported formats: PNG, JPG, GIF – with defined size limit)
- Ability to resize the image using a size adjustment slider
- Rotation control to adjust the image angle on the product
- Transparency adjustment to control image opacity
- Option to drag and reposition the image on the product preview
- Delete option to remove the selected image from the design
- Real-time preview reflecting all applied changes instantly
- Action buttons:
- Undo / Redo for step-wise editing
- Clear All to reset the entire design
- Preview to review the final output
- Save & Add to Cart to proceed with the customized product
Cart Page – Design Preview Option
On the Shopping Cart page, customers have the ability to review the personalized design of the product before proceeding to checkout. A “View Preview” option is provided below the product details to ensure transparency and accuracy of customization.
The following functionality is available:
- A “View Preview” link is displayed below each personalized product in the cart
- Allows customers to open the customized design preview in a popup view
- Displays the final personalized product, including text, images, and applied styling
- Helps users verify customization details before placing the order
- Ensures accuracy and reduces order errors during checkout
- Provides a quick review option without navigating away from the cart page
Cart Page – Preview Popup
When the customer clicks on the “View Preview” option in the Shopping Cart, a popup window opens displaying the complete personalized product design. This allows users to review their customization in detail before proceeding to checkout.
The following functionality is available in the preview popup:
- Displays the final personalized product design in an enlarged view
- Shows all applied customizations including text, images, colors, and styling
- Provides a clear and detailed preview for better visibility
- Helps users verify accuracy of personalization before placing the order
- Includes a close option (X icon) to exit the popup
- Opens as an overlay without navigating away from the cart page
Checkout Page – Preview Option
During the checkout process, customers can review the personalized product design directly from the Order Summary section. A “View Preview” option is provided for each personalized item to ensure accuracy before placing the order.
The following functionality is available:
- A “View Preview” link is displayed under each personalized product in the order summary
- Allows customers to open the customized product preview in a popup view
- Displays the final design with all applied personalization elements such as text, images, and styling
- Helps users verify customization details before completing the purchase
- Ensures accuracy and reduces errors during order placement
- Opens as a popup overlay without interrupting the checkout flow
Checkout Page – Preview Popup
When the customer clicks on the “View Preview” link from the checkout page (Order Summary section), a preview popup opens displaying the complete personalized product design. This allows customers to review their customization before placing the order.
The following functionality is available:
- Opens a popup window on clicking the “View Preview” link during checkout
- Displays the final personalized product in an enlarged view
- Shows all applied customizations including text, images, colors, and styling
- Helps users verify accuracy of personalization before completing the purchase
- Ensures confidence and reduces order errors
- Includes a Close button to exit the popup and return to checkout
- Does not interrupt the checkout flow and works as an overlay on the same page
My Account – Order Design Preview And Download
In the My Account > My Orders section, customers can view and access the personalized design details of previously placed orders. This ensures users can revisit, verify, or download their customized product designs at any time.
The following functionality is available:
- A “Preview Image” option is available for each personalized product in the order details
- Allows customers to view the final personalized product design
- Displays all applied customizations including text, images, and styling
- A “Download” option is provided to download the design file
- Enables customers to save or share the personalized design for reference
- Helps users recheck their customization after order placement
My Account – Preview Popup
When the customer clicks on the “Preview Image” link from the My Account > My Orders section, a preview popup opens displaying the complete personalized product along with its configuration details.
The following functionality is available:
- Opens a popup window on clicking the “Preview Image” link
- Displays the final personalized product design in an enlarged view
- Shows all applied customizations including text, placement, styling, and formatting
- Displays detailed configuration such as:
- Entered text
- Font family and size
- Color (fill)
- Position (top/left)
- Dimensions (width/height)
- Rotation angle
- Text styling (bold, italic, underline, alignment, etc.)
- Helps users review exact design specifications used during personalization
- Includes a Close option (X icon) to exit the popup
- Opens as an overlay without navigating away from the page
Purchase
Click here to purchase from MageDelight.
Click here to purchase from Magento Marketplace. (Composer installation supported)
Thank you for choosing MageDelight!