#
# Widgets for the Home Page of your AgoraCart store.
#
# However, due to the amazing flexibility of AgoraCart, you can create additional widgets
# and use on other pages within the main content areas (or use existing widgets too).
#
# Only unused widgets cn be customized for other pages without affecting the home page, in which
# case a custom widget and token must be created to be used for the other page. Add to a codehook
# to ensure the widget's token will be replaced (advanced feature, ask for help if unsure how to do this)
#
################################################################################
#####     BEGIN: YOUR CUSTOM WIDGETS     #####

# Add your awesome stuff in this section

#

#####      END: YOUR MISC HTML & CUSTOM WIDGETS      #####
################################################################################


################################################################################
#####      CODEHOOKS - OPTIONAL    #####
################################################################################

# Add your codehook code here for any custom widgets that need to be replaced.
# Tokens should be placed manually on any non-homepage page.
# Lines added to the codehook will replace the tokens on a page, if present.
#
# CODEHOOK Name: the_file_script_and_substitute_top -- first of 2 that you can use.
# CODEHOOK Name: the_file_script_and_substitute_middle -- use this one only if you have custom
# tokens that are nested within a widget ued in the first codehook.
#
# Lines should look like:
#  $the_file =~ s/\[\[WIDGETTOKENNAMEHERE\]\]/$sc_template_zonehome{'WIDGETNAMEHERE'}/;
#
# Make sure to use the exact case and selling for the widget name and token name or it will not work.
#
# Uncomment the sub-routines by removing the # mark at the beginning of each line below (as needed).
# add as many lines as you need between the opening and closing { } marks for the sub-routine used.

#
#add_codehook('the_file_script_and_substitute_top','template_token_script_and_substitute_top');
#sub template_token_script_and_substitute_top {
#   $the_file =~ s/\[\[WIDGETTOKENNAMEHERE\]\]/$sc_template_zonehome{'WIDGETNAMEHERE'}/;
#   $the_file =~ s/\[\[WIDGETTOKENNAMEHERE\]\]/$sc_template_zonehome{'WIDGETNAMEHERE'}/;
#}

# the second codehook routine - do not uncomment this comment - do not use unless needed.
#add_codehook('the_file_script_and_substitute_middle','template_token_script_and_substitute_middle');
#sub template_token_script_and_substitute_middle {
#   $the_file =~ s/\[\[WIDGETTOKENNAMEHERE\]\]/$sc_template_zonehome{'WIDGETNAMEHERE'}/;
#}


################################################################################
#####      MISC - REQUIRED     #####
################################################################################

# Add all widgets for the homepage to this array separated by commas & enclosed within single quote marks.
# Use a pipe character ( | ) to add a widget name for the ZoneHome widget sorter manager tab.
# Custom widgets used on other pages do not need to be added to this array
@mgr_template_zonehome_widgets = ( 'jumbotron|Jumbotron Hero Header','highlightedProducts|Highlighted Products Modal','responsive8HeaderSections|8 Mini Content Areas w/ Headings','marketingRows1|Row of 4 Products ID-1','marketingRows2|Row of 4 Products ID-2','featurette|3 Alternating Featurettes', 'ourProductCatList12|Our Products - 12 Modal Boxes', 'ourProductCatList16|Our Products - 16 Modal Boxes' );

$mgr_template_zonehome_enabled = 'yes';


################################################################################
#####      ZONEHOME WIDGETS - TEMPLATE SUPPLIED    #####
################################################################################


# Jumbotron / Hero header - background image handled in template CSS file
$sc_template_zonehome_tokens{'jumbotron'} = '[[jumbotron]]';
$sc_template_zonehome{'jumbotron'} = <<ENDOFTEXT;
<div class="agora_main_page_jumbotron hidden-xs">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a home page template for an AgoraCart based store and website. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-md" href="https://www.agoracart.com" role="button">Visit AgoraCart.com &raquo;</a></p>
  </div>
</div>
ENDOFTEXT
# This is the end of this widget


################################


# Highlighted Products/Services - 4 cells & responsive
# make sure images, product IDs (p_id), product categories (product), and
# sub-categories (a user field set in manager - default is: user 4) match items
# listed in your product database
$sc_template_zonehome_tokens{'highlightedProducts'} = '[[HighlightedProducts]]';
$sc_template_zonehome{'highlightedProducts'} = <<ENDOFTEXT;

<!-- START THE 4 MODAL PRODUCT CATEGORY BOXES  -->

