Product designer "Fixed objects" mode: personalize a greeting card
Greeting card business with the Product designer software can be a perfect choice for designers because it allows you to express the designer vision and gives customers a possibility to create special personalized cards.
In this article we will show you how to create and personalize a greeting card using the Fixed objects mode of the Product designer.
The main features of the "Fixed objects" mode are as follows:
- ability to add text only to the fixed text area set by an administrator;
- ability to add photo only to the fixed photo area set by an administrator;
- ability to change text font if allowed by an administrator;
- ability to edit photo in the customer area to make it fit to a photo frame;
- ability to change a clipart color (clipart is set by an administrator).
There are lots of greeting cards types (birthday, holiday, romance, thank you, New Year, new baby etc), so you will have to prepare several greeting cards templates and create a special category and probably sub-categories for your greeting cards available for personalization.
Adobe Photoshop or Gimp are good tools to create predefined templates of greeting cards.
How to create a product
1. Log into your CS-Cart administration panel and go to Administration → Add-ons. Install the Product designer add-on.
2. Fill out the necessary fields in the Product designer general options.
Note: In the Product designer general options you can set the default values. It's possible to edit most of these values in the Product designer settings for a certain product.
3. Since the Product designer doesn't have a predefined collection of fonts, colors or cliparts, prepare Product designer for work:
- add fonts and create font categories,
- create colors and color palettes,
- add cliparts and create categories.
4. Create a product for personalization.
In the CS-Cart administration panel, go to Products → Products. Click the Add product button.
5. Complete the necessary fields. Enter a product name, price, description, choose the category for this product (create a category first if you don't have any). Upload the main image for your product (for example a nice greeting card template).
Important! Scroll down the page for the Extra section and set a value for the Product details layout field - "Product designer template".
6. Press the Create button.
7. On a product editing page click the Images tab and upload additional images where customer will be able to add their design.
In our example we've uploaded an image of the outside spread of a greeting card and an image of the inside spread.
8. Press the Save button and on the editing product page go to the Product designer tab.
9. Tick the Enable for this product checkbox.
10. You will see a page with the Product designer settings and tools.
11. You need to set the necessary settings.
- Click the Settings button and choose the Fixed objects mode.
- Calculate the Ratio.
- Specify the dimensions for the Product area - product side width and height parameters in pixels.
- The best layout orientation for a greeting card is Horizontal (layout orientation works for the customer area, not for the admin area).
- Style of the typing text - Word wrap (more convenient).
- Enable necessary product designer tools. If you tick the Allow change font in "Fixed objects" mode checkbox, customers will be able to change the text font.
See below how the settings for our greeting card look like:
12. Add product sides and add a canvas to every product side.
- Add product sides by clicking the Add product side button. Enter a name for every product side if necessary.
- Add a canvas to every side by clicking the Add canvas button. After clicking the Add canvas button, click Add basic canvas and a rectangular frame will appear. You can scale this frame to reach the desired shape for a canvas (in our example a canvas covers the whole greeting card printable area).
13. Use the Product designer tools panel to choose the necessary font category and a color palette for fonts.
14. Specify fixed areas for custom text and photos.
- In order to set a fixed text position, enter some text in the text field on a product designer tools panel and press the Add custom text button. Move a text frame to the necessary place.
- In order to set up a fixed photo position, click the Photo area tab -> Add photo area button. Move the photo frame to the necessary place.
You can use the rectangular frame which will appear around your text to "remove", "scale", "rotate", "move" text and "change the text field width" (for the "Word wrap" option). With enabled the "Fit to width" option, it's possible to use "remove", "scale", "rotate" and "move" text elements.
Note! In order to let your customers type in long text lines, use the Length parameter on Product designer tools panel.
You can scale, remove, move and rotate a photo frame.
15. Click a small preview image of the second side of a greeting card (Inside spread) and add text and photo areas in there:
16. Press the Save button to save all changes.
17.Click the Preview button in the top right corner of the Product designer tab page to preview a product in the customer area. You can also test all text and photo fields in the customer area and change settings, positions or text color in the admin area if necessary.
18.That's it, you've created a product for personalization.
Product designer storefront for customers
In the storefront customers will be able to find a product for personalization in the assigned category.
By clicking on a product in the catalog, customers will be redirected to the page where they can create their own design.
Customers will be able to add text and photos to the areas specified by an administrator. Also, customers will be allowed to change text font as permitted by an administrator.
See an example design any customer can create:
Outside spread of a greeting card
- To add text, a customer needs to click on a necessary text area and then type in his own text into a field located on tools panel.
- To add a photo to the product, a customer needs to upload the necessary photo. Click a photo frame on a product and then click the uploaded photo to add it to the product.
- It's possible to edit an uploaded photo to make it fit into a photo frame and delete it.
Inside spread of a greeting card
Note! Encourage your customers to use only high-quality photos with good resolution. If a customer uploads a photo with low resolution, it will be impossible to get a quality print. (Or you will have to edit the photo yourself in a photo editor).
How to get a printable image
1. An ordered product appears in the administration panel Orders-> View orders. Click View next to the order to be redirected to the order details page.
2. Click the Product designer tab on the order details page and you will see the description of all design elements, the image/images of the ordered product and buttons to generate .png and . pdf images and a settings button.
3. Click the settings button and tick the Include product side image checkbox as well as the Transparent background (not used for PDF) checkbox.
3. Press Generate print image to get a .png image or Generate PDF to get a .pdf image (for .pdf it is necessary to choose a white background color). The generated image will contain both the product side image and the design elements. Save the image to your computer.
How to print a greeting card
It's easy to print greeting cards at home. You need a computer, colorful inkjet or laser printer, thick card stock of the necessary size. You can buy pre-scored card stock to make things much easier.
Don't forget to prepare a nice envelope for a personalized greeting card and handle the delivery.
We've demonstrated how the Product designer Fixed objects mode works for a greeting card.
This mode works for other products where you would like to specify fixed text or image positions - bags, mugs, postcards, calendars, invitations, etc.
It is also possible to create a greeting card for personalization using the T-shirt mode of the Product designer. In this case customers will be able to choose positions of text and photos, add cliparts, change size and color of the elements.
No posts found