1.
2.
3.
4.
5.
6.
7.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

1.1
Product Personalization extension allows you to create a simple customization with form fields of your choice, and attach it to your products that support personalization option.
The customers then can enter personalization details, add the product to the shop cart and continue shopping. Before proceeding to checkout, he will have the option to review the personalization values that he entered just before he goes on with the checkout process.
After the checkout has been completed, you will see the personalization information he entered in your Sale Orders section of your Magento administration.
1.2
 Create a custom personalization form and attach it to the products on your
Magento store
 Give your Customers the option to personalize the products they are purchasing
 View personalized information in Sale Orders
 Have the personalization info shown on product details page and/or checkout page
 Optionally set the personalization fields as required
1.3
This user manual is intended to be used as a step-by-step guide for installing and configuring Product Personalization extension for Magento.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

The extension comes in a .zip file ready for extraction to your computer or web server.
2.1
Cache options: Go to System>Cache Management to view the current status of your cache. To disable cache options click Select All on the left side, and from the drop-down menu select Disable, then Submit.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

2.2
By default, Magento uses default package/theme structure unless you installed a custom package/theme.
To check your current package/theme, go to System>Configuration and click Design on the left-hand menu
If the Current Package Name is "default", you are using the default package. If it isn't, please take a note of the package you are using.
On the same page, in the Themes box, you'll see the name of the theme your Magento website is using. If the fields are blank, your current theme is default. If not, please take a note of your current theme.
2.3
If your Magento website doesn't use the default package, browse the extension files, navigate to /app/design/frontend/ folder of the extracted extension files, and rename the default folder to your package name.
In case your Magento doesn’t use the default theme navigate to
/app/design/frontend/default or your package name/ folder and rename the default folder to match the name of your theme.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

2.4
We recommend that you log out of administration and log back in when you install extension to your Magento or you could be presented with 404 page when trying to save the extension settings.
When the upload is completed, log in to your Magento administration. and go to
System>Configuration from your admin menu. On the left submenu of the configuration page there should be the new tab labeled SMDesign Extensions Config and under it the
Product Customization Config. Please click on the Product Customization Config to access the extension’s options.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

In the General options box you can select the following options:
Visible on product details page: This option, if set to Yes, will display the “Personalize” button on your product details page (if the product personalization is allowed on that particular product which will be covered later on ).
Show personalization page right before onepage checkout: This option inserts the customization page between the shop cart and proceed to checkout steps
If you set both these options to No, “Personalize” button will not be shown on product details page, and your customers will go straight to checkout from the shop cart page. It would be as if the extension isn’t installed at all on your Magento.
In the Calendar Options box you can select the skin for the calendar pop up. The calendar pop up appears on the Personalization form in case you decide to use the date values for the product personalization.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

You can additionally enable or disable the personalization on each individual product on your Magento by setting the “Product needs to be personalized” option on each product to Yes/No.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

You can set the “Personalize” button and block to appear on the product details page.
You can later customize the actual personalization form, as well as the html block and button to fit to your Magento theme, and to show the customized text. Alternatively, if you are familiar with the Magento template system, you can change the position of the
“Personalize” html block on the product details page, to fit your Magento theme.
Product Personalization Button on product details page.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

The Product Personalization Form Page, if enabled, will list all the products in the shop cart which have product personalization enabled, and allow the user to re-check/customize the values they entered in the form one more time, before they proceed to checkout.
Product Personalization Form page between shop cart and checkout pages.
You can also set personalization options to be required, so the user has to enter them in order to purchase the product.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

Following Magento standards for developers, we’ve enabled you to create / customize the personalization form fields using the Magento’s standard xml configuration documents. If you are experienced with editing Magento’s layout or config files, you will most likely recognize the format right away, and won’t have any issues creating your configuration form. If not, that’s not a problem at all. Just go through this section of the tutorial and as it explains everything there is to know about creating the personalization form.
The form configuration file can be found in:
/your magento root folder/app/code/community/SMDesign/ProductPersonalization/etc/ folder, and it’s the file named : product_personalization.xml
Please locate the product_personalization.xml file, and open it in your favorite editor. The start of the file should look something like this (this is the much shorter version of the config ) :
<?xml version="1.0"?>
<config>
<personalization>
<groups>
<general>
<label>Addiconal information</label>
<frontend_type>text</frontend_type>
<sort_order>10</sort_order>
<fields>
<personal_information>
<label>Personal Information </label>
<frontend_type>textarea</frontend_type>
<required>true</required>
</personal_information>
</fields>
</general>
</groups>
</personalization>
</config>
The important node is the <fields> node , as this is where you need to enter/configure the form field elements that you want to have on your personalization form. On the example code above, there’s only one form element defined, and it’s the textarea element named personal_information and labeled Personal information.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

