personalized products rich milople userguide · PERSONALIZED PRODUCTS RICH User Guide...

PERSONALIZEDPRODUCTSRICH

UserGuide

1.Introduction

ThePersonalizedproductsextensionforMagento2allowsthecustomertopersonalizevariouskindsofproductsliket-shirts,mugs,caps,phonecoversetc.byaddingtexts,images,clipartetc.Thisenhancesshoppingexperienceascustomerscandesignproductsaccordingtotheirrequirements.ThisMagento2productdesignerhastwoversions:RichandCool.

2.ExtensionConfiguration

AfterbuyingtheextensionyoucangotoMagentobackendandconfiguretheextensionfromhere.

Youcanaccessyourserialkeyfromthe“MyAccount”dashboardandenteritheretoactivatethemodule.

Thebelowfunctionalityallowstheadmintoenableordisablethepersonalizedproductsextensiononthefrontend.

3.Productpagewithpersonalizationfeaturesenabled

4.PersonalizationAreasettings

Usingthissettingtheadmincandefinetheareawithinwhichacustomerwillbeabletoapplyallpersonalizationfeatures.Outsidethisarea,personalizationwillnotbepossible.

Setthisto“No”ifyoudonotwantanyrestrictionondesignareainsidetheproductimage.

5.Generalconfiguration

5.1CustomizePersonalizationbutton

Usingthisfeaturetheadmincancustomizethepersonalizationbuttonlabeltosomethinglike“PersonalizeNow”,“Personalizethisproduct”etc.

5.2SettingPersonalizationMode

Thissettingallowstheadmintodisplaythepersonalizationfeaturesdirectlyontheproductpageorintheformofapop-up.

Setdesignareadimensionsonproductimage.

6.Howtoassignproductspecificpersonalizationfeatures?

NavigatetoMilopleExtension->Catalogwillopenthefollowinggridwithallstoreproductslisted.

Personalizationmodesetto

“productpage”.

Personalizationmodesetto“pop-up”.

Clickingon“Personalizeit”willopenall

personalizationoptionsinapop-upwindow.

Clickingon“Edit”willallowtheadmintosetpersonalizationfeaturesforthisspecificproduct.

7.TextandFontSettings

Settingthisto“NO”willdisablepersonalizationoptionforthe

selectedproduct.

Settingthisto“NO”willdisable“nameandnumber”functionalityfor

theselectedproduct.

Thestoreadmincandecideifhe/shewantsthecustomertobeabletopersonalizetheproductbyenteringtextintothedesignarea.

Also,textformattingwithgooglefontscanbeallowed.Theadmincanchoose,whichgooglefontswillbeavailabletothecustomerfortextformatting.

The admin can addnew fontsapartfromthegooglefonts.

Thestoreadmincan

navigatetoMilopleExtensions->ManageFontsandfindagridwhereallcreatedfontsarelisted.Thestatusandnamesoftheseexistingfontscanbeeditedornewfontscanbeaddedusingthe“AddNewFonts”button.

Clickingon“Select->Edit”foranexistingfontorclickingon“AddNewFonts”willredirecttothepageshownbelow.“Select->Delete”willdeletetheselectedfont.

Theadmincansetanamountinthisfield.Thisamountwillbechargedforeachtextthatwillbeaddedbythecustomerintothedesignarea.Leavingthisemptywouldmakeitfreeforthecustomerstoaddtext.

Theadmincaneditfontname.

Theadmincanenable/disablethefontonthefrontend.

Thefontfilescanbeuploadedhere.

8.Imageandclipartsettings

Theadmincanallowthecustomertouploadimagesandclipartintothedesignareaforthepurposeofpersonalization.

Settingtheseto“No”willnotallowthecustomertopersonalizetheproductwithimagesandclipart.

Theadmincansetanamountinthisfield.Thisamountwillbechargedforeachimagethatwillbeaddedbythecustomerintothedesignarea.Leavingthisemptywouldmakeitfreeforthecustomerstoaddimages.

8.1Howadmincandownloadrawimages

Thisextensionallowstheadmintodownloadtheimageoforiginalsizeandqualitythatwasuploadedbythecustomerintothecanvasforthepurposeofpersonalization.

