Current version:


This plugin is available for Shopware 6
Expected release: Nov 2020
This manufacturer responds very quickly to support requests
Plugin details
  • bogx345982464735
  • Borucinski Grafix
  • 3.2.1
  • 28 Sep 2020
  • de_DE en_GB
  • 5.4.0 – 5.4.6
    5.5.0 – 5.5.10
    5.6.0 – 5.6.8
This plugin is an addon (extension module) to our product configurator. "Designer" extends the... more

Product information

This plugin is an addon (extension module) to our product configurator. "Designer" extends the configurator by design and visualization of products such as print, plot or engraving articles. The design is specially tailored to the needs of the product configurator (practice-oriented) and bound to the specifications of the shop operator (per product), so that the customer can only design and order the print or engraving within a specified framework. The specifications e.g. for the printable surface size, the edge distance, the colours or the fonts and graphics are necessary in order to fulfil the manufacturing conditions depending on the product.

So that the customer can see the result of his design immediately, his details are displayed in "real-time". The display can then be used later as a printable "job" document in 300 dpi resolution or in a scalable vector (SVG) format.

The Configurator Designer does not claim to replace a conventional layout or graphics application. However, it helps the shop admin to adapt his products better to the customer's needs or to personalise them more strongly, e.g. in the form of an additional sticker, label, print, plot, patch, own label, dedication or a individual motif, etc. 

The following functions and properties are available in the Designer (as special configurator enhancements):


1. Designer defaults (initial values) per article (saved as article attributes) for

  • Design area (canvas): positioning and styling specifications
  • Graphic symbol (SVG/PNG graphic) Styling specifications
  • Text styling defaults for simple fixed-width labeling
  • Parametrix connection to designer to determine any design area size (e.g. sticker/label size) and calculate its price
  • Textbox styling defaults for variable labeling with flexible width and height

2. Available Designer data types for configuration options


  • designer-font: "Fontpicker" with list of fonts or WOFF files/web fonts,
  • designer-font_size: select list of font sizes,
  • designer-font_color: galery list of colors in RGB or WEB (Hex) color schema


  • designer-shape: motive file list der Motiv-Dateien in SVG oder PNG Format,
  • designer-shape_color: galery list of colors in RGB- or WEB color schema,
  • designer-shape_flipx: radio button switcher for activate/deactivate of horizontal inversion,
  • designer-shape_flipy: radio button switcher for activate/deactivate of vertical inversion


  • designer-text: input field for simple text with fixed width and with bounding,
  • designer-textbox: input field for flexible text with variable width and with bounding,
  • designer-textboxsvg: input field for flexible vector format (SVG text) with variable width without bounding


  • designer-background: galery list of colors or bitmaps: patterns, motives


  • all "Designer" inputs are dynamically displayed and saved in the design area (canvas)
  • the design area can be placed above/below or instead of the product image
  • the design surface is "sticky", stops while scrolling so that it always remains in the field of view
  • the design area is Responsive, is scaled to the available area (with adherence to the defined proportions)
  • the design area is exported into the order (as a product image) so that it remains visible to the customer during checkout


  • transfer of designer configuration to shopware order, order confirmation, documents, order history
  • extension of the document template ("Out-Of-The-Box" - no special adaptation necessary)
  • extension of the sOrder template ("Out-Of-The-Box" - no special adjustment necessary)
  • display of designer data per order item in separate tab "Bogx Configurator"
  • the design area image can be viewed and downloaded in the "Bogx Configurator" tab. Click on the image downloads the file to your pc.

Relevant plugins:

  1. Produkt Konfigurator
  2. Parametrix

Demos (6 demo configurations):
All Designer demos to see here

Read, write and discuss reviews... more

Customer reviews

Average customer rating from 2 reviews:


Unglaublich gutes Plugin, absolut zu empfehlen!

21 Aug 2020

Eigentlich wollte ich nur den Konfigurator haben, aber als ich mir dann testweise den Designer auch noch installiert hatte gab es kein zurück mehr. Das Plugin rundet den Konfigurator exzellent ab, denn man kann dem Kunden dadurch eine Live-Vorschau der von ihm getätigten Konfigurationen anbieten. Und ich denke heutzutage erwarten viele Kunden genau dieses. Der Designer ist ein Top-Plugin und jeden Cent wert. Die vielen Möglichkeiten werden sehr detailliert im Handbuch beschrieben und falls man mal nicht weiterkommt - der Support antwortet sehr schnell und kompetent. Man merkt, dass da sehr viel Herzblut, Wissen und Leidenschaft drinsteckt. So macht es dem Online-Händler auch riesigen Spaß, neue Produkte zu kreieren und ich bin fast traurig, dass meine Produkte nun stehen...


Super plugin mit excellentemSUPPORT

8 Apr 2019


Installation manual


