First of all you need to enable the Name & Number module in mainBarModules to display the module in the navigation.

var $fpd = ('#your-designer');
var pluginOpts = {
  productsJSON: 'json/designs.json',
  designsJSON: 'json/products.json',
  stageWidth: 1200, <span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>
  stageHeight: 800,
  mainBarModules: ['names-numbers', 'drawing', 'products'], //display Names & Numbers module in first position of navigation
  namesNumbersDropdown: ['S', 'M', 'L', 'XL'], //optional: define dropdown values, e.g. different sizes
  namesNumbersEntryPrice: 10 //optional, define a price for every entry 
 };
 
  var yourDesigner = new FancyProductDesigner($fpd, pluginOpts);


To enable an initial text element as placeholder for a number or name (text), you need to enable the numberPlaceholder or textPlaceholder property in the text parameters