LiveArt HTML5 Product Designer allows users to personalize multi-sided products. The number of sides is optimized for up to 6, but more are available with slight customization. You can use it for custom printed gift cards, custom uniforms, business cards, signs, and a wide variety of products that need multi-sides support.

With LiveArt HTML5 Product Designer you can make a set of different products with different numbers of sides each. You can have in your designer t-shirt with 4 parts for user customization (front, back, left sleeve, right sleeve), a bag with 1 side to customize, and a tank top with 2 sides at the same time.

If you want to offer to your customer's customization of more than one side of the product you face the problem of multi-sided support of your online designer tool. LiveArt HTML5 Product Designer easily solves this problem allowing multiple sides for various products. The clear and intuitive interface helps your potential customers proceed with online designing up to final order making the creation process of unique items clear, simple, and pleasant. 

Think It. From the very first contacts with our clients, we thrive on understanding what their business is and what problem they are trying to solve with our tool. This comes in the form of company background, desired user stories, problem descriptions, and business goals. Once we have defined a set of initial scope that has to be covered, our team comes up with initial demos and prototypes.

Build It. Once signed up, the team now works more closely with the client team to compile a set of custom user stories, test cases for them, and respective performance requirements. Each set of this scope is estimated by the team, so that client is always aware of the scope and related cost of the project. The team then plans the sprints accordingly and delivers demos regularly to ensure the project is on track and aligned to customer expectations.

Ship It. Closely to project finish, when around 90% of the scope complete, we encourage the client to commence internal acceptance testing and alpha test for the users. At this time, both our team and client decide when exactly the product should be released and published to the broad audience.

Tweak It. The project itself isn’t finished with the final release. During the support period, the team stays focused on any performance issues, scope gaps, and common fixes to be brushed up for the post-release period. At the same time, both client and team continue to work on further updates, dictated by business needs, thus contributing to overall online product designer value for end-user.

The above approach, put into the Agile/Scrum methodology we use, provides firm results, and is always controllable. For a large company to implement the online design and jump into the market, what could be better?

Contact us if you need consulting services for your web-to-print business.

Infographic Provided by SmartVirtualPhoneNumber.com

The quote service is located in the main config.json file. Open the file and locate the line, which designates the endpoint that will handle the quote

"getQuoteUrl": "http://localhost/services/getQuote.php",

Since you would prefer to obtain a quote dynamically, based on selections of the user, you would place some sort of dynamic script into getting Quote service. Referring to a static file, for example, would always return the same price and totals no matter what the selections are and you would not want that.

Once the endpoint is set, use the Fiddler tool, Inspector, or Firebug to see what is being sent to the endpoint when the quote is requested. You would typically get the following JSON structure in the POST request as a “data” variable.

{
  "product":{ "id":"11", "color":"#FFF", "colorName":"White" },
  "locations":[
    {
      "name":"Front",
      "colors":2,
      "colorsList":["#4682b4","#000"],
      "designedArea": 384.60,
      "designedAreaRect": 480.50,
      "objects":[
        {
          "type":"txt",
          "designedArea":126.97,
          "colors":1,
          "colorsList":[
            "#4682b4"
          ]
        },
        {
          "type":"svg",
          "designedArea":258.63,
          "colors":1,
          "colorsList":["#000"]
        }
      ],
      "objectCount":2,
      "letterings":1,
      "images":1
    }
  ],
  "quantities":[{"size":"XS","quantity":1}],
  "namesNumbers":[]
}

While the product ID, color, or location name would be an obvious variable, some of them require explanation, as below:

   - colors - the number of colors used in design; this value is very usable for screen printing quotes. A “-1” value would mean the design contains a photo or too many colors;

   - colorsList - is a list of hex values for each used colors;

    - designedArea - area in units (inches, feet, any kind you designate as part of Product JSON), occupied by design. The designArea is a sum of designAreas for each of the elements.

   - designedAreaRect - an area of a rectangle, in units, occupied by all design elements;

Now once you obtain all these variables, LiveArt HTML5 would expect the following reply from you, the example goes below:

{
  "prices":[
    {"label":"Item Price", "price":"$29"},
    {"label":"Decoration", "price":"$15"},
    {"label":"Discount 0.25%", "price":"-$0.11"},
    {"label":"Total", "price":"$43.89", "isTotal":true}
  ]
}

