Appending page title on detail page

Hi Drew, I've gone through the two other posts about this but still don't follow.

Current;y the detail pages has

<?php perch_pages_title(); ?>

to set the title.

  <?php
    perch_content_custom('Designs', array(
      'page' => '/fabric/plain-fabric.php',
      'template' => 'plain-fabric-detail.html',
      'filter' => 'slug',
      'match' => 'eq',
      'value' => perch_get('s'),
      'count' => 1,
    ));
    ?>

Pulls in the content and the template is…

<perch:before></perch:before>
<h1><perch:content id="design" type="smarttext" label="Design" required="true" title="true" /><a href="javascript:history.back();" class="goback"><i class="fa fa-undo"></i>Go back</a></h1>
<div class="sp-loading"><img src="/img/sp-loading2.gif" alt="Loading images" class="spinner"><p class="loading">LOADING&nbsp;IMAGES</p></div>
        <div class="sp-wrap"> 
       <div class="desc"><perch:content id="text" type="textarea" label="Description" html="true" editor="redactor" />
        <h2>Colorways</h2></div>

   <perch:repeater id="design-set" label="Sets" help="Add set images" divider-before="Images" scope-parent="true">
        <a href="<perch:content type="image" id="set_lrg" label="Set: Large" help="Size: 1300 x 1300px (@72dpi)" bucket="Sets-large"/>"><img src="<perch:content type="image" id="set_sm" label="Set: Small" help="Size: 466 x 466px (@72dpi)" bucket="Sets-small"/>" alt="<perch:content id="parent.design"/>: <perch:content type="text" id="alt" label="Colour" required="true" />" /></a></perch:repeater>
        <perch:repeater id="design-swatch" label="Swatches" help="Add design images" scope-parent="true">
        <a href="<perch:content type="image" id="swatch_lrg" label="Swatch: Large" help="Size: 1300 x 1300px (@72dpi)" bucket="Fabrics-large"/>"><img src="<perch:content type="image" id="swatch_sm" label="Swatch: Small" help="Size: 466 x 466px (@72dpi)" bucket="Fabrics-small"/>" alt="<perch:content id="parent.design"/>: <perch:content type="text" id="alt" label="Colour" required="true" />" /></a></perch:repeater>
        </div>

<h2>Specification</h2>
<div class="spec">
<div class="trow">
    <div class="tcol">Repeat:</div><div class="tcol wide"><perch:content id="spec-repeat" type="smarttext" label="Repeat" required="true" divider-before="Specification"/></div>
</div>
<div class="trow">
    <div class="tcol">Width:</div><div class="tcol wide"><perch:content id="spec-width" type="smarttext" label="Width" required="true"/></div>
    </div>
<!--<div class="trow">
    <div class="tcol">No. of colours:</div><div class="tcol"><perch:content id="spec-colours" type="smarttext" label="No. of colours" required="true"/></div>
</div> -->  
<div class="trow">
    <div class="tcol">Material:</div><div class="tcol wide"><perch:content id="spec-material" type="smarttext" label="Material" required="true" /></div>
    </div>
<div class="trow">
    <div class="tcol">Suitability:</div><div class="tcol wide"><perch:content id="spec-suitability" type="smarttext" label="Suitability" required="true" /></div>
    </div>
<div class="trow last">
    <div class="tcol">Rub test:</div><div class="tcol wide"><perch:content id="spec-rub" type="smarttext" label="Rub test" required="true" /></div>
    </div>
</div>

<perch:if exists="download-file">   
<h2>Design details</h2>
<ul><li class="download last"><a href="<perch:content type="file" id="download-file" label="Downloadable PDF" bucket="Design-info" format="MB"/>"><i class="fa fa-file-pdf-o"></i><perch:content id="download-file" format="MB"/></a></li></ul>
</perch:if>
<perch:after></perch:after>

<perch:content id="slug" for="design" type="slug" suppress="true" />
<perch:content id="list-image" type="image" label="List thumnbnail" suppress="true" />

What I like to do is have id="design" added to the page title title.

Regards - Nick