As an example, here’s how the personalization form with the config above would look like on the product details page:
And here’s the config code for that element in the form:
<personal_information>
<label>Personal Information </label>
<frontend_type>textarea</frontend_type>
<required>true</required>
</personal_information>
By changing the values in the code, you can change the label, and the type of the element in the form. You can also set the order of the elements and the “required” option on certain elements.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

4.1 Text input area form element
To add the textarea (text input area) element to the form you need to create a new node and add it to the <fields> node of the configuration file, with the
<frontend_type>textarea</frontend_type>
To open a node for the new element, decide how you’d like that element to be called…
For example, if you want the user to enter its name in the personalization form field. you could name that form element “ user_name” :
<user_name>
*** the rest of the code will go here ***
</user_name>
After you’ve created a node for “user_name”, you can add its label and form element type.
To have the “user_name” textarea form element, you would need to add the
<frontend_type>textarea</frontend_type> in the “user_name” node:
<user_name>
<frontend_type>textarea</frontend_type>
</user_name>
If you would like to have the label explaining the user what to enter, you should add the label to the “user_name” node:
<user_name>
<label>User Name </label>
<frontend_type>textarea</frontend_type>
</user_name>
Optionally, if you’d like this form field to be required, add the required option to the
“user_name” node:
<user_name>
<label>User Name </label>
<frontend_type>textarea</frontend_type>
<required>true</required>
</user_name>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

The whole config file would look like this:
<?xml version="1.0"?>
<config>
<personalization>
<groups>
<general>
<label>Additional information</label>
<frontend_type>text</frontend_type>
<sort_order>10</sort_order>
<fields>
<user_name>
<label>User Name </label>
<frontend_type>textarea</frontend_type>
<required>true</required>
</user_name>
</fields>
</general>
</groups>
<personalization>
<config>
And on the Product details page it would look like this:
As you can see, you can customize the textarea filed of the “Personalize Form” to your liking, including the label text, the name of the field and the option for the field to be required. You can also add multiple textarea fields to the form (please make sure that the names are different) and change the position of the form fields by editing the config file.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

4.2 Date Form Element
To add the date element to the form you need to create a new node and add it to the
<fields> node of the configuration file, with the
<frontend_type>text</frontend_type> and:
<frontend_model>product_personalization/system_config_date</frontend_model>
To open a node for the new element, decide on its name first. For example, if you want user to enter delivery date in the personalization form field, you could name that form element “delivery_date”:
<delivery_date>
*** the rest of the code will go here ***
</delivery_date>
After you’ve created a node for “delivery_date”, you can add its label and form element type. To have the “delivery_date” form element textarea, you would need to add the
<frontend_type>textarea</frontend_type> in the “delivery_date” node:
<delivery_date>
<frontend_type>textarea</frontend_type>
<frontend_model>product_personalization/system_config_date</frontend_model>
</delivery_date>
To explaining the user what he needs to enter, you need to add the label to the
“delivery_date” element:
<delivery_date>
<label>Delivery Date </label> <frontend_type>textarea</frontend_type>
<frontend_model>product_personalization/system_config_date</frontend_model>
</delivery_date>
And if you want this form field to be required, add the required option to the
“delivery_date” node:
<delivery_date>
<label>Delivery Date</label>
<frontend_type>textarea</frontend_type>
<frontend_model>product_personalization/system_config_date</frontend_model>
<required>true</required>
</delivery_date>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

On product details page it looks like this:
The style/color of the pop up calendar can be set via Magento administration on Product
Personalization Config page.
We recommend that you try out the various themes available for the calendar, and see which one fits your Magento theme best.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

4.3 Select Box Form Element
To add the select element to the form you need to create a new node and add it to the
<fields> node of the configuration file, with the
<frontend_type>select</frontend_type> and:
<source_model>adminhtml/system_config_source_yesno</source_model>
To open a node for the new element, decide on the name of the element. select_example .
<select_example>
*** the rest of the code will go here ***
</select_example>
After you’ve created a node for select_example, you can add it’s label and form element type. To have the selext_example form element select box, you would need to add the
<frontend_type>select</frontend_type> in the selext_example node:
<select_example>
<frontend_type>select</frontend_type>
<source_model>adminhtml/system_config_source_yesno</source_model>
</select_example>
If you want to have the label explaining the user what to enter, you should add the label to the select_example node:
<select_example>
<label>Example of the select box </label>
<frontend_type>select</frontend_type>
<source_model>adminhtml/system_config_source_yesno</source_model>
</select_example>
Optionally, if you can set this form field to be required by adding the required option to the selext_example node:
<select_example>
<label>Here’s an example of the select box </label>
<frontend_type>select</frontend_type>
<source_model>adminhtml/system_config_source_yesno</source_model>
<required>true</required>
</select_example>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

