NRize Responsive Custom T shirt Designer

Transcription

1 NRize Responsive Custom T shirt Designer Created: 22nd July 2015 Latest update: 16 May 2016 By: CSSChopper Team david@csschopper.com Shopify Page: product customizer Know Your Purchase Technical Description NRize Online product customizer tool and a Shopify Extension which is used to design or customize all kinds of T Shirts and apparels for men and women. From the App back end section in your Shopify account, you can select which T Shirt can be personalized by the customer. There you can also mention additional customized price for a product. By Using NRize, customers can Design Products as per their need such as: add cliparts from the list added by you, or upload their own arts or images to the Product. Featured with extremely flexible design pricing, in built cross platform compatibility, and SEO facility, this awesome t shirt designer tool is easy to install & setup and enables the users to design or customize various parts of the t shirt according to their interests. This fully responsive product design software simplifies the users task and provides the print ready output in PDF, PNG, and SVG formats. Users can even share their innovative product designs through or social media websites like Facebook and Twitter. "Shopify NRize Product Designer Tool" application has some excellent features and it is easy to setup. NRize is more flexible and compatible with many existing application s in the Shopify repository. This application is fully customizable. Users can easily configure the application into the new or existing Shopify Stores. Let s have a quick glimpse over the matchless features so that you can make the most out of this app: 1. Easy to Install Extension with easy installation guides % Responsive Product Designer Tool with mobile ready. 3. Add multiple text items and decorate them with fonts and colors. 4. Easy setup of extensive cliparts with multiple colors.

2 5. Option to upload your own design images 6. Full Width Layout 7. Blog Pages 8. Adjustable design area 9. Multiple types of ready to print outputs, like svg, png, and pdf 10. Flexible design pricing 11. Google fonts 12. Vendors specified products 13. Smooth drag, rotate and flip functionality 14. Share your creative design on Facebook, Twitter, , etc. 15. Multiple view & color of Products. 16. Compatible with all Desktops, Tabs, Mobile Phones, etc. Getting Started A) Con gure Shopify Store You need to Sign Up for Shopify store and set up your store. How to Sign Up Shopify Store 1. Go to and then tap on Get Started button from the right top corner 2. Start your free trial for 14 days- Enter your , Password, Your store name and tap on Create your store. 3. Now enter address details 4. Tell us a little about yourself 5. Now your store is ready G) Install and Activate NRize App How to Install and Activate NRize 1. Login to your Shopify Account 2. Go to Apps tab in the left navigation. 3. Now Tap on Visit Shopify App Store button in the top right corner. 4. Now a Prompt will appear which will ask Already using Shopify? if yes, then Enter your store URL:(Which is auto- lled if you login prior) and now tap on Login. Otherwise you can also create your store from here as well.

3 5. Now App Store will open- Now, in the search box, write NRize Custom Product Designer 6. Tap on GET button in the right of the screen. Here we have 14-days trial free for our users. 7. Now on the next screen, tap on Install App button 8. Congrats, Nrize is installed in your Shopify account. How to setup your Shop using NRize: Apps > NRize 1. PRODUCTS 2. CLIPARTS 3. TEXT 4. ORDERS 1. PRODUCTS A. Manage Categories: Apps > Products > Manage Categories Here you can add the category you have the product for. Like By Default, we have added Men and Women category. It means users can buy product for Men and Women Category Note Every category needs to have a sub category. You can add sub category by tap on the Category name.

4 B. Manage Products: Apps > Products > Manage Products Here you will find the list of added products on your website. For example, we have added two product Men T Shirt and Women T Shirt with their Related Category, Price, Width and Height Status. You can delete and Add new product as per your requirements. Add New Product C. Manage Product Color Manage Product Color is used for assigning multiple colors to the customizer products. In this module, you need to add unique colors that will display in products module tool data tab. For each color, you need to set price, upload each view images. After that, it will display on the right side of the designer tool page. Here trying to explain things with the help of images:

5 D. Manage View: Apps > Product > Manage View Manage View module is to manage the designer parts of any product. In this module, you can add all unique views that you will use for your products to customize. For example, in the case of T shirt, you can put Front, Back Views. In this module, you need to add data in the same manner as you are adding information to other modules. View Details Add/Edit View E. Manage Product Size: Apps > Product > Manage Product Size Manage Product Size module is to manage the size of any product. In this module, you can add all unique sizes that you will use for your products to customize. For example, in the case of T shirt, you can put Small, Medium, and Large. In this module, also you need to add data in same manner as you are adding information to other modules. F. Manage Product Style : Apps > Product > Manage Style If you want to have multiple Views dependent on a specific product you are adding then this module will help you to achieve it. By this module, you can create multiple styles, each style can have their own Views. This style you need to select during product creation in manage Product module. Like if you are adding T Shirt, then you can select one style which has FRONT, BACK Views whereas if you are adding another product which is having 4 views then you can easily select the other style. Design Style Details