<div class="row">
    <br>
    <h2 class="agora_promo_item_header">Highlighted Products</h2>
    <br>

<div class="product-list">

<!-- Product Category Box 1 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Cell Phone"><h4>Cell Phone</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00013/handsfreecell_lar_orig.jpg" alt="handsfreecell_lar_cat.jpg" title="Hands Free Cell Phone Attachment" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Hands Free Cell Phone Attachment</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 2 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Books" title="Books"><h4>Books</h4><span class="highlight"></span></a>
        </div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00009/made2stick_orig.jpg" alt="made2stick_cat.jpg" title="Books" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Business" title="Business">Business</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=CSS3" title="CSS">CSS</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Entrepreneurship" title="Entrepreneurship">Entrepreneurship</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Perl-Programming" title="Perl">Perl</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Programming-grthan-Beginner" title="Programming - Beginner">Programming > Beginner</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Books" title="View More: Books">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 3 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Posters" title="Posters"><h4>Posters</h4><span class="highlight"></span></a>
        </div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00020/motivation_05l_cat.jpg" alt="motivation_05l_cat.jpg" title="Posters" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00017&amp;product=Posters" title="Underachievement Poster">Underachievement Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00018&amp;product=Posters" title="Ambition Poster">Ambition Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00019&amp;product=Posters" title="Arrogance Poster">Arrogance Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00022&amp;product=Posters" title="Individuality Poster">Individuality Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00020&amp;product=Posters" title="Conformity Poster">Conformity Poster</a></a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Posters" title="View More: Posters">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 4 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Machine-Tooling" title="Machine Tooling"><h4>Machine Tooling</h4><span class="highlight"></span></a>
        </div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00014/Pic1a_cat.jpg" alt="Pic1a_cat.jpg" title="Machine Tooling" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00014" title="Kwik-Switch 200 3/4 inch Acura-Flex Collet Chuck">Product 1</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00016" title="Kwik-Switch 200 1/2 inch Acura-Flex Collet Chuck">Product 2</a></a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Machine-Tooling" title="View More: Machine Tooling">more</a>
            </div>
        </div>
    </div>
</div>

</div>
<div class="col-xs-12 col-lg-12"><p><br></p></div>

</div>

<!-- /END THE 4 MODAL PRODUCT CATEGORY BOXES  -->

ENDOFTEXT
# This is the end of this widget


################################


# Responsive Header & Info Section - 8 cells
# 50% width (2 cells wide) if screen size: xs, sm, or md (col-xs-6, col-sm-6, col-md-6)
# 33% width (3 cells wide) if screen size: lg (col-lg-4)
$sc_template_zonehome_tokens{'responsive8HeaderSections'} = '[[responsive8HeaderSections]]';
$sc_template_zonehome{'responsive8HeaderSections'} = <<ENDOFTEXT;

<!-- START THE 6 HEADING CELLS -->

<div class="row">

<!-- Heading Cell 1 -->
<div class="col-xs-6 col-lg-4">
  <h2>Heading</h2>
  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>

<!-- Heading Cell 2 -->

<div class="col-xs-6 col-lg-4">
  <h2>Heading</h2>
  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>

<!-- Heading Cell 3 -->

<div class="col-xs-6 col-lg-4">
  <h2>Heading</h2>
  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>

<!-- Heading Cell 4 -->

<div class="col-xs-6 col-lg-4">
  <h2>Heading</h2>
  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>

<!-- Heading Cell 5 -->

<div class="col-xs-6 col-lg-4">
  <h2>Heading</h2>
  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>

<!-- Heading Cell 6 -->

<div class="col-xs-6 col-lg-4">
  <h2>Heading</h2>
  <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
  <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>

<div class="col-xs-12 col-lg-12"><p><br><hr></p></div>

</div>

<!-- /END THE 6 HEADING CELLS -->

ENDOFTEXT
# This is the end of this widget


################################


# Product Service Marketing Rows 1
# large screens have 4 per row, all other screens have 2 per row
$sc_template_zonehome_tokens{'marketingRows1'} = '[[marketingRows1]]';
$sc_template_zonehome{'marketingRows1'} = <<ENDOFTEXT;