First install our plugin "Bogx Product Configurator". Without the "Product Configurator" the addon "Bogx Designer" cannot be installed.

For a better introduction to the "Designer" please import the DEMO-configurations. We have defined 6 different demos for the designer with all essential features as examples - these demos can also be seen in the upper picture slider or in our DEMO shop.


Designer expands the article attributes and the "Product Configurator Manager" with some "Designer" attributes and data types

Backend - article details:

The new item attributes for designers can only be seen and managed under the "Bogx Configurator" tab of the "Item Details" backend window for a better overview. The new fields are provided with help texts. In the slideshow you will find the corresponding screens with additional information.

Fontpicker - add your own fonts, you will find a description in the following PDF document:


Version 3.2.1

SVG export optimization.

Version 3.2.0


1. The new feature "Clipping" with the following options:

 - definition of ClipPath masks

 - ClipPath masks are closed printable/designable areas in SVG format

 - multiple ClipPath masks as simple (rectangle, circle) or completely individual shapes/paths

 - any assignment of ClipPath masks to the design area and/or motifs and/or texts

 - masks can also be used to limit the printable/shapable area

 - outside the masks, the assigned objects are not visible 

 - non-printable area (outside the mask) can be hidden completely or partially (with opacity)

2. Update of the canvas framework (fabric.js) to the current version 4.1.0

3. Designer area resizing optimized.

4. Optimized empty text presets. 

5. Font size of manually scaled texts is dynamically transferred to configuration data


Please reinstall the plugin in the Plugin Manager (click 1x "reinstall" button), your data will NOT be lost. 

Version 3.1.4

Small template adjustments for the new function "ORDER CODE BUILDER".

Version 3.1.3

Optimization of borderless lettering.

Version 3.1.2

Small adjustment in the rendering of the design area. In case the text input and text colors (in the lettering) are not immediately visible.

Version 3.1.1

1. New feature "Motif Grouping"

- new default settings and parameters for motifs: "mode" and "grouplist 

-- "mode": "group"

-- "grouplist":["o_motif1", "o_motif2", "o_motif3", ...]

The "grouping" allows a larger selection of thematically divided motifs. If motifs have to be grouped together for better

overview thematically (defined in separate option groups), it was previously possible to create a click on a theme/option group

and insert it into the design area. The motifs in the design area were not exchanged but newly inserted and so it was possible

to insert several motifs in the design area, which were not desired, since there should be only one motif. The grouping now

connects arbitrary motif themes/option groups and it only one motif from the whole group (from several themes) can be inserted

into the design area at a time. 

2. Improving the dependency in groups and option groups of the Designer.

3. Optimization for loading SVG motifs

Version 3.1.0

1. Adaptation of the round texts to the updated canvas framework.

2. Adaptation of the texts with "MaxWidth" default to the updated canvas framework.

Version 3.0.9

1. Update of the canvas framework to current version 3.6.3

2. Optimization of the logic for round texts.

3. Optimization of the logic for multi-line texts.

Version 3.0.8

New data types "text_date" (date) and "text_time" (time)

- Validation of date and time entries via the intuitive/modern HTML5 standard 

- Insert into the design area as text lines, analogous handling as for "font_text

Version 3.0.7

Default parameter zindex for motifs and upload images modified and further extended:

"zindex": "back" (set it to the back)

"zindex": "front" (set to the front) 

"zindex": "backward" (move backward behind the first found image)

"zindex": "forward" (move forward of the first found image)

Version 3.0.6

The default parameter "zindex" for motifs and upload files extended to better control the order of the motif and upload files in the design area.

- "zindex":"backward" (set to the back)

- "zindex":"forward" (put forward)

Version 3.0.5

1. The property "fontSize" is now also assigned to the text elements individually (in addition to the already existing "fontFamily" and "fontColor")

2. New default parameter "zindex" for motifs has been implemented to better control the order of the motif layers in the design area.

Version 3.0.4

Visibility change of the motifs has been improved. 

Version 3.0.3

1. Fixed an error with motifs without default to the file name

2. Fixed an error when selecting backgrounds.

Version 3.0.2

Improved internal multi-layer placement for shape images.

Version 3.0.1

Optimizing the allowed width of text lines with the JSON parameter "maxWidth". This parameter does not make the text line wider and, if necessary, automatically reduces the text height so that the extra-long text also fits into the available width.

Version 3.0.0

Major update with essential extension of the functionality for product personalization and visualization.

1. Texts

- Several normal text lines, and/or several rounded texts and/or several text boxes 

- Extended default parameters per line/text type

- Required lines or optional lines can be defined

- Dynamical assignment of text properties (font, color, font size) per line

- Texts in the design area can be edited (move, rotate, scale), depending on the defined "controls" (parameter settings) 

2. Motifs (images or shapes)

