Para começar, precisamos da biblioteca jQuery. Então, acrescente o código abaixo no topo da página (BarraTopo.htm):

<script type="text/javascript" src="https://www.dotstore.com.br/dotstore/inc/extras/jquery.min.js"></script>

E, na página (ProdutoDetalhes.htm), inclua o script abaixo, para anexar a função das abas à div:

<script>
$(document).ready(function() {
	$("#DS_ConteudoAba > div").hide();
	$("#DS_ConteudoAba > div:eq(0)").show();
	$("#DS_Aba>a:eq(0)").css("color", "#ffffff");
	$("#DS_Aba > a:eq(0)").css("height", "35px");
});

functionopentab(num) {
	$("#DS_ConteudoAba > div").hide();
	$("#DS_ConteudoAba > div:eq(" + (num-1) + ")").fadeIn();
	$("#DS_Aba > a").css("background", "#eeeeee");
	$("#DS_Aba > a").css("color", "#b5b5b5");
	$("#DS_Aba > a:eq(" + (num-1) + ")").css("color", "#ffffff");
	$("#DS_Aba > a:eq(" + (num-1) + ")").css("height", "35px");
}
</script>

Agora, é preciso incluir o seguinte código HTML na página (ProdutoDetalhes.htm), onde deseja exibir as informações adicionais de seu produto:

<div id="DS_AbaGeral">

<div id="DS_Aba">
<script>
var VStr = "##DescricaoLonga##"
var vcounttab = 0
if(VStr != ""){vcounttab=vcounttab+1;document.write("<a href='javascript:void(0)' onclick='opentab("+vcounttab+");'>Descri&ccedil;&atilde;o</a>")};
var VStr = "##Especificacao##"
if(VStr != ""){vcounttab=vcounttab+1;document.write("<a href='javascript:void(0)' onclick='opentab("+vcounttab+");'>Especifica&ccedil;&otilde;es</a>")};
var VStr = "##DadoTecnico##"
if(VStr != ""){vcounttab=vcounttab+1;document.write("<a href='javascript:void(0)' onclick='opentab("+vcounttab+");'>Dados t&eacute;cnicos</a>")};
var VStr = "##TXTPrazoEntrega##"
if(VStr != ""){vcounttab=vcounttab+1;document.write("<a href='javascript:void(0)' onclick='opentab("+vcounttab+");'>Prazo de entrega</a>")};
var VStr = "##ComentarioAvaliacao##"
if(VStr != ""){vcounttab=vcounttab+1;document.write("<a href='javascript:void(0)' onclick='opentab("+vcounttab+");'>Coment&aacute;rios</a>")};
</script>
</div>

<div id="DS_ConteudoAba">
<script>
var VStr = "##DescricaoLonga##"
if(VStr != ""){document.write("<div> ##DescricaoLonga## </div>")};
var VStr = "##Especificacao##"
if(VStr != ""){document.write("<div> ##Especificacao## </div>")};
var VStr = "##DadoTecnico##"
if(VStr != ""){document.write("<div> ##DadoTecnico## </div>")};
var VStr = "##TXTPrazoEntrega##"
if(VStr != ""){document.write("<div> ##TXTPrazoEntrega## </div>")};
var VStr = "##ComentarioAvaliacao##"
if(VStr != ""){document.write("<div> ##ComentarioAvaliacao## </div>")};
</script>
</div>

</div>

Repare que na div DS_Aba estão os títulos das abas; na div DS_ConteudoAba, estão as TAGs especiais, onde serão exibidos os dados no painel de controle do produto cadastrado.

E, para finalizar, será necessário incluir o código CSS abaixo no arquivo (EstiloLoja.css) e estilizar de acordo com o layout de sua loja:

#DS_Aba{background:#eeeeee; height:35px; overflow:hidden;} 
#DS_Aba a{color:#b5b5b5; font-weight:bold; display:block; float:left; font-size:14px; text-decoration:none; height:23px; padding:8px 15px; border-bottom:none;} 
#DS_ConteudoAba{border:1px solid #eeeeee; border-top:none; padding:10px; font-size:12px; text-align:left; color:#666666;}

Por fim, salve os arquivos HTM com os scripts do plugin e da biblioteca jQuery.

Até a próxima!