custom product preview user manual by aitoc

Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | /22

TABLE OF CONTENTS

1. Custom Product Creation Page 3

2. Custom Product Preview extension options configuration Page 6

3. Fonts, custom shapes and predefined images management Page 10

4. Custom Product Preview Gallery Integration editor mod Page 13

5. Custom Product Preview Popup editor mod Page 15

6. Place uploaded image behind product image feature Page 17

7. Save the designed graphics Page 18

8. Custom Product Preview noticeable header Page 21

1. Custom Product creation


1. Please check the Custom Product check box to

use the image as background for the custom product

2. Admin is able to upload as many images as needed

(front image, back image, sleeve image, etc.)

4. Navigate to the Custom Options tab once you are done

with the background images upload for the custom product

3. Click Save and Continue Edit once you are done

with the upload of the images for the Custom product


1. Add custom option and choose Aitoc Customer Image as Input Type.

2. Choose the uploaded t-shirt image file as Image Template

3. Check the required options to

allow customer to upload custom

image or choose from the clip art

images predefined by admin

4. Allow customer to add custom

text, enable text color picker and

determine the max text length

6. Admin is able to manage

colors available in the text

color picker. Go to the Catalog

> Aitoc Custom Product

Preview > Predefined Font

Colors to create and manage

the Predefined Color Sets

5. CPP comes with a default set

of fonts and enables Admin to

upload unlimited number of

custom fonts from Catalog >

Aitoc Custom Product Preview >

Fonts

7. Enable masks to allow users to

select the custom shape for printable

area. Choose the categories of masks

to be used at front end.



1. Click Edit Printable Area to define

the possible printing area on the image

2. Click Apply once you define the printing

area, where customers would be able to

position their custom graphics and text



3. Click Save once you are done.

1. Admin can setup any number of custom options

specifying the different printing areas, image options,

text settings and the price for each of them.


2. Admin can use different images for each custom

option of one product (e.g. t-shirt front image, back

image, sleeve image, etc.)


2. Custom Product Preview extension options configuration

2. Select the image editor mode: gallery integration

(right on the product page) or pop-up window

1. Please open Configuration / Catalog / Custom Product Preview to configure CPP extension options

3. Choose between Buttons or Accordion List

menu for the editor :

5. Manage thumbnails size for the

gallery integration mode. It has

56х56 by default as this is magento

default product thumbnails size.

6. Use PSD, TIFF, EPS and other if

ImageMagick and image libs (libpng,

libjpg, libsvg, etc.) are installed at and

php exec command is allowed at your

host

7. Allow to save the preview image as

PDF (ImageMagick and ghostscript are

required)

4. Manage thumbnails size for the

pop-up editor mode, shopping cart,

order overview sizes for both of them

http://www.imagemagick.org/




1. Please open Configuration / Catalog / Custom Product Preview to configure CPP extension

3. Admin can limit colors available with the Predefined Color Sets only

5. Allow customers to share their customized

product via Facebook, Google + and email

7. Publish a defined set of

requirements for production image

to be displayed in confirmation

popup on the product page.

6. Force customers to confirm

they are aware of the technical

requirements for the production

image they upload, and/or that

this image is compliant

2. Increase Text Resolution setting in order to increase a quality of text objects

4. Add noticeable header (see how it may look like at the last page of the manual) to

a Home Page that will show customers the ability of easy custom product creation



Please open Configuration / Catalog / Custom Product Preview –

Style Settings to configure the look and feel of the image editor

Here admin can configure icons style of

the editor menu

Admin can configure general buttons style

Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | / 22

3. Fonts, custom shapes and predefined images management

Go to the Catalog > Aitoc Custom Product

Preview > Fonts to manage Fonts to be

used by the customer for the custom text.

CPP extension comes with a default set of

fonts and enables admin to upload or

delete fonts, makes the uploaded fonts

active for users at the front end.


Preview > Predefined Shape Categories to

manage the custom shapes to be used by

the customer for the printable area.

CPP extension comes with a default

set of shapes and enables admin to

upload or delete shapes, makes the

uploaded shapes categories active for

any single custom option.

Custom shape mask image should