<div class="row">
    <div class="col-xs-12 col-lg-12">
        <h2 class="agora_promo_item_header">Product/Service Marketing Rows 1</h2>
    </div>
    <div class="col-xs-12 col-lg-12"><p><br></p></div>
    <div class="col-xs-6 col-lg-3">
        <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" title="product name here"><img class="img-responsive img-thumbnail center-block" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"></a>
        <h3 class="agora_promo_item_header text-center">Product Name</h3>
        <p class="ac_product_desc">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit ... <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" role="button" class="btn btn-primary btn-xs" title="product name here"><i class="fa fa-info-circle fa-lg"></i>View Details &raquo;</a></p>
        <p class="ac_product_price text-center">\$ 1.99</p>
    </div>
    <div class="col-xs-6 col-lg-3">
        <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" title="product name here"><img class="img-responsive img-thumbnail center-block" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"></a>
        <h3 class="agora_promo_item_header text-center">Product Name</h3>
        <p class="ac_product_desc">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit ... <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" role="button" class="btn btn-primary btn-xs" title="product name here"><i class="fa fa-info-circle fa-lg"></i>View Details &raquo;</a></p>
        <p class="ac_product_price text-center">\$ 49.22</p>
    </div>
    <div class="col-xs-6 col-lg-3">
        <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" title="product name here"><img class="img-responsive img-thumbnail center-block" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"></a>
        <h3 class="agora_promo_item_header text-center">Product Name</h3>
        <p class="ac_product_desc">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit ... <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" role="button" class="btn btn-primary btn-xs" title="product name here"><i class="fa fa-info-circle fa-lg"></i>View Details &raquo;</a></p>
        <p class="ac_product_price text-center">\$ 25.00</p>
    </div>
    <div class="col-xs-6 col-lg-3">
        <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" title="product name here"><img class="img-responsive img-thumbnail center-block" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"></a>
        <h3 class="agora_promo_item_header text-center">Product Name</h3>
        <p class="ac_product_desc">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit ... <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" role="button" class="btn btn-primary btn-xs" title="product name here"><i class="fa fa-info-circle fa-lg"></i>View Details &raquo;</a></p>
        <p class="ac_product_price text-center">\$ 33.77</p>
    </div>
    <div class="col-xs-12 col-lg-12"><p><hr><br></p></div>
</div><!-- /.row -->

ENDOFTEXT
# This is the end of this widget


################################


# Product Service Marketing Rows 2
# large screens have 4 per row, all other screens have 2 per row
$sc_template_zonehome_tokens{'marketingRows2'} = '[[marketingRows2]]';
$sc_template_zonehome{'marketingRows2'} = <<ENDOFTEXT;

<div class="row">
    <div class="col-xs-12 col-lg-12">
        <h2 class="agora_promo_item_header">Product/Service Marketing Rows 2</h2>
    </div>
    <div class="col-xs-12 col-lg-12"><p><br></p></div>
    <div class="col-xs-6 col-lg-3">
        <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" title="product name here"><img class="img-responsive img-thumbnail center-block" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"></a>
        <h3 class="agora_promo_item_header text-center">Product Name</h3>
        <p class="ac_product_desc">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit ... <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" role="button" class="btn btn-primary btn-xs" title="product name here"><i class="fa fa-info-circle fa-lg"></i>View Details &raquo;</a></p>
        <p class="ac_product_price text-center">\$ 1.99</p>
    </div>
    <div class="col-xs-6 col-lg-3">
        <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" title="product name here"><img class="img-responsive img-thumbnail center-block" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"></a>
        <h3 class="agora_promo_item_header text-center">Product Name</h3>
        <p class="ac_product_desc">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit ... <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" role="button" class="btn btn-primary btn-xs" title="product name here"><i class="fa fa-info-circle fa-lg"></i>View Details &raquo;</a></p>
        <p class="ac_product_price text-center">\$ 49.22</p>
    </div>
    <div class="col-xs-6 col-lg-3">
        <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" title="product name here"><img class="img-responsive img-thumbnail center-block" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"></a>
        <h3 class="agora_promo_item_header text-center">Product Name</h3>
        <p class="ac_product_desc">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit ... <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" role="button" class="btn btn-primary btn-xs" title="product name here"><i class="fa fa-info-circle fa-lg"></i>View Details &raquo;</a></p>
        <p class="ac_product_price text-center">\$ 25.00</p>
    </div>
    <div class="col-xs-6 col-lg-3">
        <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" title="product name here"><img class="img-responsive img-thumbnail center-block" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140"></a>
        <h3 class="agora_promo_item_header text-center">Product Name</h3>
        <p class="ac_product_desc">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit ... <a href="[[storeFullURL]]?p_id=00023&amp;product=Posters" role="button" class="btn btn-primary btn-xs" title="product name here"><i class="fa fa-info-circle fa-lg"></i>View Details &raquo;</a></p>
        <p class="ac_product_price text-center">\$ 33.77</p>
    </div>
    <div class="col-xs-12 col-lg-12"><p><hr><br></p></div>
