• Main features
• Installation
• Setting up payments (Stripe)
• Setting up your categories
• Setting up your products
• Setting up your pricing
• Managing and printing orders
• Adding clip-art and fonts
• Additional information for developers
• Requirements
• Sample data
• Support

Licencing: Please view licencing information on http://expresspixel.com/licenses

Main features

1. Single page app – design your product, add to cart and check out all in one page

2. Uses HTML5, AngularJS, Bootstrap and FabricJS

3. Stripe integration for a fast checkout experience

4. Responsive – works on mobile, tablets as well as desktops

5. Add your own fonts, clip art

6. Admin interface to add products, color variants and manage orders

7. Features include a user image gallery, zoom in/out and more

8. A standalone, flat file system for ease of integration with any other system

Installation

Pre-installation

You'll need to make sure you have the following:

• Access to your web server (FTP/SSH/SFTP)
• A text editor
• A web browser
• Check that your server has met the requirements

Now unzip the downloaded file to a folder on your hard drive

Installation

1. Download and Extract

   Now unzip the downloaded file to a folder on your hard drive

2. Uploading

   You can upload your files to your web server using an FTP client. You’ll need to decide whether you want to install it in the root directory or in a sub-directory.

3. It’s installed. You can now access it by going to the web address of the folder you uploaded to.

4. The admin can be found in the /admin directory. The default password is :

   Username: admin
   Password: changeme
   

   We recommend that you change the password.

5. Make sure the following folders are writable (CHMOD):

   • /storage/
   • /data/database/

6. Advanced users : it's currently using sqlite for ease of installation. Switching to MySQL is a better option for high traffic sites. You can switch by changing the config.php file with your own database details.

Now you need to configure your products and payments before you can start using the system.

Setting up payments (Stripe)

Login to your admin control panel and click on “Settings” in the menu.

1. Stripe secret key
   Now unzip the downloaded file to a folder on your hard drive

2. Stripe publishable key
   You can upload your files to your web server using an FTP client. You’ll need to decide whether you want to install it in the root directory or in a sub-directory.

3. Default currency
   We’ve set this to USD by default. Select the one you want to use and make sure stripe supports it.

4. You’re ready to start accepting payments..

5. You can test payments using

   Number	Card type
   4242424242424242	Visa
   4012888888881881	Visa
   4000056655665556	Visa (debit)
   5555555555554444	MasterCard
   5200828282828210	MasterCard (debit)
   5105105105105100	MasterCard (prepaid)
   378282246310005	American Express
   371449635398431	American Express
   6011111111111117	Discover
   6011000990139424	Discover
   30569309025904	Diners Club
   38520000023237	Diners Club
   3530111333300000	JCB
   3566002020360505	JCB

   Taken from : https://stripe.com/docs/testing.

* Note – if you don’t want to use stripe, please refer to the “Developers section”.

Setting up your categories

You’ll need categories for your products. Click on the “Inventory” menu then “Categories”. Enter the names for your categories and use the arrows to move it up and down. It will be displayed in the same order in the designer.

Setting up your products

1. Click on the “Inventory” menu to start.
2. Click on “Add new product” and enter your product details.
3. On the next page you can enter your pricing information, variants, editable orientations and more.

Setting up variants

1. Click on the “Add new variant type” to add a new variant based on colors
2. If you’ve already set-up a variant you need to click on “Add new variant” and select it from the newly added dropdown list
3. If you need more orientations you’ll need to Click on “Add new orientation” on the box above
4. Click on select image for each orientation and upload your image. Note: your image must be 500x500px

Setting up areas

1. You will have to set up an area that the user can design in for each product
2. Scroll down to the “Editable area” section
3. Enter the printable width and height in mm. This is the size of the area your users will be able to design in
4. Also, enter the offset X and offset Y in mm. These values position your editable area size on your product
5. Lastly you need to enter the orientation dimensions, again in mm. This equates to the width and height of the 500x500px in relation to your actual product size
6. You’ll need to do this for each product

Setting up your pricing

1. Click on the “Pricing” menu to start.

2. Set your postage costs

3. Enter the cost per color for each side

Managing and printing orders

All your orders are visible in your “Dashboard”. Click on the “Orders” item in the menu to view your orders.

1. Selecting an order
   Orders are sorted by the date it was ordered. Click on “View” to view the order details.

2. Printing images
   Click on download images to view what your customers had designed. This image can be printed.

3. Quantities and pricing
   Make sure you check the sizes ordered and their respective quantities.