be a black image with white

background saved as PNG file.



Preview > Predefined Font Colors to create

and manage the Predefined Color Sets for the

Fonts to be used by the customers for the text




Preview > Predefined Image Categories to

upload a set of clip art pre-defined images

sorted by categories

Customers can select an image from

the pre-defined clip arts to use at the

front end for the custom product



4. Custom Product Preview Gallery integration editor mod

Click on the thumbnail to choose

the product image for editing

Click on the preview to start editing

This is default style of Buttons menu. Please

open Configuration / Catalog / Custom Product

Preview – Style Settings to configure the look

and feel of the image editor

Admin can select the image editor mode: Pop-up window or Gallery Integration

that means right on the product page (shown at the current screen shot) at

Configuration / Catalog / Custom Product Preview (page 7 of the manual)

Admin can choose between Buttons (shown at this screen

shot) or Accordion List menu (page 7 of the manual)


4. Custom Product Preview Gallery integration editor mod

This is default style of Accordion list

menu. Please go to Configuration /

Catalog / Custom Product Preview to

configure editor menu style

Click on the thumbnail to choose the product image for editing

Admin can choose between Buttons or Accordion List (shown at this screen shot)

menu at he Configuration / Catalog / Custom Product Preview (page 7 of the manual)

Customer can add several text objects and position them one under

another easily to get a result with the multiple lines of text. When the

text object is selected (active) customer can edit the text and font of it.


5. Custom Product Preview Popup editor mod

Click on the preview to start

editing the product image

CPP extension forces customers to confirm they are

aware of the technical requirements for the production

image they upload, and/or that this image is compliant.

Customers can share their custom product via

Facebook, Google + and email with friends. That will

definitely increase the traffic.

Admin can select the image editor mode: Pop-up window (shown at the current

screen shot) or Gallery Integration that means right on the product page at

Configuration / Catalog / Custom Product Preview (page 7 of the manual)


5. Custom Product Preview Popup editor mod

Customer may choose an image from the

predefined clip arts or upload an image

Customer can apply custom shape mask

Customer can save the preview

image as SVG, PNG and PDF

(ImageMagick and ghostscript

are required required)

Add the product to the

Shopping Cart once you

are done with the custom

graphics and text

Customer can add custom text

specifying the font and color

together with outline and

shadow. It is possible to add

multiple text objects.

Admin can select the image editor mode: Pop-

up window (shown at the current screen shot)

or Gallery Integration that means

right on the product page at Configuration / Catalog

/ Custom Product Preview (page 7 of the manual)

Click Apply once you are done Click Reset if you want to reset

changes and start the process again

Customer can rotate, resize and

position the custom graphics and

text objects within the defined

printing area on the photo of the

customizable product



6. Place uploaded image behind product image feature

Customer can place their

custom graphics behind the

product image template.

Admin needs to use a

product image with white

transparent areas saved

as PNG file for this feature


7. Save the designed graphics

Both customer and admin can

save the designed graphics

and select the layers to include

into the saved file. Admin can

download the original image

uploaded by the customer

Customer can save the preview

image as SVG, PNG and PDF

(ImageMagick and ghostscript

are required required)

CPP extension supports multiple layers:

one printing area can contain several

images and text objects.




1. The preview image(s) are

available at the Shopping

Cart and Checkout

2. Customers can see enlarged

preview by click however they

CAN NOT edit the preview image



Admin can download the custom graphics

and text and select the layers to include

into the saved file. PDF (ImageMagick

and ghostscript are required), SVG and

PNG formats are available. Admin can

download the original image uploaded by

the customer

The preview image is available at the Order Overview and Invoice. An enlarged preview is available by click.



8. Custom Product Preview noticeable header

Admin is able to add noticeable header to a Home Page that will show customers the ability of easy

custom product creation from CMS > Static Blocks > Aitcg Homepage Promo Block. It should be

enabled at Configuration / Catalog / Custom Product Preview (see step 4 at the page 8 of the manual)

custom product preview user manual by aitoc

Software

custom image

product page

custom product creation

custom text

preview image

custom shapes

custom graphics

custom product check