Current version:


To use the wish list, you must accept the necessary cookies. Accept cookies
Can be used in:
Not available
This extension cannot be used in a Shopware Cloud shop.
This app is available for Shopware 6
Expected release: Jun 2021
This manufacturer responds very quickly to support requests
  • bogx345982464735
  • Borucinski Grafix
  • 3.3.6
  • 31 Mar 2021
  • de_DE en_GB
  • 5.4.0 – 5.4.6
    5.5.0 – 5.5.10
    5.6.0 – 5.6.9
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.3.6

1. Developer jQuery API extended - more "publish" entry points for external jQuery modules.

2. New "$price" variable/placeholder for surcharge in Field3 (CSV record field "Title").

Version 3.3.5

The deleted upload file (if already inserted in Canvas) will also be removed in Canvas.

Version 3.3.4

Grid setting also for small displays (phones up to 400px). The grid setting applies to Images, Shapes (SVG's), Colors and (new) Backgrounds galleries and displays the selection of images (thumbnail images or color areas) evenly arranged in the configuration container. Recommended size of thumbnails (mini images) is 200-300px. Shapes (SVG's) do not have to be scaled to thumbnail size - but it would be recommended.

Version 3.3.3

1. Multiple insertion of shapes (SVG's) was fixed.

2. Scaling of texts is fixed.

Version 3.3.2

Error fixing when using shapes (images and SVG's) if no image is given.

Version 3.3.1

1. New configuration settings in option groups for grid display:

- Grid Columns

- Grid Spacing

These settings are used to improve the appearance of the following data types:

- Images

- Colors

In order not to endanger the existing optics, the defaults for grid columns and grid spacing are set in such a way that they are not taken into account. However, as soon as a number of columns greater than 1 is set for images or colors, a grid display is generated in which the images or colors are evenly distributed over the full or available container width. respectively available container width.

2. Small fixing in "textbox" handling.

Version 3.3.0

Adapting the behavior of text boxes to the proven behavior of single-line texts:

- when textbox input is cleared, the text of the textbox disappears in the price calculation and also in the design area

- Text boxes that are in dependencies now also behave correctly like single-line texts

Version 3.2.9

1. Improved behavior of upload captions linked to ClipPath.

2. New default parameter for all captions: "checkoutView": "minimal/all" (described in the manual).

3. Improvement of the initial behavior of text boxes (only in very special cases).

4. Update to the current canvas framework fabric.js (version 4.3).

Version 3.2.8

The selected object (motif, logo, text) in the designer area (canvas) is no longer brought to the front.

Version 3.2.7

Extension of the defaults and properties for texbox (datatype "designer-textbox"): 

1. Width of the textbox e.g. "width":350 (width of the textbox = 350px)

- If width is not specified, the canvas width is used instead

- Textbox width prevents entered text from wrapping at spaces

2. Size of the line spacing e.g. "lineHeight":1.2 (line spacing = text height * 1.2)

- If "lineHeight" is not specified, lineHeight=1 is used instead (= standard line spacing)

- Values smaller than 1 e.g. 0.5 reduce the line spacing

3. "ClipPath" is taken into account.

4. "zindex" is taken into account.

Version 3.2.6

Full compatibility of Javascripts with IE11 (ES5/Shopwares Grunt) fixed.

Version 3.2.5

Error while inserting background motifs was fixed.

Version 3.2.4

1. The common server directory "/files/bogx_product_configurator/common_images/".

now also works for all designer themes and background files ("shape", "shape_img" and "background"),

as main storage location or as fallback storage location. When a motif file is used as a designer default,

then you can use the additional parameter "dir": "common" to specify that this file is stored in the "common" directory

should be sought.  

2. The datatype "text_box" is now linked to a HTML object "textarea" and integrated in the designer. From now on

 multiline texts are also possible with this data type.

3. The data type "shape" (SVG graphics) with default parameter "center":true is also inserted in the center of the design area.

4. The values of the designer defaults (e.g. text defaults) are better integrated in the product configurator, so that these

are immediately displayed correctly in the price calculation. 

5. "Lazy Loading" now also works for all motif files (for all designer images). 

6. The default parameters "minScale" and "maxScale" (to limit the motif scaling) are no longer supported - please

no longer use. 

Version 3.2.3

The movement of inserted objects in the design area (canvas) is no longer limited to the canvas borders.

Version 3.2.2

1. Optimization of the tooltip icons: plain SVG is used instead of embedded SVG to reduce the loading time for extensive configurations.

2. Compatibility with Shopware's "Composer-Project" instances/installations.

3. New functionality: "Variants-Background-Changer

   - flexible and optional (in designer defaults) adjustable

   - desired article variant images can be used/activated as canvas backgrounds

   - the canvas backgrounds change automatically when changing the variant 

4. The "design area" is saved as "Canvas JSON" in the order.

   - "Canvas JSON" can be converted to any print/production format, e.g. PDF or DXF

   - it is planned to use "Canvas JSON" also for repeat orders

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 11 Extensions 5 Ø Rating
Current version:


To use the wish list, you must accept the necessary cookies. Accept cookies

Recently viewed