8.2“FittoCanvas”settings

Theimageuploadedbythecustomerforpersonalizationwillfittotheexactsizeofthecanvas.Settingthisto“No”willdisallowthisfunctionality.Inthatcase,theimagesizewillremainsameasoriginalirrespectiveofsizeofthecanvasorsizeofthedesignareaavailable.

9.ManageClipartImage

BynavigatingtoMilopleExtensions->ManageClipartimage,theadminwillbeabletofindgridshownbelow.Hereallthecreatedclipartimageswouldbelisted.Newclipartimagescanalsobeaddedusing“AddNewimage”button.

Clickingon“Select->Edit”foranexistingimageorclickingon“AddNewImage”willredirecttothepageshownbelow.

10.ManageClipartcategory

BynavigatingtoMilopleExtensions->ManageClipartcategory,theadminwillbeabletofindgridshownbelow.Hereallthecreatedclipartcategorieswouldbelisted.Newcategoriescanalsobeaddedusing“AddNewCategory”button.

Clickingon“Select->Edit”foranexistingcategoryorclickingon“AddNewCategory”willredirecttothepageshownbelow.“Select->Delete”willdeletetheselectedcategory.

Alltheclipartimagesaddedin“ManageClipartImage”section,wouldbelisteddownasshownbelow.Fromhere,theadmincanselectdesiredimagesandclickon“Savecategory”willassignthoseimagesunderthisparticularclipartcategory.

.

Thenameandstatusofthecategorycanbe

editedhere.

11.Predefinedtemplatesettings

ThisisavailableonlyintheRICHversion.

Admincanenable/disabletheTemplate

functionality.

The“Template”functionalityallowsthecustomertoaddpredefinedtemplatesonthedesignareaandalsotoedittheexistingtemplate.

11.1WherecanyouaddtheTemplates?

Aftersettingthestatustoenableadminhastocreatetemplateonthebackend.TodosoadmincannavigatetoCatalog->Products.Clickoneditoptionoftheproductthatonewantstocreatetemplate,navigatetoImagesandVideostabandclickonediticon.Amodelwillbeopenasshowninthebelowimage.

11.2CreatingNewTemplate

AdmincancreatenewtemplatebyclickingonAddNewTemplate.OnAddNewTemplatepageadmincanadd text, imagesandcanset thepositionof themrespectively.

11.3AssigningTemplatestoFrontEnd

AfterSavingthedesignofthetemplate,admincannavigatetohomebyclickingonHomebutton.Thereadmincanviewthepreviewoftemplatecreatedandcanassignittofrontendbyclickingonthecheckboxandsavingit.

11.4CopyingExistingTemplatesAdmincancopytemplatesbyclickingonCopyExistingTemplates.Allthetemplatesrelatedtotheproductwillappear.ThecheckedtemplatescanbecopiedbyclickingonAddExistingTemplates.

11.5DeletingTemplates

Theadmincandeletethetemplatesbyclickingondeletebutton.Thecheckedtemplateswillbedeleted.

12.NameandNumber

ThisisavailableonlyintheRICHversion.

The“Nameandnumber”functionalityallowsthecustomertoaddnameand/ornumberinthedesignarea.

12.1NameandNumberSettings

12.1.1NameandNumberforAllProducts

AdmincanassignNameandNumbertoAllProducts

12.1.2NameandNumberforSpecificProducts

TodosoadmincannavigatetoProductPage.Thereafter,hecanselecttheproductforwhichhewantstoallowNameandNumberbyclickingonedit.Thereafter,theadmincannavigatetoPersonalizedNameandNumbertab.Thereafter,hecansetasbelow.

AdmincanassignNameandNumbertoSpecific

Products

12.1.3NameandNumberonlyforspecificsideofaproductTheadmincanassignNameandNumbertoonlyspecificsideofaproduct.Theassignment of Name and Number for a particular side can be achieved byNavigatingtoproductpageandthenclickingonImagesandVideostab.TheusercanfindNameandNumberalongwithBase,Small,Thumbnailetc.,

*Note:ThebaseimagewillbeassignedtheroleofName&Numberbydefault.