</div><!-- /.row -->

ENDOFTEXT
# This is the end of this widget


################################


# Featurette - 3 items
$sc_template_zonehome_tokens{'featurette'} = '[[featurette]]';
$sc_template_zonehome{'featurette'} = <<ENDOFTEXT;

<!-- REMOVE THIS SCRIPT ONCE YOU USE YOUR OWN IMAGES -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.6/holder.min.js"></script>

<!-- START THE FEATURETTES -->

<div class="row">
    <div class="col-md-7">
        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5">
        <img class="featurette-image img-responsive center-block" data-src="holder.js/350x350/auto" alt="Generic placeholder image">
    </div>
</div>

<div class="col-xs-12 col-lg-12"><p><br><hr><br></p></div>

<div class="row featurette">
    <div class="col-md-7 col-md-push-5">
        <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5 col-md-pull-7">
        <img class="featurette-image img-responsive center-block" data-src="holder.js/350x350/auto" alt="Generic placeholder image">
    </div>
</div>

<div class="col-xs-12 col-lg-12"><p><br><hr><br></p></div>

<div class="row featurette">
    <div class="col-md-7">
        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>
    <div class="col-md-5">
        <img class="featurette-image img-responsive center-block" data-src="holder.js/350x350/auto" alt="Generic placeholder image">
    </div>
</div>

<div class="col-xs-12 col-lg-12"><p><br><hr></p></div>

<!-- /END THE FEATURETTES -->
ENDOFTEXT
# This is the end of this widget


################################

# Products/Services - 12 cells & responsive
# make sure images, product IDs (p_id), product categories (product), and
# sub-categories (a user field set in manager - default is: user 4) match items
# listed in your product database
$sc_template_zonehome_tokens{'ourProductCatList12'} = '[[ourProductCatList12]]';
$sc_template_zonehome{'ourProductCatList12'} = <<ENDOFTEXT;

<!-- REMOVE THIS SCRIPT ONCE YOU USE YOUR OWN IMAGES -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.6/holder.min.js"></script>

<!-- START THE 12 MODAL PRODUCT CATEGORY BOXES  -->

<div class="row">
    <br>
    <h2 class="agora_promo_item_header">Our Products</h2>
    <br>

<div class="product-list">

<!-- Product Category Box 1 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Cell Phone"><h4>Cell Phone</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00013/handsfreecell_lar_orig.jpg" alt="handsfreecell_lar_cat.jpg" title="Hands Free Cell Phone Attachment" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Hands Free Cell Phone Attachment</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 2 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Books" title="Books"><h4>Books</h4><span class="highlight"></span></a>
        </div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00009/made2stick_orig.jpg" alt="made2stick_cat.jpg" title="Books" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Business" title="Business">Business</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=CSS3" title="CSS">CSS</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Entrepreneurship" title="Entrepreneurship">Entrepreneurship</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Perl-Programming" title="Perl">Perl</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Programming-grthan-Beginner" title="Programming - Beginner">Programming > Beginner</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Books" title="View More: Books">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 3 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Posters" title="Posters"><h4>Posters</h4><span class="highlight"></span></a>
        </div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00020/motivation_05l_cat.jpg" alt="motivation_05l_cat.jpg" title="Posters" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00017&amp;product=Posters" title="Underachievement Poster">Underachievement Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00018&amp;product=Posters" title="Ambition Poster">Ambition Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00019&amp;product=Posters" title="Arrogance Poster">Arrogance Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00022&amp;product=Posters" title="Individuality Poster">Individuality Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00020&amp;product=Posters" title="Conformity Poster">Conformity Poster</a></a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Posters" title="View More: Posters">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 4 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Machine-Tooling" title="Machine Tooling"><h4>Machine Tooling</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00014" title="Kwik-Switch 200 3/4 inch Acura-Flex Collet Chuck">3/4 inch Kwik-Switch 200 Acura-Flex Collet Chuck</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00016" title="Kwik-Switch 200 1/2 inch Acura-Flex Collet Chuck">1/2 inch Kwik-Switch 200 Acura-Flex Collet Chuck</a></a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Machine-Tooling" title="View More: achine Tooling">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 5 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 6 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 7 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 8 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

</div>
<div class="product-list">

<!-- Product Category Box 9 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 10 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 11 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 12 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

</div>
<div class="col-xs-12 col-lg-12"><p><br></p></div>

</div>

