Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


write here a useful snippet of code - jquery only for beginner

useful little detail in jquery

(yourDesigner = change this)

--> .js file

//text change button


    yourDesigner.setElementParameters ({text: "change text here"}, "object title here");

    return false;


--> html file:
<a href="#" id="textchange" class="fpd-btn">Change it!</a>

write here a useful snippet of code - jquery only


Vuetify + Fancy Product Designer - at once

---> .js script first

new Vue({

  el: '#app',

  vuetify: new Vuetify() });

--> html Head

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.4.3/dist/vuetify.min.css'>

---> html Body

<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>

<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>

<script src='https://cdn.jsdelivr.net/npm/vuetify@2.4.3/dist/vuetify.min.js'></script>

---> html example

<div id="app">

  <v-app id="inspire">




        color="red lighten-2"



        I'm an alert with a top border and red color





Add element
(yourDesigner and icon.png = change this)

---> .js script


    yourDesigner.addElement('image', 'icon.png', 'Image Title', {autoCenter: true, draggable: true});

    return false;


Login or Signup to post a comment