12.2NameSettings

12.2.1NameforAllProducts

TheuserhastheflexibilitywhethertoprovideornottoprovidetheNamefieldtotheuser.TheadmincannavigatetoPersonalizedProductsConfiguration

12.2.2NameforSpecificProducts

TheNamewillappearforalltheproductswiththetitlegiveninthelabel

field

TheuseralsohastheflexibilitytoassignNamefieldtoonlyspecificproducts.TheadmincannavigatetospecificproductpagewherehecanfindPersonalizedNameandNumber

12.2.3NameFrontEndandBackEnd

FrontEnd

AfterassigningtheNameitwillappearonStoreProductPageasshownintheimage

BackEnd

Namewillappearwiththetitlegiveninthe

NameLabelfieldforthatspecificproduct

12.3NumberSettings

12.3.1NumberforAllProducts

TheuserhastheflexibilitywhethertoprovideornottoprovidetheNumberfieldtotheuser.TheadmincannavigatetoPersonalizedProductsConfiguration.

12.3.2NumberforSpecificProducts

TheuseralsohastheflexibilitytoassignNumberfieldtoonlyspecificproducts.TheadmincannavigatetospecificproductpagewherehecanfindPersonalizedNameandNumber.

NumberwillappearwithtitlegivenintheNumber Label for that Specific

product

Numberwillappearforalltheproducts

12.3.3NumberFrontEndandBackEnd

FrontEnd

AfterassigningtheNumberitwillappearon

StoreProductPageasshownintheimage

BackEnd

12.4SizeSettings

12.4.1SizeforAllProducts

TheuserhastheflexibilitywhethertoprovideornottoprovidetheSizefieldtotheuser.TheadmincannavigatetoPersonalizedProductsConfiguration.

SizewillappearwiththetitlegivenintheLabelforSizeBoxfieldwithvaluesspecifiedintheSizeBox

Valuesfieldforallproducts

12.4.2SizeforSpecificProducts

TheuseralsohastheflexibilitytoassignSizefieldtoonlyspecificproducts.TheadmincannavigatetospecificproductpagewherehecanfindPersonalizedNameandNumber.

TheSizewillappearwiththetitlegivenintheSizeLabelwithvaluesselectedintheSelectSizefield

12.4.2AddingSizeValues

TheadmincanprovidedifferentsizesforproductsbyaddingthevaluestoSelectSizeattribute.

13.Quote

ThisisavailableonlyintheRICHversion.The“Quote”functionalityallowsthecustomertoaddpredefinedquotesinthedesignarea.

13.1QuoteSettings

TheAdmincanassignQuotetoallproductsoronlyselectedproductswithafewsimplesteps.

13.1.1QuoteforAllProducts

13.1.2QuoteforSpecific

Products

AdmincannavigatetoProductPageinAdmin.TherehecanfindPersonalizedProductstab.

TheadminhastoassignQuotesontheProductPageoncehesetQuotes forSpecificProducts

13.1.3PriceperQuotes

AdmincansetPricepereachQuoteaddedontothedesign

AdminhastheflexibilitytosetQuoteforspecific

products

AdmincansetthesetQuoteforallproducts

14. Howcustomerpersonalizesaproduct?

14.1 Choosingsides

Thecustomercanchoosethesidesinwhichhe/shewantstodesign.

14.2 AddingText

Inthissection,thecustomercanaddatextinthedesignarea.Textstyle,texteffectcanalsobeedited.

14.3 Uploadingimages

Theusercanuploadimagesintothedesignarea.

14.4UploadingClipart

TheuserhasoptionslikeMovetext,rotatetext,bringtofront,sendback,flip,delete,andduplicatetext.

14.5AddingQuotes(Richversiononly)

14.6AddingNameandNumber(Richversiononly)

Youcanalwayscontactusatwww.milople.com/supportforanyqueryregardingthisextension.Wewouldbegladtohelpyou.

14.6AddingTemplate )Richversiononly(

15.supportandFeedback

Theuserhasoptionslikerotateimageclockwise,anti-clockwiseandcan

deletetheTemplateImage

Theusercangobacktothegallerywherehecan

findtemplates