All in all, you have just got little into Get Quote request, it’s structure, and the way it’s expected to work with LiveArt HTML5. Make sure to check our PHP sample code including reading variables and calculating color-based decoration fees.

Template-based printing may also prevent users from placing design elements in an unlikely position than can be close or in safe or trim areas. While implementing the least is also important for online web to print design tools, a fixed elements template would guarantee that the output would be fine to print without going back to the customer for additional approval.

Variable Data Printing is extremely helpful for business card companies, where users can simply create a batch order by simply selecting a template, uploading company logo, and sheet with people information. The sheet would contain variables such as name, second name, address and email and so on that will immediately populate on design. Implementing VDP benefits easiness to both customer and business owners as it makes the whole process faster, cheaper, and bullet-proof valid.

LiveArt HTML5 Product Designer supports both template-based and variable data printing. While integrating, a business owner may set specific user flow rules and setup both normal and VDP products. Additionally, there is no need for learning specific software for creating such templates — everything is done within the same simple product designer.

To apply for VDP or Template-based printing please supply the following information:

   1. Product type you are going to print on.

   2. Pricing rules that are associated with user choices.

   3. How many and which variables will be required in each template.

   4. Applicable examples per each template and product type.

Our team will quickly get back with the applicable package and assist with the setup. In the future, you will be able to prepare own new templates and lists for VDP printing.

— First and foremost, we’ve finally raised standards for an online product designer that is totally cross-platform and compatible by releasing LiveArt HTML5 Online Product Designer. After almost half of the year development and refinements, we gave users the ability to smoothly design their product from various tablets as well as desktop PCs. Yet still, our Flash-based products would please desktop users who prefer solid experience and quick integration.

— Our components started to get integrated into a greater variety of platforms like Magento, WooCommerce, OpenCart, and many others. Hosted shopping carts like BigCommerce or Shopify can now embed LiveArt HTML5 as a hosted option too!

— As the custom decoration industry grows, so do our variety of products that can be customized by our tool. A recent project involving bottle opener customizer, online flag designer and do it yourself flask website proved that a design tool can be used to customize any printable or engravable product.

— Finally, our integration partners Peexl.com can now handle a number of eCommerce shopping cart integrations involving an outstanding Magento Community Edition as well as other popular PHP-based platforms.

We look forward to “unlock” new achievements in 2014 and would like to thank to all our clients and partners who stay with us and enjoy our online design products. Wishing everyone a Merry Christmas and a Happy New Year 2014!

Basically, a 3D design preview applies design onto a product model, allowing the user to rotate it in a 360 degree while realizing how the end printed one would look like. A 3D product preview can be implemented for all types of LiveArt software, including  LiveArt HTML5 version. Upon additional request, our team can build custom scenes for a product rather than allowing preview float in a space, which is the most simple implementation.

A realistic touch can be made for phone cases 3d previews, t-shirt 3d previews, mugs, cups, USB drives, and a number of various products one can imagine.

Want a 3D Product Preview implemented for your project? Gather up a bit of information and let us know:

- A version of a product you are already using or planning to use. Applicable versions are LiveArt HTML5, LiveArt Shop and LiveArt Lite;

- A product type you would like to enable 3D preview for - t-shirt, cup, mug, banner, notebook, jewelry, etc.

- Any additional preferences to controls or scene itself.

Today the personalization comes out of 2-dimensional into complete 3D, where one can 3D print small applicable things like phone cases. A 3D Product Preview or designer would benefit much to further augmented the feeling of designing and engagement as well as customer love. Happy online designing!

Most eCommerce websites support product options that are available to the user. These could be the color of the product, a particular variation of it, or extra support or service. The options may also affect pricing depending on the choice, provide discounts, and such. Related pricing changes may render online, giving the customer a precise quote for the custom product they are going to order.

While LiveArt HTML5 primary function is being an all-in-one product designer, it can be also used for product configuration along with putting decorations like text and artwork. While the state of the art eCommerce product configuration forms normally don’t allow the user to preview the custom product, LiveArt HTML5 preview may change depending on the options chosen.

One of the prominent examples is a uniform configurator, where normally the customer’s goal is to select the colors of their team, upload the logo, and add some texts like team names. LiveArt HTML5 Product Designer provides shop owners with the ability to build configurable products that can change their look as the user tries various options. Coupled with the live quote system, the product configurator gives users transparent and quick quotes making ordering simple and robust.

