custom product preview user manual by aitoc
DESCRIPTION
Give you customers an option of customizing your products by adding text and images to the specified places on your products. Great personalization tool that your customers can use right on your site and place an order using your Magento store.TRANSCRIPT
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 2/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
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 3/22
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
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 4/22
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. Custom Product creation
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 5/22
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
1. Custom Product creation
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 6/22
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.
1. Custom Product creation
2. Admin can use different images for each custom
option of one product (e.g. t-shirt front image, back
image, sleeve image, etc.)
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 7/22
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
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 8/22
2. Custom Product Preview extension options configuration
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
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 9/22
2. Custom Product Preview extension options configuration
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] | Page 10/ 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.
Go to the Catalog > Aitoc Custom Product
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.
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 11/ 22
Go to the Catalog > Aitoc Custom Product
Preview > Predefined Font Colors to create
and manage the Predefined Color Sets for the
Fonts to be used by the customers for the text
3. Fonts, custom shapes and predefined images management
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 12/ 22
Go to the Catalog > Aitoc Custom Product
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
3. Fonts, custom shapes and predefined images management
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 13/ 22
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)
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 14/ 22
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.
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 15/ 22
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)
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 16/22
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
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 17/22
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
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 18/22
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.
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 19/22
7. Save the designed graphics
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
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 20/ 22
7. Save the designed graphics
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.
Custom Product Preview Manual | Developed by AITOC, Inc. www.aitoc.com | [email protected] | Page 21/ 22
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)