Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


How to use masking images to create cornered/circle bounding boxes


This is a post that was created 2 years ago talking about creating bounding boxes with cornered edges, and the answer was posted:

Sorry, no there is currently no way of doing that. In most cases you can use a masking image though, like in our pin demo: http://fancyproductdesigner.com/product/bagde-pin/

Can anyone explain how I can do this? Is there still a requirement to do this or is the feature added?

Thank you,



No, bounding boxes can still only be rectangles. There is one new feature called masking, which allows using a .svg file as mask for a whole view (product builder, edit mask button directly above the product preview) or the old masking image trick.

This does not explain how to do it. 

I also need to do a circle bounding box. I would gladly use the image trick, but what is this image trick

Hi radykal, 

i can not get the svg mask to work - which would be a nice feature. 
it work in the product builder, but it does nothing on the front end

maybe overwritten by some global settings? 

i used a single path solid filled circle like: 
<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->

<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

  viewBox="0 0 266 266" style="enable-background:new 0 0 266 266;" xml:space="preserve">

<style type="text/css">



<circle class="st0" cx="133" cy="133" r="132"/>


thanks a lot !

Please open a support ticket so we can have a closer look at your issue. 

Login or Signup to post a comment