1.0 Introduction
Everybody loves a personal touch. This is especially true in today’s online shopping universe, which allows you to order the product of your choice from the comfort of your own sofa. Furthermore, the spectacular rise in the number of online stores has given customers a wide array of buying options. And this is where product customization comes into play. Companies that implement product customization, design, alter and market their items to the customer’s needs or desires. Opencart Product Designer/Customizer offers many benefits and generally leads to higher conversion rates.
Until a few years ago, personalized products were pretty much limited to a small circle of brands and items. It mainly comprised of gifting items, showcase products, or marketing merchandise. Figuratively speaking, you could count the amount of personalized items on the fingers of one hand. Luckily, a lot has changed. For the good. Sellers of pretty much everything, from dresses and shirts to handbags and even consumer packaged goods, are discovering the benefits and value of product customization. More and more brands are finding out that the personalization of items and services is a great way to enhance customer loyalty and engagement.
OpenCart Product Designer/Customizer is an easy way to let your customers customize any product according to their desire and place an Order with you. It gives your customer’s flexibility to get the Product they want and the way they want and hence increasing your sales. Customers can easily add rich colored texts with effects, upload their images with filters and add a QR code to make it suitable for their needs.
Why should you give Product Customization option to your customers?
If you are wondering why Product Customization? Then here is why it would make your Web store better.
2.0 Installation Guide
Before starting the installation process, you have to buy the Opencart Product Designer/Customizer by the Knowband store. Once purchased, you will receive the following files on your registered email.
1. Source code of Opencart product customization module in zipped file format.
2. User Manual of Opencart custom product designer extension.
Now in order to install this Opencart custom product designer extension on your online shop, follow the given steps:
Step 1: Unzip the zip file. You will get the folders as shown in the image below
Step 2: Copy all the folders of the zip file in the Root Directory of OpenCart setup via FTP manager.
So, Opencart Custom Product Design module is now successfully installed and is ready to use at your store. Go to the admin menu and click on the extensions. Choose the Extension Type as Modules. You will find a list of modules. Select the Opencart Product Designer/Customizer.
3.0 Admin Interface of Opencart Product Designer Customizer
To configure the Product Designer/Customizer extension for OpenCart, Navigate the settings in the following order:
Admin Panel > Extensions >Modules> Product Designer/Customizer
The Admin Interface of OpenCart Product Designer/Customizer extension includes following main settings:
- Configure
- Colors
- Font
- Image Group
How to Customize a Product?
To customize a Product, Follow the following path:
Catalog>> Products>> Select a Product>> Edit>> Product Designer/Customizer
Once the User clicks on the Product Designer/Customizer, the User will have the following options in Opencart Extended Product Customization module:
3.0.1 Configuration
Through this setting of Opencart Custom Product Design module, the User can enable/disable the whole Module and make changes in the Customization of the Product.
3.0.2 Price
This setting of Opencart Extended Product Customization module lets Admin decide the fixed price for each customization that has to be added in the Product. The screen for the same will look as shown below:
3.0.3 Text
Through this setting of Opencart Custom Product Design module, Admin can control the Text option in the Customization. The Screen for this option will look as shown below:
3.0.4 Sides
Sides Setting of Opencart custom product designer extension module lets Admin Add an Image of Different sides of the Product so that the User can customize the Product from any of the side they want. Admin can also name the Sides added.
The screen will look like as shown:
How to Configure Fonts, Colors, and Image Groups?
While you are changing the customization settings for a product, you will find the options to select different Fonts, Colors, Image Groups at the top right side of screen. You will find three options as:
1. Configure Fonts
All the fonts that have been added from the module are listed here in this interface. You can directly enable or disable any font.
All the colors that have been added using the module are listed here in this interface. You can directly enable or disable any color.
3. Configure Image Groups
All the image groups that have been added are listed here in this interface. You can directly enable or disable any image group.
On clicking the “View Images” button, you will see the following screen.
3.0.5 Configure
This option is given in the Admin Panel of the OpenCart custom product designer extension, Admin can Enable/Disable the whole module from this setting. The screen will look as shown below:
3.0.6 Fonts
Through this setting of OpenCart Extended Product Customization module, Admin can add a new font in the system and also edit the existing one. The screen will look as shown below:
Edit Font: You can Edit an existing Font set using the Edit option. The screens for Editing Font will be same as Adding an Font. The only difference will be that Edit will have the fields already filled.
Delete Font: You can delete a Font by clicking on the ‘Trash’ Icon. A pop up will show up asking for the Confirmation. You can click yes and the Font will be deleted.
Add Font: You can add a Font in OpenCart Extended Product Customization module by clicking on the ‘+’ icon given at the top of the page. The screen will look as shown below:
3.0.7 Colors
Through this setting of OpenCart Extended Product Customization module, Admin can add a new Color in the system and also edit the existing one. The screen will look as shown below:
Edit Color: You can Edit an existing Color set using the Edit option. The screens for Editing Color will be same as Adding a Color. The only difference will be that Edit will have the fields already filled.
Delete Color: You can delete a Color by clicking on the ‘Trash’ Icon. A pop up will show up asking for the Confirmation. You can click yes and the Font will be deleted.
Add Color: You can add a Color in OpenCart Extended Product Customization module by clicking on the ‘+’ icon given at the top of the page. The screen will look as shown below:
3.0.8 Image Group
Image Group settings of OpenCart Extended Product Customization module lets Admin add a Group of Images to offer their customers for Product Customization. The screen will look as shown below:
Edit Image Group: You can Edit an existing Image Group set using the Edit option. The screens for Editing Image Group will be same as Adding a Color. The only difference will be that Edit will have the fields already filled.
Delete Image Group: You can delete an Image Group by clicking on the ‘Trash’ Icon. A pop up will show up asking for the Confirmation. You can click yes and the Font will be deleted.
Add Image Group: You can add an Image Group in OpenCart Extended Product Customization module by clicking on the ‘+’ icon given at the top of the page. The screen will look as shown below:
Preview of Image Group: You can view all the images within a group by clicking on the “Eye” icon corresponding to a particular group. It will show the below screen:
Here, you can add a new image into the group, edit/delete the existing image.
On clicking the Add button, you will see the following options as shown below:
Upload Image: This option will allow you to browse a desired image from your local computer space and upload that here.
Price: This option sets the price for the selected image.
Active: This option enables or disables the image for the selected group. Set it to YES or NO.
Similarly, you can click on the Edit button corresponding to the image. The options will be same, the only difference is that the fields will be filled as shown in the image below.
Deleting an image is simple. Just click on the “Trash” icon corresponding to the image.
4.0 Front Interface of Opencart Product Designer Customizer Module
If the Opencart Product Designer/Customizer module is enabled, it will show a “Customize” button on the product page as shown below.
On clicking the Customize button, the customer will be shown a screen pop-up which will consists of various product design and customization settings. Customers can add any color, custom text, custom image or QR code for a product as per their shopping requirements.
Customers can perform various kinds of customizations like:
1. Color
2. Image
Customers can select an image of their choice from the provided image group options.
They can upload and print any other image of their choice from the local space.
They can even print QR code for some hidden text or website link.
3. Text
Customer can save all the customizations to their product by clicking on the Save button as shown below.
It will show the cost check box on the screen. Click OK to confirm.
Similarly, these customizations are applicable to other products of the store like mug and phone cases.
Shopping Cart Summary Page for Customized Product
The below frontend image shows how the custom product displays on the cart page with different options to the customers after clicking on “Save Customization” button.
Customer can view the Invoice of this customized product as shown below.
Admin can view the order invoice and all the configuration regarding the product customization from back-office. The details of an order can be viewed under the Orders section of Admin Panel.
On clicking the View button corresponding to a product, admin can check the complete order details of the custom product.
On clicking the product images, admin will see the complete details of personalized product in the form of a popup screen as shown below.