6 2. CLIPARTS: App > Clipart A. Manage Clipart Category: App > Clipart > Manage Clipart Category Clipart s are the predefined artworks uploaded by admin. Online product customizer NRize supports 2 level categories, so from here, you can create clipart categories. Admin will select the predefined category when you upload the clipart into the admin. B. Manage Cliparts : Apps > Clipart > Manage Clipart Online Product Customizer NRize Supports SVG images as Clipart. So using this module, you need to upload SVG images from here. While uploading SVG images, you need to write the title, assign clipart category, which you defined in Manage Clipart Category & other information. The images uploaded from here display under Clipart tab of designer tool.

7 3. Text : App > Text A. Manage Fonts : App > Text > Manage Fonts Online Product Customizer NRize supports Google Fonts for text. Google fonts are the most popular this time. For this, you need to Select fonts from and then Copy the JavaScript code provided by Google and paste in the text area and after that, click Save Button. It will populate a new form for.z,.ctg.z,.php files. These files are required for PDF output so must upload these versions of files. a. How to Add Google Fonts into my Shopify Appa. Go to b. Add fonts to your collection and download it for further use c. After Selection of Fonts, Tap on the Use button in the footer ( Put Text_ManageFonts2) and write Select use button d. Select type of fonts (Normal, Bold, Italic): Put Text_ManageFonts8.2 e. Now Scroll down to Add this code to your website and select JavaScript. ( Put Text_ManageFonts3) f. Now Select and Copy the JavaScript code. g. Then Go to NRize Admin Panel Text ManageText Font and paste the copied code into Google Font area ( Put Text_ManageFonts4) h. Now Scroll down and find Upload below font s file for PDF ( Put Text_ManageFonts5) How to find.z,.ctg.z &.php files for Fonts for PDF

8 a. For this, you need to download shortlisted fonts (explained in step 2 above) & extract them at any location of your computer b. After that, you need to open website portal.com & drop regular TTF (from both the folders which you get after extraction of downloaded file) there. c. It will give you the option to download font file in 3 extensions. Download them & upload in NRize Admin Panel Text > Manage Font Module. For reference, please check screenshot: ( Put Text_ManageFonts8.5) Also Put 8.6 d. Click on save button. b. Manage Text Colors: App > Text > Manage Text Color Online Product Customizer NRize supports multiple colors of the single elements i.e. SVG image & text. The colors added from here will display at the bottom of customizer tool & when you will write text or drop colorable SVG images then the customers can change their colors listed from this module. 4. ORDERS A. Order Zip Download: App > Orders > Order Zip Download You can download output files for customized products here. We are generating PDF, SVG output for printing & PNG output as a snapshot. Pre Design Products

9 All Products created from the designer tool will display in Shopify product section. From there, the admin can set visibility on front end by setting their visibility. Any product created from the designer tool is listed here but their visibility is hidden. To make products visible, please refer to screenshot: Sources and Credits We've used the images, icons or other files from the following sources as listed below Ethan Marcotte for introducing Responsive Web Design BootStrap for developing Best of the time Framework Shutterstock for awesome images in preview for fontawesome icon animation Google Font for beautiful custom font tympanus.net for great CSS animation & effects No refresh is handling all the technical support for this plugin, so in case you have any questions related to this theme make sure you are redirected to No refresh only. Read below on how to contact no refresh in case you have any query or concerns related to this plugin. Images & Other Third Party License All the Images, JavaScript, CSS libraries, any Effects which come with this template are either on GPL or MIT licenses to distribute or modify within proprietary nature or purchased with full rights to share and/or resell. If you ve purchased Regular License, you are just authorized to use this template for a single website; it means you are not authorized to distribute, share or resell this template or any item (images, JavaScript, etc.) or even a single piece of code. All the images are under copyright to their respective owners. The photos used in the live preview are just for demo purpose. In the case of any query on licensing & usage, feel free to us at david@csschopper.com. Advance Customization & Development

10 If you are looking forward to highly customizing this application or willing to do some custom development. We have our custom development team always ready to help you with all your requirements. This will be charged on an hourly rate basis. Once you request for the job, our technical team will get aligned with you over timeline as well as the costing required to do the job. Once you agree and pay the upfront amount, the team will start working on the job. To request a customization or development, you can us at david@csschopper.com. Thank You Note Thanks for reading the document. We hope it s been really helpful and resolved most of your concerns. In the case you still have doubts related to any section then we are more than happy to assist you on any of your queries for which you can directly us at david@csschopper.com. Once again, thank you so much for purchasing our item. Copyright 2016, All Rights Reserved by NRize Responsive Custom T shirt Designer. Developed By CSSChopper