How can I make the hover panel(for CSWP 2013) allow for displayed properties to be selected from web part options like an item display template

Question

In an item display template you are give a lookup/dropdown list for properties to display from the content search web part. I want to understand how these are properly encoded and displayed using javascript.

To display a managed property using an existing item display template as a customization you add it to the managed properties xml line at the top of the hoverpanel and item display templates. The below example is not syntactically correct but illustrates what I want to add correctly.

<mso:ManagedPropertyMapping msdt:dt="string">Path/Link/Title/Etc.,'Hover 1'{Hover 1}:'SizeOWSTEXT','Hover 2'{Hover 2}:'LengthOWSTEXT'</mso:ManagedPropertyMapping>

So this will add two properties, Hover 1 and Hover 2, that are by default SizeOWSTEXT and LengthOWSTEXT. But I want my user to be able to change these, or for myself to not need multiple hover panels in order to customize it for specific pages of the product catalog I am making.

Then The javascript does some stuff I kind of understand but want to translate into my hover panel. I am able to add extra properties by copying what is below and modifying it. I cannot use what is below to enable customization from the web part to the hover panel by adding my custom version for hover 1 and hover 2 to either the item display template or the hover panel file.

This is from the item display template html file

var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);

var line1 = $getItemValue(ctx, "Line 1");
line1.overrideValueRenderer($contentLineText);

This won't work when I plug in the Hover 1 or Hover 2, how can I achieve that for the hover display?

This is in the hover panel html file.

var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_picture4Lines_");
var hover1 = $getItemValue(ctx, "Hover 1");
hover1.overrideValueRenderer($contentLineText); 
var hover1Id = encodedId + "hover1";

And this is the actual display on the hover panel

<!--#_
if(!hover1.isEmpty)
{
_#-->
     <div class="ms-noWrap" id="_#= hover1Id =#_" title="_#= $htmlEncode(hover1.defaultValueRenderer(hover1)) =#_">_#= hover1 =#_</div>
<!--#_
}
_#-->

and lastly, this showed me how to even add the custom managed properties at all. But not how to make them modifiable from https://technet.microsoft.com/en-us/library/dn794247.aspx