- Several motifs: Images (.png and .jpg) and/or shapes (.svg)

- Extended default parameter per motif group

- Motifs in the design area can be edited (move, rotate, scale), depending on the defined "controls" (parameter settings) 

- Motifs can be easily deleted (click the selected image in the selection again - similar to a checkbox) 

- If a motif selection is defined as required, the product cannot be ordered if a motif is not inserted in the canvas

3. Default setting for displaying the personalized designer image in the shopping cart: original product image or designer image

4. A new (german) manual for designers will be released soon, all updated examples in the DEMO Shop, for example here:

NOTE: If you are using an older Designer version, we strongly recommend that you first update in the test environment

to be carried out! There may be inconsistencies in the designer defaults, as these have been essentially extended.

Example for the new text defaults:

For one line of text:

{"o_text1":{"content":"SUPREME", "fontFamily":"roboto-bold-italic", "fontFamilyName":"Roboto BOLD ITALIC", "fontFile":"roboto-bold-italic.woff", "fontSize":50, "fontColor":"rgb(255,33,0)", "fontColorName":"08 - hellrot", "center":true, "left":0, "top":0, "margin-top":90, "margin-left":0, "angle":0, "maxWidth":500, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":true, "lockUniScaling":true}}

For three text lines:

{"o_text1":{"content":"SUPREME", "fontFamily":"roboto-bold-italic", "fontFamilyName":"Roboto BOLD ITALIC", "fontFile":"roboto-bold-italic.woff", "fontSize":50, "fontColor":"rgb(255,33,0)", "fontColorName":"08 - hellrot", "center":true, "left":0, "top":0, "margin-top":90, "margin-left":0, "angle":0, "maxWidth":500, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":true, "lockUniScaling":true}, "o_text2":{"content":"different line", "fontFamily":"opensans-regular", "fontFamilyName":"Open Sans REGULAR", "fontFile":"opensans-regular.woff", "fontSize":30, "fontColor":"rgb(0,0,0)", "fontColorName":"02 - schwarz", "center":true, "left":0, "top":0, "margin-top":130, "margin-left":0, "angle":0, "maxWidth":500, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":true, "lockUniScaling":true}, "o_text3":{"content":"Great Font", "fontFamily":"greatfont-regular", "fontFamilyName":"Great Font Regular", "fontFile":"greatfont-regular.woff", "fontSize":130, "fontColor":"rgb(0,0,0)", "fontColorName":"02 - schwarz", "center":true, "left":0, "top":0, "margin-top":250, "margin-left":0, "angle":0, "maxWidth":500, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":true, "lockUniScaling":true}}


For one motif/picture:

{"o_motivs":{"mode":"select", "src":"car01_640.jpg", "width":0, "height":290, "left":0, "top":0, "margin-left":0, "margin-top":-100, "angle":0, "center":true, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":false, "lockUniScaling":true, "minScale":0, "maxScale":0, "flipx":"0", "flipy":"0", "color":"", "colorName":""}}

Version 2.2.1

Small modifications for the new configurator API

Version 2.2.0

  1. Improved overview of the Designer defaults. Preparation for extending the functionality of: lettering and images.

  2. New default field "upload images" In this field you can enter defaults for the new function "multiupload images".

    Example for the defaults (json format):
    {"o_upload":{"height":290, "left":287, "top":630, "angle":0, "hasControls":true, "hasBorders":true, "hasRotatingPoint":false, "lockMovementX":true, "lockMovementY":false, "lockRotation":false, "minScale":0.5, "maxScale":1}}


    • "o_upload" = Option group ID with the new datatype "multiupload-designer" - here the addon "Multiupload" is required.

    • "height" = height of the upload image in pixels to which the image will be scaled/reduced in the design area.
    • "width" = can be used instead of "height. In this case the image will be scaled/reduced to the specified width (in pixels) in the design area.
      ATTENTION: Please use either "height" or "width" - the use of both parameters does not fulfill the expected purpose, because always set to the first and then is scaled to the other value.

    • "left" = distance of the left edge of the image from the left edge of the designer area. Numerical value in pixels.

    • "top" = Distance of the top edge of the image from the top edge of the designer area. Numerical value in pixels.

    • "angle" = Rotation or rotation angle of the image when inserted into the design area. Numerical value in degrees.

    • "hasControls" = true/false, activation and visibility of the editing handles (controls) at the corners of the inserted image.
      ATTENTION: the "controls" only appear when the image is clicked in the design area. Only when "controls" are activated is it possible to edit the inserted image. 

    • "hasBorders" = true/false, visibility of the picture frame (boundary). Helpful for png images with transparency.

    • "hasRotatingPoint = true/false, visibility of the angle controls positioned above and centered on the image. Useful if you also want to use the Rotate of the inserted image.

    • "lockMovementX" = true/false, Allows or blocks horizontal movement of the inserted image.

    • "lockMovementY" = true/false, Allows or blocks vertical movement of the inserted image.

    • "lockRotation = true/false, Allows or blocks rotation of the inserted image.

    • "minScale" = 0.5, allows the scaling (in this case reduction) of the inserted image up to the specified scaling factor. Should always be less than 1 and greater than 0.
    • "maxScale" = 1, allows scaling (here enlarging) of the inserted image up to the specified scaling factor. Should always be greater than or equal to 1.
      NOTE: If you do not want to allow scaling, you can do without both parameters.

  3. New datatype "multiupload-designer" - here the addon "Multiupload" is required

    Example for the data record:
    upload;upload;Upload files;10;1;;;

  4. Save the used upload images in a separate folder on the server:

    /files/bogx_product_configurator/designer/ and then in subfolders named with the current date. However, it is not necessary to download the upload images there - see point 5.

  5. The upload images will be attached to the order of the configuration product and can be easily downloaded under the tab "Bogx Configurator" by clicking on the download link for production or documentation.

    DEMO for upload images:

Version 2.1.9

Small adjustments in designer templates in connection with the optimized template concept

Version 2.1.8

Small template corrections:

- correct display of group captions

Version 2.1.6

Implementation of the current guidelines in plugin.xml for base plugin and dependent addons.

Version 2.1.5

New data type "curved_text" implemented.

The following JSON can be used as default  ("Designer-Defaults" > Text JSON-Style):

{"height":50, "center":true, "margin-top":-150, "radius":250, "space":5}

radius = radius [in pixels] of the circle to which the text is aligned. 

space = distances [in pixels] between the letters of the curved text.

We have used these defaults in the new demo:

IMPORTANT: After the update please reinstall the plugin  (1x click button "Reinstall") - don't worry, the existing data will not be deleted.

Version 2.1.4

Tooltips refactoring - now also work in dependencies.

Version 2.1.3

Styling optimization of all input and select fields - also for mobile devices.

Version 2.1.2

Font size made independent of image scaling.

Version 2.1.1

The data type for font size "designer-font_size" has been fixed. The font sizes in the designer texts can now be changed by the user - as intended by the shop administrator.

Version 2.1.0

Calculation formula value=0 has been implemented - see also changelog for product configurator update 4.2.2

Version 2.0.0

Consideration of the new "calculation formula" .

Version 1.9.0

Improved usability for Designer default-data in the article overview (in the backend).

Version 1.8.0

The SVG images (data type "designer_shape") can be completely colored with the data type "designer-shape_color".

Version 1.7.0

1. Improving the compatibility of "canvas" with variants.

2. Text objects are always inserted in the canvas at the top level and are not obscured by images.

3. Improvement of the initial loading of fonts (font-family observer).

Version 1.6.0

Fixed of the issue with "sticky-canvas" on smartphone devices.

Version 1.5.0

Font specification in the data type "designer-textbox" is adopted during initialization.

Version 1.4.0

The text borders ("boundings") are no longer displayed in the design area when clicked on.

Version 1.3.0

1. Consideration of the new functionality "delivery time". 2. Improved "Sticky" function for design area (canvas) + price calculation box.

Version 1.2.0

New data type "background_color" for coloring background images in the PNG file format. For coloring there are two color filters "tint" and "multiply" available. For PNG images with transparency and without material structure (for example various stickers or labels) we recommend "tint" (uniform coloring). If the image should keep the material structure and shades, we recommend the filter "multiply". 
IMPORTANTAfter the update please re-install the plugin - do not worry, the existing data will not be deleted.

Version 1.1.0

1. The configured (personalized) customer images are no longer stored as BLOB but as files on the server. As a result, customer images can be any size and any quality losses (which could occur during BLOB generation) were excluded.
2. Completion of CSS / JSON Designer Defaults.
3. New data type "shape_img" for PNG / JPG file formats. This allows any motifs to be inserted into the design surface (canvas). 4. The above enhancements allow you to implement a simple "T-Shirt Designer" (or other textiles or printable items), see example in the demo shop:

IMPORTANTAfter the update please re-install the plugin - do not worry, the existing data will not be deleted.

Version 1.0.4

Advanced settings for designer-text: "margin-left" and "margin-top". This allows any positioning of the text on the background (on cards, patches, stickers or on any giveaways).

Version 1.0.3

Fixing of color change in SVG fonts.

Version 1.0.2

Adaptation of Javascript syntax to Safari for Mobile because unfortunately, iPhones and iPads are not compatible with the current ECMAScript 6 syntax

Version 1.0.1

New plugin ZIP file for the first release

Version 1.0.0

First Release: Addon Designer 1.0.0

About the manufacturer

Borucinski Grafix Borucinski Grafix 12 Extensions 5 Ø Rating
Current version:


Recently viewed