4. When you’ve printed and dispatched the order – select the “Yes” option and click on save. This will mark the item as dispatched.

Adding clip-art and fonts

Adding clip-art

All clip-art is stored in the “clip_art” folder. You can create directories in this folder and upload your images there. They will appear in the clip-art section of the designer.

Adding fonts

We use the “Font Squirrel” format for fonts. All fonts are stored in the “fonts” folder. If you want to add your own fonts, you’ll need to upload the following :

1. An image in the /png folder

2. A json file in the /json folder. It needs the following content:

   {
   	"name": "1942 report",
   	"url": "1942-report",
   	"category": "Typewriter",
   	"variants": ["Regular"],
   	"regular": {
   		"stylesheet": "fonts\/web\/1942-report_Regular\/stylesheet.css",
   		"ttf": "fonts\/web\/1942-report_Regular\/1942-webfont.ttf",
   		"fontface": "1942_report1942_report"
   	},
   	"italic": false,
   	"bold": false,
   	"bolditalic": false
   }

3. The webfonts must contain a directory "FontName" with woff, ttf, svg and eot files. This can be generated using Font Squirrel.

These fonts will appear in the font selection area of the text adding/editing sections.

Additional information for developers

If you’re a developer and want to integrate the designer into your own shopping cart or website here are a few things that might help you:

1. Importing products
   Products are all stored as yaml files. If you already have a database of products you can export your product and the details to a yaml file with the following structure:

   name: 'Baby Cap'
   slug: baby-cap
   description: 'Something'
   category: 'Baby Cap'
   price: '9.90'
   sizes:
       - 'One size'
   orientations:
       - { name: Front, width: 282.55860150973, height: 282.55860150973, printable_width: 109.9960269976, printable_height: 109.9960269976, printable_offset_x: 84.7676, printable_offset_y: 137.243 }
       - { name: Back, width: 282.55860150973, height: 282.55860150973, printable_width: 109.9960269976, printable_height: 109.9960269976, printable_offset_x: 88.8041, printable_offset_y: 137.243 }
   variants:
       - { name: white, price: '9.90', orientations: { Front: 817_1_1.png, Back: 817_2_1.png } }
       - { name: black, price: '9.90', orientations: { Front: 817_1_2.png, Back: 817_2_2.png } }
       - { name: 'grass green', price: '9.90', orientations: { Front: 817_1_88.png, Back: 817_2_88.png } }
       - { name: 'sky blue', price: '9.90', orientations: { Front: 817_1_63.png, Back: 817_2_63.png } }
       - { name: navy, price: '9.90', orientations: { Front: 817_1_399.png, Back: 817_2_399.png } }
       - { name: red, price: '9.90', orientations: { Front: 817_1_196.png, Back: 817_2_196.png } }
       - { name: pink, price: '9.90', orientations: { Front: 817_1_236.png, Back: 817_2_236.png } }
   defaultVariant: white
   

   
   

2. Linking to a product
   If you need to link to a specific product you can use the product slug as follows.

   http://example.com/#product/@product-slug@

   
   The designer will then load the desired product.

3. Customizing the theme
   The theme is coded in Bootstrap and LESS. To change colors/fonts you will need to edit variables.less.
   If you want to change the layout and structure you must edit the HTML files in the /views/ folder.
   It’s built with gulp.

4. Adding different payment options
   The BuyCheckoutController.js contains a method called submitForm. You can modify this method to submit your form to your own shopping cart or change to another payment method.

5. Integrating it into your website
   The simplest way is to use an iframe with the link to the designer. Alternatively, you can copy the links to the css, json from the index.html in the dist directory with the body.

6. Integrating your own shopping cart
   Once you’ve imported your own products to the yaml file and changed the submitForm function, you’ll almost be there.
   
   There API calls to:
   session.php that maintain a session. You may need to modify this to keep track of your user if they’re logged in.
   upload.php it may be nice to associate uploads with user ids.
   checkout.php stores the payment data
   

Requirements

1. Apache 1.13.19 or above
2. PHP 5.4+
3. ImageMagick >= 6.2.4 with imagick php module
4. The mod_rewrite Apache module
5. Stripe account

Sample data

If you'd like the sample data used in the live demo, you can download it from here - http://docs.expresspixel.com/data/print-pixel/extras/sample-data.zip

Support

For any enquiries, help, suggestions or feedback you can contact us on [email protected]. If you’d like custom development or theming we have a pricing section that you can refer to before contacting us.