Cloud / Self-hosted
This extension/theme cannot be used in a Shopware Cloud shop. Cloud Self-hosted
This plugin is available for Shopware 5
- Support by: KILB Software Development
- Support languages:
- Order number: Kilb647502658205
- Manufacturer: KILB Software Development
- Version: 1.8.6
- Last update: 6 Feb 2021
- Language support:
- Self-hosted compatibility: 6.0.06.1.0 – 126.96.36.199.0 – 188.8.131.52.0.0 – 184.108.40.206.3.1.0 – 220.127.116.11.3.2.0 – 18.104.22.168.3.3.0 – 22.214.171.124.3.4.0 – 126.96.36.199.3.5.0 – 188.8.131.52
The KILB Product Designer gives your customers the opportunity, to create their own design for prodcuts like shirts, posters, banners, cups etc.
Before the product is added to cart, the customer can create an unique design. He is able to upload own images, create texts with several fonts, add QR codes or choose between a set of images you have predefined.
After the customer has added the product into the cart he already can see a preview image of the final product. When he completes his order, the plugin will automatically send the design as an PNG image via E-Mail.
When we developed this plugin we had focus on:
Customizability: Nearly everything (image solution, image size, print size, font size and much much more) can be configured by you. You can create as much configurations as you like - even a single article can have several configurations if you like. Your product has a front and back side - but the back side has a smaller area and the maximum font size should not exceed 30? No problem! If you are able to code, this plugin can be the perfect fundament for your own, unique product designer. You can manipulate nearly everything via CSS, JS and PHP!
Compatibility: The plugin is integrated into Shopware as much as needed. But it touches not a single line more of Shopware code than necessary. This will dramatically decrease conflicts with other plugins.
Responsiveness: No matter if you use the plugin on your phone, tablet or desktop. It will work always the same way. It's completely responsive.
GDPR compliant: The designer doesn't embed external resourced like Google Fonts nor any tracking scripts. You customer's privacy will be kept.
- Product designs for each article and variant possible
- SVG support for image uploads and design exports
- Predefined product designs possible
- Simple and clear backend part
❓For further information please have a look into the documentation:
Step 1 - Install plugin & get API key
After you purchased a license of the plugin from the Shopware store you can install the plugin in the backend area of your shop under Settings > System > Plugins. Make sure the plugin is not only installed but also activated. After you have activated the plugin click the icon with the three dots and click "Configuration". Here you will find the API key for the next steps.
If there's not link "Configuration" make sure you successfully activated the plugin and reload the backend page via F5.
Step 2 - Assign configuration
After the installation of the plugin you will find a new navigation entry Catalog -> Product Designer in the backend menu. If the entry doesn't appear please reload the backend via F5.
The first time you open the backend of the product designer you will be asked for the API key. Enter it to log in. After the login you will see the table of already ordered designs. This will be empty of course as no article with custom design was ordered yet.
Now click on the tab "Configurations". As you can see there's already a configuration present. This is an example configuration you already can work with. Open the configuration settings by clicking the icon with the three dots. Please add the article number (not: article id!) of the article you like to have designed to that configuration.
Save the configuration and - for production environments - clear the Shopware cache. You can clear the cache by removing all the directories starting with prod* in /shopware-installation-dir/var/cache/...
If you open the product detail page for that article now it's not possible to directly click the "add to cart" button anymore. Instead you first need to specify some product design. To test the implementation of the product design please create a new order with that article and any product design.
Step 3 - Generate image
During the order process the product designer plugin will only store meta information for the customized designs. Also some small preview image for the basket will be generated. As the rendering of the high resolution graphic can be slow and expensive it will not be done in the browser of your customers nor your shop server. Instead you will need to do that on your locale machine, in your browser.
Log in to the product designer backend again. Under "Ordered Designs" you will now find a new entry. Click the icon with the three dots to get more information about the design. You will be able to download an SVG or a serialized JSON export here. To generate a high resolution WebP you need to click the "Generate" button.
The rendering duration will take some seconds. After it has been finished you will see a small preview image. If you click it, it will automatically be downloaded.
If you have issues generating the image please use Google Chrome browser.
Step 4 - Add clip arts
Your customers will be able to upload their own graphics to add them into their product design. Also you can provide them a set of predefined clip arts to choose from. For this please log in into the Shopware backend and go to Content > Media.
You will find three directories added by the product designer plugin here:
- Product Designer - Uploads: These are images your customers uploaded from their local machine. The images are stored here so users will be able to change their created designs later on. Also they are needed to execute the rendering process. Don't delete or touch the files in here.
- Product Designer - Basket Images: This folder will contain the thumbnail images customers can see in their basket after they have added an article with a product design. You should not touch nor deleted files in here, too.
- Product Designer - Clip Arts: You can upload into this folder the clip arts you like your customers to choose from. If you like to group multiple clip arts into several categories you can create sub directories here. For each clip art you can define a title that will be presented near the image in the frontend.
Step 5 - Read documentation
For further help please have a look into the documentation:
- After applying a design the text of the button "Create design" will be changed to "Update design"
- Added some more translations
- Integration of KILB Rendering Service: This soon to be available plugin will automatically generate designs. You can choose between 6 different file formats.
- If an image can not be loaded from a different domain (i.e. because of missing CORS headers) the plugin will now try to load the file from the current domain.
- Add a link to documentation in backend
- Temporary designs that were not applied yet will also be saved.
- Paypal express checkout button will be disabled, too, if no design applied yet.
- Bug fix: Multi language shops with language flag in URL will be supported, too
- New feature: With a "sort index" configurations can be sorted in the backend and - if you assign multiple configurations to a single article - in the frontend, too.
- Performance optimizations in backend if you have a huge list of configurations
- Bug fix: Sometimes basket preview image has not been rendered correctly on mobile apple devices.
- Uploading an SVG will make the quality indicator disappear.
- When a clip art will be placed on the design it will be scaled to "good image quality".
- New feature: An image quality indicator shows the customer what quality the image he placed has.
- The maximum length of QR code text was reduced to 100. More text would generate bigger QR codes that are hard to scan.
- Stored designs are limited to 9 now. Additionally they will be compressed before saving. This will fix some issues with browsers which limit the locale storage a lot (like Safari or mobile devices)
- The text size of some input fields got slightly increased so there will happen no unwanted zooming on iOS devices.
- The size of the basket preview image can now be adjusted for each configuration.
- If you edit a color field of a backend configuration you can now use a color picker.
- The transparency which is hiding the background image and elements outside of the canvas can now be adjusted.
- On the product detail page not all configurations will be loaded from backend anymore. Only those who are really needed for that article. This will improve performance if you have a lot of configurations in your system.
- Previously created designs can now be applied & reused again.
- The navigation entry "Product Designer" is now a sub entry of "Catalog"
- A lot of small bug fixes
An issue with resolving wild card article numbers was fixed.
- New feature: Upload your own fonts. Please read the FAQ section regarding fonts before using this feature.
- Bug fix: Clicking outside of the canvas did not unselect the currently active element all the time.
- Bug fix: Article numbers containing only digits will work now.
- New feature: The zoom functionality - your customers are now able to zoom the canvas. So they are able to place their elements more easily.
- New feature: You are now able to use wildcards (*) for configuration articles numbers.
- Breaking change: Scaling is reimplemented. Background image and canvas will now be sized as big as possible to fit in the browser window. It's important the background image is placed on the same domain like the shop (or: CORS headers correctly set).
- Bug fix: Safari bottom bar will not hide parts of designer content anymore.
- Performance fix: Canvas will only be rendered now if it's really necessary.
- Improved support of SVG graphics
- You are now able to define a "price per design" that will be added to the base product price if the customer placed at least 1 element.
- Performance improvements when switching between configurations in Frontend
- Improvements of design of elements placed outside of drawing area
- Bug fix: Drawing area will now be calculated correctly again when switching between configurations
Backend icons will show up again now
- If you click on a blank area the focus of current canvas element will be removed
- Additional pricing now also works for curved text
- Breaking Change: Elements are now visible, movable and changeable even if they are not inside the canvas. This will increase user experience
- Breaking Change: Customers can't set text bold or italic if the font doesn't support it anymore.
- New fonts added.
- Bug fix: Placement of initial elements for multiple configurations per article fixed.
Our biggest update so far!
- Performance optimizations for product listings if you've created a lot of product designer configurations
- Improvement of usability on mobile devices
- Letter spacing can now be changed on text elements
- Text elements can now be curved
- Bug fix: Drag & Drop inside the image upload layer will work now
- Bug fix: If you've deleted an order in the Shopware backend product designs could not be loaded anymore. This has been fixed.
- Critical Bug fix: Products could not be loaded in the backend. Fixed.
- For even more product tiles in your shop the button "Add to basket" will be replaced with "Create design now".
- You are now able to change the color picker. You can choose between different layouts here.
- You are now able to define the colors users can choose for their text elements.
- Improving layout of clip art layer
- Improving size and rotation handles of elements placed on the canvas
- Bug fix: You can place PNG images on the canvas now again
- Exif metadata of uploaded images will be parsed now. This will support rotated and mirrored images.
- You can define your own fonts now. For this create a folder "product-designer-fonts" in Shopwares public directory & place your TTF fonts in there.
- Price information on product detail page will now contain * char to inform about including VAT
- Bug fix: A issue was solved that in rare cases large graphics were not rendered completely in the backend.
- There's a plugin icon in the admin plugin manager now
- Custom JS & CSS files won't be cached anymore
- Bug fix: If no background image URL was defined for a configuration in some cases it was not possible to open that configuration in the backend anymore.
- Bug fix: Fixed showing the grid on top of all placed elements when opening product designer modal again.
- Bug fix: Using the category dropdown in clip art layer was zooming the page on iOS.
- In each configuration you can now define a grid which will help your customers to arrange the design elements.
- Uploaded images and added clip arts will be initially set to a size where the customer can see it completely in the canvas.
- Dynamic Price Calculation: For each product design configuration you can specify an additional price amount for each clip art, image and text element that will be added to the product price.
Please mind: In some cases it's necessary to disable and enable the plugin after the version upgrade again. No data will be lost.
- The CSS style für the button design is now available for own customizations via ".btn"
- You can filter for several clip art categories in product designer configurations now.
- Layers for clip arts, QR codes etc. improved by design.
- Bug fix: HTML of frontend and backend page of product designer will not anymore cached in browser cache.
- Bugfix:Ordered product designs will still be listed now, even when a related product has been deleted.
- Bugfix: Clip arts placed in sub directories will now be grouped into categories.
- fixed an issue related to storing a custom css url
- Bugfix: The backend of the product designer now works if shop system is set to maintenance mode.
- Fixed styling issue for very large font names in the dropdown.
- Rendering a WebP image in the backend doesn't require to have the fonts used in the design installed on the local machine anymore.
- Using multiple configurations for several articles could break the designer. This issue has been fixed as well.
- Two more fonts added.
- Rotation snapping is now supported and can be configured in the backend
- Added option in configurations to enable add to basket button before a design has been created.
- Added option in configuration to force aspect ratio of text placed on canvas.
- Added option in configuration to force aspect ratio of clip arts placed on canvas.
- More fonts added
- Fonts will be shown as preview in dropdown
- Rendering can now be done in the browser without the need of the rendering software.
- The rendering output file type is webp now. This will reduce file size dramatically.
When saving a configuration a entered article number will be added automatically.
Adjustments to support Shopware 6.1
- Initial Plugin version