<!-- /END THE 12 MODAL PRODUCT CATEGORY BOXES  -->

ENDOFTEXT
# This is the end of this widget


################################



# Products/Services - 16 cells & responsive
# make sure images, product IDs (p_id), product categories (product), and
# sub-categories (a user field set in manager - default is: user 4) match items
# listed in your product database
$sc_template_zonehome_tokens{'ourProductCatList16'} = '[[ourProductCatList16]]';
$sc_template_zonehome{'ourProductCatList16'} = <<ENDOFTEXT;

<!-- REMOVE THIS SCRIPT ONCE YOU USE YOUR OWN IMAGES -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.6/holder.min.js"></script>

<!-- START THE 12 MODAL PRODUCT CATEGORY BOXES  -->

<div class="row">
    <br>
    <h2 class="agora_promo_item_header">Our Products</h2>
    <br>

<div class="product-list">

<!-- Product Category Box 1 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Cell Phone"><h4>Cell Phone</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00013/handsfreecell_lar_orig.jpg" alt="handsfreecell_lar_cat.jpg" title="Hands Free Cell Phone Attachment" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Hands Free Cell Phone Attachment</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 2 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Books" title="Books"><h4>Books</h4><span class="highlight"></span></a>
        </div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00009/made2stick_orig.jpg" alt="made2stick_cat.jpg" title="Books" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Business" title="Business">Business</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=CSS3" title="CSS">CSS</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Entrepreneurship" title="Entrepreneurship">Entrepreneurship</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Perl-Programming" title="Perl">Perl</a></li>
                    <li><a href="[[storeFullURL]]?product=Books&amp;user4=Programming-grthan-Beginner" title="Programming - Beginner">Programming > Beginner</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Books" title="View More: Books">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 3 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Posters" title="Posters"><h4>Posters</h4><span class="highlight"></span></a>
        </div>
        <div class="content">
            <div class="photo">
                <img src="[[BaseURL]][[URLofImages]]/00020/motivation_05l_cat.jpg" alt="motivation_05l_cat.jpg" title="Posters" height="140" width="140">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00017&amp;product=Posters" title="Underachievement Poster">Underachievement Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00018&amp;product=Posters" title="Ambition Poster">Ambition Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00019&amp;product=Posters" title="Arrogance Poster">Arrogance Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00022&amp;product=Posters" title="Individuality Poster">Individuality Poster</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00020&amp;product=Posters" title="Conformity Poster">Conformity Poster</a></a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Posters" title="View More: Posters">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 4 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Machine-Tooling" title="Machine Tooling"><h4>Machine Tooling</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00014" title="Kwik-Switch 200 3/4 inch Acura-Flex Collet Chuck">3/4 inch Kwik-Switch 200 Acura-Flex Collet Chuck</a></a></li>
                    <li><a href="[[storeFullURL]]?p_id=00016" title="Kwik-Switch 200 1/2 inch Acura-Flex Collet Chuck">1/2 inch Kwik-Switch 200 Acura-Flex Collet Chuck</a></a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Machine-Tooling" title="View More: achine Tooling">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 5 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 6 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 7 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 8 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

</div>
<div class="product-list">

<!-- Product Category Box 9 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 10 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 11 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 12 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 13 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 14 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 15 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

<!-- Product Category Box 16 -->

<div class="item col-xs-6 col-sm-6 col-md-3 col-lg-3 item-color">
    <div class="area">
        <div class="title"><a href="[[storeFullURL]]?product=Cell-Phone" title="Category Name"><h4>Category Name</h4><span class="highlight"></span></a></div>
        <div class="content">
            <div class="photo">
                <img class="featurette-image img-responsive center-block" data-src="holder.js/140x140/auto" alt="Generic placeholder image">
            </div>
            <div class="info">
                <ul class="list">
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 1</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 2</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 3</a></li>
                    <li><a href="[[storeFullURL]]?p_id=00013&amp;product=Cell-Phone" title="Hands-Free Cell Phone Attachement">Product 4</a></li>
                </ul>
                <a class="more btn btn-primary btn-sm" role="button" href="[[storeFullURL]]?product=Cell-Phone" title="View More: Cell Phone">more</a>
            </div>
        </div>
    </div>
</div>

</div>
<div class="col-xs-12 col-lg-12"><p><br></p></div>

</div>

<!-- /END THE 16 MODAL PRODUCT CATEGORY BOXES  -->

ENDOFTEXT
# This is the end of this widget


################################



#####      END: REQUIRED      #####
###############################################################################
1;