On the product detail page, it looks like this:
The code in the example will produce the simplest Yes/No select box values. We found that this could be useful if you’d like to provide optional customization options to the users.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

4.4 File Form Element
To add the file upload element to the form you need to create a new node and add it to the
<fields> node of the configuration file, with the
<frontend_type>file</frontend_type> and:
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
To open a node for the new element, decide how you’d like that element to be called. In this example we will call it file_example .
<file_example>
*** the rest of the code will go here ***
</file_example>
After you’ve created a node for file_example , you can add its label and form element type.
To have the file_example form element select box, you would need to add the
<frontend_type>file</frontend_type> in the file_example node:
<file_example>
<frontend_type>file</frontend_type>
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
</file_example>
To add the label that will explain the user what he needs to enter, you should add the label to the file_example node:
<file_example>
<label>Please upload a file </label>
<frontend_type>file</frontend_type>
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
</select_example>
To make this form field to required, add the required option to the file_example node:
<file_example>
<label>Please upload a file </label>
<frontend_type>file</frontend_type>
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
<required>true</required>
</select_example>
If you need to add further explanation of the particular personalization option, we recommend that you add a comment option:
<file_example>
<label>Please upload a file </label>
<frontend_type>file</frontend_type>
<allowed_file_types>png, gif, jpg, jpeg, eps, ai, pdf</allowed_file_types>
<required>true</required>
<comment><![CDATA[ <p>Allowed file types: png, gif, jpg, jpeg, eps, ai, pdf. Not all browsers support all these formats!</p> ]]></comment>
</file_example>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

The end result on the product page:
4.5 Check Box Form Element
To add the check box element to the form you need to create a new node and add it to the
<fields> node of the configuration file, with the
<frontend_type>checkbox</frontend_type>
To open a node for the new element, decide how you’d like that element to be called, in this example we will call it checkbox_example .
<checkbox_example>
*** the rest of the code will go here ***
</ checkbox _example>
After you’ve created a node for checkbox_example , you can add the label and form element type. To have the checkbox_example form element check box, you would need to add the <frontend_type>checkbox</frontend_type> in the checkbox_example node:
<checkbox_example>
<frontend_type>checkbox</frontend_type>
</checkbox_example>
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

To add the label explaining the user what he needs to enter, add the label to the checkbox_example node:
<checkbox_example>
<label> Example of the check box </label>
<frontend_type>checkbox</frontend_type>
</checkbox_example>
And optionally, to make this form field required, add the required option to the checkbox_example node:
<checkbox_example>
<label>Example of the check box </label>
<frontend_type>checkbox</frontend_type>
<required>true</required>
</checkbox_example>
It would produce this:
There is no limit to the number of form elements, or the number of form element type in a form. You can, for example have multiple text areas or multiple checkboxes combined in one form. You can also combine elements and put them in any order you want. You can set which elements are required (if any) and add comments and/or labels to the form elements as you please and name the form elements however it fits you best.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

Here’s an example of the filled out form with multiple personalization form elements on a demo configurable product:
Now we will go through with the checkout now, to show you how the product personalization options show up in your Magento administration.
Once the checkout has been completed and the order is placed, please log in to your Magento administration and select Sales>Orders from the admin menu.
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

On the orders page, locate the order that has products with the personalization options and click on the view link to view the order. You’ll notice the “Product
Personalization” tab . Click on that tab and you will be able to see the values that the customer entered in the Personalization form.
Though the extension has multiple template and layout files, there are two template files that you might want to locate and customize to fit your magento theme.
The first one is the template that holds the personalization form on the product details page, it’s called the wrapper.php and it can be found in :
/app/design/frontend/default/default/template/product_personalization/catalog/product/options/ folder. (Please remember to replace the /default/default/package/theme to your package/theme name in case your Magento system is not using the default/default package/theme structure).
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved

If you open that template for editing, you can see the default text holder content, the
“Lorem ipsum… “ text placed in a paragraph. You can replace that text with the information relevant to your Magento store, or you can simply remove the text.
For more information about Product Personalization, or any other Magento extension by
ExtensionsMall, please visit our website: www.extensionsmall.com .
Copyright © 2015 Extensions Mall – extensionsmall.com – All rights reserved