Not only uniforms but also other popular products like phone cases can be loaded into LiveArt HTML5 Product Designer for live configuration and decoration. Having a live configuration of the product would eliminate the necessity to have heavy forms on your website and make the process easy and fun for your customers.

Fortunately, HTML5 has shown its drawbacks immediately after first admirations subsided. HTML5 proved to be an expensive development for enterprise-level applications (like Facebook, who switched to native app development), although the internet is full of simple yet glamorous mashups and small utility apps.

When we first started development of HTML5 online product designer application, the QA and tests part of development started to take much more time than it was anticipated. Numerous browsers, platforms, mobile devices, at least 90% of them had to checked against each of LiveArt HTML5 feature. Aside of the touch functionality to work on tablet and smartphone devices, our developers had to continuously verify the look and feel to appear consistently across different resolutions. All of the above took much more resources than required for similar Flash application development.

No doubts, the obvious conclusion everyone will be able to make is that HTML5 development is much more expensive. Add responsive layout here and you will get at least twice as big budget for HTML5 than you would for Flash.

Another challenge is that unlike Flash player updates, which rarely affects much on the existing application, a release of new browser or iOS version may really ruin a day for your HTML5 application or website. While Flash player runs application in a “sandbox”, independent from other elements on your website, the HTML5 application consists of numerous components that work together to let end users feel a Flash-quality application.

In Flash application, it’s responsibility of the Flash player to run your application in a correct way. In HTML5 application, it’s browsers responsibility to implement the web standards in a way to make the application work. Standards (like Javascript, CSS and HTML elements) are the ones that differ much in implementation in various browsers and platforms. What may work perfectly in iOS Safari would completely hang up your desktop PC under Firefox, a behavior you will never meet with Flash.

We are not advocating Flash here. As we all know, HTML5 is good because it works on mobile. You want to stay in business, you do the HTML5. It’s expensive, it’s painful in development, but in the end it will pay off in increased audience, become your love mark and keep you in the market.

Costs involved and expected ROI

The first thing to consider would be the budget, required to have an online design software enhancement. Study the market and get an idea of what it would cost to get the software deployed for your website. A lot of forums are discussing the available solutions that may or may not work for your particular business.

Another helpful thing would be to gather the necessary requirements for the custom user scenarios you might require for your web to print system. Comparing these against available features of online product design software would help in making the right decisions.

Whether you have an existing website or just plan to have one, defining a budget depending on planned ROI would help in looking for a solution that will fit. We assume you already have printing equipment and learned already about existing eCommerce platforms available on the market.

Users of the future system

Looking at the available tools on the market, it is best to envision your average customer using such tools to customize and buy a personalized product from you. Learning about common questions, patterns of behavior, and problems is crucial for implementing the web to print technology successfully. It may be also helpful in running a survey across the existing website or polling users. The survey results will answer questions like whether designing their product online would be more convenient than using the traditional methods. If you are using a phone operator or in house artist that works on customers’ designs, think whether your customers would feel better with a self-service online design application instead.

Streamline factor - will orders be processed faster?

One of the main benefits you get with web to print system is lowering the costs for each received order. Rather than having a person talk to a customer and prepare a design according to the customer’s vision, an online product designer allows users to place an order personally without applying for service or talking to anyone. Before implementing a web to print system, think of your present business process and whether deploying an online design tool along with an eCommerce website would help to streamline existing orders thus lowering the costs and allowing the business to scale.

Bear in mind that you would still require personnel to run the system, accept and process orders, and troubleshoot possible questions coming from customers. Make sure to provide adequate training for them when the system is in place and ready for launch.

Products compliance

Some of the most popular promotional items that can be easily deployed for online design software are t-shirts, jerseys, mugs, and such. You can find lots of blank images across the Internet, either worn by models or seen plain, and prepare a catalog easily. The customizations such as gallery artwork, text, or user uploaded image are seen clearly and perfectly work as live proof. However, certain products require more complex customization and modification of the web to print software itself. Such products may concern printing business that produces signs and banners, business cards (including Variable Data Printing), and complex items requiring 3-dimensional visualization as shoes or gift boxes.

Prepare a plan

Taking the available budget, existing customers, streamline factor, and products you sell into account is important in order to make some final decisions. Despite having an online product design system for a printing business becomes a firm trend for over 10 years already, one should clearly evaluate and plan such advance ahead.

Accurate budgeting, planning, and overall readiness for the web to print system implementation would help your business make a solid step forward and get to the next level, acquire new markets and make your customers happy.